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

260
09 марта 2017, 22:50

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

Answer 1

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.

Answer 2

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

READ ALSO
flexbox баги, поддержка браузеров и устройств

flexbox баги, поддержка браузеров и устройств

Привет всем! Я недавно столкнулся с проблемой flexbox на iosКак я понял в итоге не работают некоторые свойства в некорых ситуациях, словом есть...

312
Неверное время в MySQLзапросе

Неверное время в MySQLзапросе

У меня есть БД с данными о резервировании жильяКаждая запись имеет дату заявки (поле reservated)

246
GROUP_CONCAT в JOIN

GROUP_CONCAT в JOIN

Есть таблица categories и таблица category_type со связьюМне надо выбрать из таблицы categories категории и для каждой выбрать связи из category_type

228
Объединение строк в mysql

Объединение строк в mysql

Есть таблица с сообщениями пользователейuser_id | message

307