Что такое критический путь рендеринга браузера?

Question

Критический путь рендеринга — это последовательность шагов и ресурсов, которые нужны браузеру, чтобы показать страницу пользователю. Обычно он включает построение DOM, CSSOM, создание Render Tree, layout и paint. Если на пути есть блокирующие ресурсы (часто CSS и синхронный JS), браузер откладывает первую отрисовку. Оптимизация критического пути — это уменьшение объёма и количества блокирующих ресурсов и перенос некритичных загрузок.

YeaHub · Accepted Answer

Критический путь рендеринга (Critical Rendering Path) описывает “минимально необходимую цепочку”, без которой браузер не сможет отрисовать первый экран.ОпределениеОпределение: Критический путь рендеринга — набор операций и зависимостей (ресурсы + шаги), которые должны завершиться, чтобы браузер смог выполнить первую отрисовку.Из чего обычно состоит путьПеред первой отрисовкой браузеру обычно нужно:Построить DOM из HTML.Загрузить и распарсить CSS → построить CSSOM.Собрать Render Tree из DOM + CSSOM.Выполнить layout (геометрия).Выполнить paint (рисование), иногда composite.Что чаще всего “блокирует” критический путьCSS как render-blockingПока стили не готовы, браузер не хочет рисовать страницу “голой”.Синхронный JS в неподходящем месте defer позволяет браузеру продолжать строить DOM, а скрипт выполнится позже, когда HTML уже распарсен.Вывод: критический путь рендеринга — это то, что влияет на скорость появления первого полезного контента. Его оптимизация почти всегда сводится к уменьшению блокирующих CSS/JS и переносу второстепенных вещей “после первого экрана”.