Что такое Critical rendering path? [требует правки]

261

09 марта 2017, 22:50

Объясните, пожалуйста, значение термина Critical rendering path.

Answer 1

Critical rendering path — путь, который проходит браузер до того, как страница отрисовывается в браузере.

Этот путь в общем виде состоит из таких шагов (без детализации работы на сетевом уровне):

Получение ответа от сервера — HTML. Браузер парсит HTML, чтобы построить DOM
Построение объектной модели CSS — CSSOM.
Выполнение скриптов (поэтому, в основном, их надо помещать в конце документа).
Построение дерева рендера на основе DOM и CSSOM.
Отрисовка страницы.

Если рассматривать этот путь в разрезе CSS, то CSS является блокирующим рендер ресурсом, т. е. если во время разбора HTML браузер встречает ссылку на CSS-файл, то продвижение по пути останавливается и браузер начинает скачивать файл и разбирать его. Для оптимизации этого процесса рекомендуется помещать CSS, достаточный для отображения первого экрана, в <head> внутрь тега <style> — таким образом браузер получит и начнет парсить CSS по пути разбора всего HTML и не будет останавливаться на скачивание и разбор внешнего файла.

Материал на developers.google.com.

Answer 2

применительно к css - это стили влияющие на первую 1000 пикселей высоты страницы размещенные инлайн. это позволяет ускорить отображение страницы еще до загрузки полного css.