Что такое Critical rendering path?

#javascript #html #css #терминология #оптимизация_сайтов

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

Ответы

Ответ 1

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

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


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


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