Какие знаешь критические этапы рендеринга

Критические этапы рендеринга (Critical Rendering Path) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация CRP напрямую влияет на скорость загрузки страницы. 1. **DOM (Document Object Model)** — парсинг HTML и построение дерева DOM. 2. **CSSOM (CSS Object Model)** — парсинг CSS и построение дерева стилей. 3. **Render Tree** — объединение DOM и CSSOM в дерево рендеринга (исключает невидимые элементы). 4. **Layout (Reflow)** — расчёт позиций и размеров элементов. 5. **Paint** — отрисовка пикселей (растеризация). 6. **Composite** — объединение слоёв (если используется GPU-ускорение). **Пример оптимизации:** ```html для раннего построения CSSOM --> ``` **Важно:** - CSS блокирует рендеринг, поэтому его нужно загружать как можно раньше. - JS блокирует парсинг HTML (если нет `async/defer`), поэтому его лучше размещать перед закрывающим ``. - Избегайте синхронных стилей (`@import`) и инлайновых скриптов без необходимости.