Значение “Critical Path”

219

07 марта 2017, 15:21

Кто нибудь скажет мне. что такое "Critical path"?

Answer 1

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

Answer 2

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

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

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

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

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