Расскажи про критические этапы рендеринга браузера (Critical Rendering Path)

Критические этапы рендеринга браузера (Critical Rendering Path) — это последовательность шагов, которые браузер выполняет для отображения веб-страницы пользователю:

1. Парсинг HTML — браузер получает HTML и строит DOM-дерево.
2. Парсинг CSS — загружаются и обрабатываются CSS-файлы, создается CSSOM (CSS Object Model).
3. Построение Render Tree — объединение DOM и CSSOM в дерево рендеринга, содержащее только видимые элементы с их стилями.
4. Layout (Reflow) — вычисление точных позиций и размеров элементов на странице.
5. Painting — отрисовка пикселей на экране.

Оптимизация Critical Rendering Path важна для ускорения загрузки страницы и улучшения пользовательского опыта. Например, минимизация блокирующих CSS и JavaScript, использование асинхронной загрузки скриптов и инлайнинг критических стилей помогают сократить время до первого отображения контента.