Опубликовано: 31 марта 2014 г.
По умолчанию CSS рассматривается как ресурс, блокирующий рендеринг, что означает, что браузер не будет отображать обрабатываемый контент до тех пор, пока не будет создан CSSOM. Убедитесь, что ваш CSS максимально лаконичен, доставляется как можно быстрее, и используйте типы данных и запросы для разблокировки рендеринга.
При построении дерева рендеринга мы увидели, что для критического пути рендеринга необходимы как DOM, так и CSSOM. Это создает важное влияние на производительность: и HTML, и CSS являются ресурсами, блокирующими рендеринг. С HTML все очевидно, поскольку без DOM нам нечего было бы рендерить, но требование к CSS может быть менее очевидным. Что произойдет, если мы попытаемся отрендерить обычную страницу, не блокируя рендеринг CSS?
Краткое содержание
- По умолчанию CSS рассматривается как ресурс, блокирующий рендеринг.
- Типы носителей и медиазапросы позволяют нам помечать некоторые ресурсы CSS как неблокирующие при рендеринге.
- Браузер загружает все ресурсы CSS независимо от блокирующего или неблокирующего режима работы.
Приведенный выше пример, демонстрирующий веб-сайт New York Times с CSS и без него, показывает, почему отрисовка блокируется до тех пор, пока не будет доступен CSS — без CSS страница практически непригодна для использования. Ситуация справа часто называется «вспышкой нестилизованного контента» (Flash of Unstyled Content, FOUC) . Браузер блокирует отрисовку до тех пор, пока не получит и DOM, и CSSOM.
CSS — это ресурс, блокирующий рендеринг. Чтобы оптимизировать время первого рендеринга, передавайте его клиенту как можно скорее.
Однако что, если у нас есть стили CSS, которые используются только при определенных условиях, например, при печати страницы или проецировании на большой монитор? Было бы здорово, если бы нам не приходилось блокировать рендеринг этих ресурсов.
CSS-теги "media types" и "media queries" позволяют нам решать следующие задачи:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Медиа-запрос состоит из типа носителя и нуля или более выражений, проверяющих условия определенных характеристик носителя. Например, наше первое объявление таблицы стилей не содержит типа носителя или запроса, поэтому оно применяется во всех случаях; то есть, оно всегда блокирует отрисовку. С другой стороны, второе объявление таблицы стилей применяется только при печати контента — например, вы хотите изменить расположение элементов, шрифты и другие важные параметры дизайна для печати. Следовательно, это объявление таблицы стилей не должно блокировать отрисовку страницы при ее первой загрузке. Наконец, последнее объявление таблицы стилей содержит «медиа-запрос», который выполняется браузером: если условия совпадают, браузер блокирует отрисовку до тех пор, пока таблица стилей не будет загружена и обработана.
Используя медиа-запросы, мы можем адаптировать наше представление к конкретным сценариям использования, например, для отображения или печати, а также к динамическим условиям, таким как изменение ориентации экрана, события изменения размера и многое другое. При объявлении ресурсов таблиц стилей уделяйте особое внимание типу носителя и запросам; они существенно влияют на производительность критически важных процессов рендеринга.
Рассмотрим следующие примеры:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- Первое объявление блокирует отрисовку и соответствует всем условиям.
- Второе объявление также блокирует отрисовку:
"all"— это тип по умолчанию, поэтому, если вы не указываете тип, он неявно устанавливается в"all". Следовательно, первое и второе объявления фактически эквивалентны. - Третье объявление содержит динамический медиа-запрос, который выполняется при загрузке страницы. В зависимости от ориентации устройства во время загрузки страницы,
portrait.cssможет блокировать или не блокировать отрисовку. - Последнее объявление применяется только при выводе страницы на экран (
"print"), поэтому оно не блокирует отрисовку при первой загрузке страницы в браузере.
Наконец, следует отметить, что «блокировка рендеринга» относится только к тому, должен ли браузер удерживать начальную отрисовку страницы на этом ресурсе. В любом случае браузер все равно загружает CSS-ресурс, хотя и с более низким приоритетом для неблокирующих ресурсов.