6

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

1
  • где ты увидел этот термин и причем тут css?
    – Grundy
    6 мар 2017 в 13:22

2 ответа 2

10

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

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

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

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

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

3

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.