PrepBro
← Назад к вопросам

Что такое критические этапы рендеринга?

2.2 Middle🔥 151 комментариев
#JavaScript Core

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Критические этапы рендеринга (Critical Rendering Path)

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

Последовательность этапов CRP

Процесс можно разделить на шесть ключевых этапов:

  1. Построение DOM (Document Object Model)
    Браузер парсит полученный HTML-код, преобразуя теги и их содержимое в узлы дерева DOM.

```html
<!-- HTML -->
<html>
  <head>...</head>
  <body>
    <p>Текст</p>
  </body>
</html>
```
```javascript
// Результирующее дерево DOM (упрощенно)
html
├── head
└── body
    └── p
        └── "Текст"
```

    Важно: парсинг HTML может приостанавливаться при встрече тегов `<script>` без атрибутов `async`/`defer`, так как браузер должен немедленно загрузить и выполнить скрипт.
  1. Построение CSSOM (CSS Object Model)
    Параллельно или после построения DOM браузер анализирует CSS (внешние, внутренние таблицы стилей и инлайновые стили) и строит дерево CSSOM. Это также **дерево**, но с особыми правилами каскада и наследования, которые определяют итоговые стили для каждого элемента.

```css
body { font-size: 16px; }
p { color: red; font-weight: bold; }
```

3. Формирование Render Tree (дерева отрисовки)

    Браузер комбинирует DOM и CSSOM, создавая **Render Tree**. Это дерево содержит только **видимые элементы** (например, исключаются узлы с `display: none` или `head`). Каждому узлу Render Tree сопоставлены вычисленные стили (computed styles).
  1. Layout (или Reflow)
    На этом этапе браузер вычисляет точное положение и размер каждого видимого элемента на странице (его геометрию). Процесс начинается с корневого элемента и проходит рекурсивно по всему Render Tree. Результатом является **"коробочная модель"** для каждого элемента. Любое изменение, влияющее на геометрию элемента (размеры, положение), запускает повторный Layout (reflow), что является затратной операцией.
  1. Paint (или Rasterization)
    Здесь браузер преобразует вычисленные на этапе Layout данные в пиксели. Он "рисует" визуальную часть каждого элемента: текст, цвета, изображения, границы, тени и т.д. Обычно процесс рисования разбивается на слои (layers) и выполняется в несколько проходов.
  1. Compositing (композиция)
    На финальном этапе отдельно нарисованные слои (которые могли быть созданы в процессе Paint) собираются в правильном порядке и отображаются на экране. Современные браузеры активно используют аппаратное ускорение (GPU) для манипуляций с отдельными слоями (например, трансформаций с помощью `transform` и `opacity`), что позволяет избежать затратных этапов Layout и Paint.

Почему оптимизация CRP так важна?

Цель оптимизации — минимизировать время, которое браузер тратит на каждый из этих этапов, особенно до первой значимой отрисовки. Ключевые метрики, на которые влияет CRP:

  • First Paint (FP)
  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)

Практические стратегии оптимизации

  • Для HTML: Минификация, устранение блокирующего рендеринг JavaScript (с помощью async/defer), использование семантичной разметки для ускорения парсинга.
  • Для CSS: Критический CSS (Critical CSS) должен быть встроен в <head> для ускорения первого рендера. Остальные стили можно загружать асинхронно. Избегайте сложных селекторов, глубокой вложенности и минифицируйте стили.
  • Для JavaScript: Разделение кода (code splitting), отложенная загрузка (lazy loading), минификация. Старайтесь выполнять операции, вызывающие reflow (чтение геометрических свойств, таких как offsetWidth), до операций, изменяющих DOM, и группируйте их.
  • Использование will-change и transform/opacity: Переводите анимируемые элементы на отдельный композитный слой с помощью этих свойств, чтобы анимации выполнялись на этапе Compositing, минуя Layout и Paint.

Понимание критического пути рендеринга позволяет разработчику осознанно принимать решения о структуре кода, порядке загрузки ресурсов и манипуляциях с DOM, что напрямую ведет к созданию быстрых, плавных и отзывчивых пользовательских интерфейсов.