Из каких этапов состоит CRP

CRP (Critical Rendering Path) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Основные этапы:

1. DOM — парсинг HTML и построение дерева DOM
2. CSSOM — парсинг CSS и построение дерева CSSOM
3. Render Tree — комбинация DOM и CSSOM
4. Layout (Reflow) — расчёт позиций и размеров элементов
5. Paint — отрисовка пикселей (растеризация)
6. Composite — композиция слоёв (если есть)

Пример оптимизации:

// Плохо - вызывает multiple reflows
element.style.width = '100px';
element.style.height = '200px';

// Лучше - batch changes
element.style.cssText = 'width:100px; height:200px;';

Оптимизация CRP ускоряет First Meaningful Paint. Важно минимизировать размеры ресурсов и количество reflow/repaint.