Ответ
Критические этапы рендеринга (Critical Rendering Path) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация CRP напрямую влияет на скорость загрузки страницы.
- DOM (Document Object Model) — парсинг HTML и построение дерева DOM.
- CSSOM (CSS Object Model) — парсинг CSS и построение дерева стилей.
- Render Tree — объединение DOM и CSSOM в дерево рендеринга (исключает невидимые элементы).
- Layout (Reflow) — расчёт позиций и размеров элементов.
- Paint — отрисовка пикселей (растеризация).
- Composite — объединение слоёв (если используется GPU-ускорение).
Пример оптимизации:
<!-- Подключаем CSS в <head> для раннего построения CSSOM -->
<link rel="stylesheet" href="styles.css">
<!-- JS с атрибутом defer/async, чтобы не блокировать парсинг -->
<script defer src="app.js"></script> Важно:
- CSS блокирует рендеринг, поэтому его нужно загружать как можно раньше.
- JS блокирует парсинг HTML (если нет
async/defer), поэтому его лучше размещать перед закрывающим</body>. - Избегайте синхронных стилей (
@import) и инлайновых скриптов без необходимости.