Parlez-moi du Chemin Critique de Rendu — que se passe-t-il lors de la construction de l'arbre de rendu?

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

При построении дерева рендеринга происходит следующее:

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

Важный момент — браузер не может начать отрисовку, пока не построит Render Tree, поэтому ресурсы, блокирующие парсинг (например, CSS и синхронные скрипты), задерживают отображение.

Оптимизация CRP включает минимизацию блокирующих ресурсов, асинхронную загрузку скриптов, инлайнинг критического CSS, чтобы ускорить первую отрисовку страницы.