frontend-docs/docs/browser/04-critical-render-path.md

sidebar_position

sidebar_position
4

Critical render path

Критический путь рендеринга (Critical Rendering Path, CRP) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация критического пути рендеринга важна для ускорения загрузки и отображения веб-страниц, что напрямую влияет на пользовательский опыт.

Основные этапы критического пути рендеринга:

1. Загрузка и парсинг HTML:
   • Браузер загружает HTML-документ и начинает его парсить.
   • Во время парсинга браузер встречает ссылки на внешние ресурсы (CSS, JavaScript, изображения) и начинает их загружать. При встрече с тегом <link> (CSS) или <script> (JS) — загрузка может приостанавливаться:
     • CSS — блокирует рендеринг (нельзя построить layout без стилей).
     • JS — может блокировать парсинг HTML, если не имеет async или defer.
   • Браузер преобразует HTML в дерево DOM.
   • Каждый HTML-элемент становится узлом в DOM.
2. Загрузка и парсинг CSS:
   • Когда браузер встречает CSS-файлы, он их загружает и строит CSSOM (CSS Object Model)..
   • CSSOM представляет собой дерево стилей, где каждый узел соответствует CSS-правилу.
   • CSSOM используется для определения стилей элементов.
3. Создание дерева рендеринга (Render Tree):
   • Браузер объединяет DOM и CSSOM в дерево рендеринга.
   • Дерево рендеринга содержит только видимые элементы (например, элементы с display: none не включаются).
   • Каждому видимому узлу назначаются стили (цвет, размер, шрифт и т.д.).
4. Компоновка (Layout):
   • Браузер рассчитывает положение и размеры каждого элемента на странице.
   • Этот процесс также называется рефлоу (reflow).
   • Результат — layout tree с точными координатами.
5. Отрисовка (Paint):
   • Браузер отрисовывает пиксели на экране на основе данных из дерева рендеринга.
   • Этот процесс включает в себя растеризацию (rasterization) и отрисовку слоев.
6. Композиция (Composite):
   • Браузер объединяет слои (например, элементы с position: fixed или анимации) для финального отображения.

🧠 Визуальное резюме

HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree
Render Tree → Layout
Layout → Paint → Composite → Screen

⚡ Что замедляет CRP

• Большие или блокирующие CSS/JS → откладывают построение render tree.
• Много вложенных или тяжёлых стилей → усложняют layout и paint.
• Синхронные JS-скрипты без async/defer.
• Шрифты с блокирующей загрузкой (@font-face без font-display).

Как оптимизировать критический путь рендеринга?

Оптимизация CRP направлена на ускорение загрузки и отображения контента, особенно "выше сгиба" (above the fold). Основные подходы:

1. Минимизация размера файлов:
   • Сжимайте HTML, CSS и JavaScript (например, с помощью Gzip или Brotli).
   • Удаляйте лишние пробелы, комментарии и неиспользуемый код.
2. Уменьшение количества ресурсов:
   • Объединяйте CSS и JavaScript-файлы.
   • Используйте встроенные стили для критического CSS (Critical CSS).
3. Оптимизация загрузки CSS:
   • Разделяйте CSS на критический и некритический.
   • Используйте media-атрибуты для загрузки только необходимых стилей:
4. Оптимизация загрузки JavaScript:
   • Используйте атрибуты async или defer для загрузки скриптов без блокировки рендеринга:
   • Переносите скрипты в конец документа (перед закрывающим тегом </body>).
5. Приоритизация загрузки ресурсов:
   • Используйте <link rel="preload"> для приоритетной загрузки критических ресурсов:
6. Оптимизация изображений:
   • Используйте современные форматы (WebP, AVIF).
   • Сжимайте изображения и используйте srcset для адаптивной загрузки.
7. Минимизация количества рефлоу и репинтов:
   • Избегайте изменения стилей, которые вызывают рефлоу (например, width, height, margin).
   • Используйте transform и opacity для анимаций, так как они не вызывают рефлоу.
8. Использование кеширования:
   • Настройте кеширование статических ресурсов (CSS, JS, изображения) на стороне сервера.

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

1. Критический CSS:
   • Встраивайте стили, необходимые для отображения контента "выше", прямо в HTML
2. Асинхронная загрузка скриптов:
   • Используйте async или defer для загрузки JavaScript
3. Предзагрузка шрифтов:
   • Загружайте шрифты заранее, чтобы избежать задержек

🧩 Где выполняется JavaScript

JavaScript выполняется во время построения DOM, то есть ещё до этапа Render Tree, если скрипт найден в HTML. Это происходит до Layout и Paint, потому что браузер должен знать, как изменится структура страницы, прежде чем её рисовать.

🕹️ Подробно по этапам:

1. HTML → DOM

• Когда парсер HTML встречает <script>:

  • Без async и defer — парсинг останавливается. Браузер загружает и выполняет JS, потом продолжает строить DOM.

  • С defer — выполнение откладывается до после построения DOM (но до DOMContentLoaded).

  • С async — выполняется сразу после загрузки, независимо от DOM.

    ⚠️ Поэтому синхронный JS может блокировать CRP, т.к. пока он выполняется — DOM и CSSOM не достраиваются, а рендер не продолжается.

2. После построения Render Tree

• Когда JS выполняется в runtime (например, после загрузки страницы), он может:
  • Изменять DOM (через document.createElement, innerHTML, и т.д.)
  • Изменять стили (через element.style или изменение классов)

Эти изменения вызывают reflow (layout) и/или repaint, что частично повторяет CRP:

DOM update → Render Tree update → Layout → Paint → Composite

🚀 Источник: DeepSeek, ChatGPT
🚀 Источник: https://www.youtube.com/watch?v=Ff_IZrs4GcY