От автора: все хотят, чтобы их страница загружалась быстрее. Это также помогает повысить производительность SEO. Давайте посмотрим, как можно уменьшить время загрузки страницы, внеся несколько изменений в CSS.
Влияние CSS на время загрузки страницы
CSS — один из основных факторов, влияющих на время загрузки страницы. Когда приложение встречает файл CSS, оно загружает CSS в приоритетном порядке. На основе CSS создаются объектные модели CSS (CSSOM). После создания CSSOM он объединяется с деревом DOM для создания «дерева рендеринга». Дерево рендеринга создается, когда дерево DOM объединяется с CSSOM и обеспечивает правильный стиль для всех компонентов на странице.
Чем больше CSS в приложении, тем больше времени уходит на создание CSSOM и его слияние с DOM для создания дерева рендеринга.
Как только HTML встречает файл CSS, он ожидает загрузки файла и создания CSSOM. Парсер ожидает завершения этой операции. Поэтому говорят, что CSS блокирует рендеринг.
Использование неблокирующего CSS
Чтобы решить эту проблему, мы можем использовать простой хак и улучшить производительность приложения. Мы хотим, чтобы браузер не ждал загрузки CSS и создания CSSOM во время начальной загрузки страницы.
Мы можем отложить создание CSSOM для некритических ресурсов CSS. Представим, что у нас есть некоторый CSS, который будет применен к определенному элементу, который будет отображаться только после начальной загрузки страницы. Таким образом, нам, для загрузки страницы не нужно ждать загрузки и анализа CSS.
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Приведенный выше код указывает, что значением «media» для CSS является «print» , что означает, что CSS не будет применяться изначально и будет применен, когда пользователь попытается распечатать страницу. Также, мы добавили функцию «onload», которая гласит, что после загрузки страницы тип «media» изменится на «all», сделав ее доступным для всех типов media.
Это произойдет, когда страница загрузится, и, таким образом, страница не ждет загрузки CSS и создания CSSOM. Это ускоряет ее загрузку.
* Свойство «media = ‘print’» следует применять только к тем элементам CSS, которые не влияют на первоначальную загрузку страницы. Стили, которые требуются при загрузке страницы на экран, не могут иметь «media = ‘print’».
Автор: Mayank Gupta
Источник: javascript.plainenglish.io
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
