Это последовательность шагов, которые браузер выполняет для отображения содержимого страницы на экране, начиная с получения HTML-документа. Включает в себя:
- Построение DOM (Document Object Model): Парсинг HTML-кода и создание дерева объектов, представляющих структуру документа.
- Построение CSSOM (CSS Object Model): Парсинг CSS-файлов и inline-стилей для создания дерева объектов, представляющих стили элементов.
- Построение Render Tree: Объединение DOM и CSSOM. Создается дерево только отрисовываемых элементов с примененными к ним стилями.
- Layout (или Reflow): Определение геометрических размеров и положения каждого элемента на странице.
- Paint (или Repaint): Заполнение пикселей на экране на основе Render Tree и данных Layout.
Оптимизация критического пути рендеринга направлена на то, чтобы браузер как можно быстрее отобразил первый осмысленный контент (First Meaningful Paint) или интерактивность (Time to Interactive). Это достигается за счет минимизации блокирующих ресурсов (JS и CSS), оптимизации размеров ресурсов и их загрузки в подходящий момент.