\n \n\n\n// Браузер строит DOM дерево\nDocument\n├── html\n│ ├── head\n│ │ └── link (stylesheet)\n│ └── body\n│ ├── h1 (\"Hello\")\n│ └── script\n```\n\nОсобенность: если встречается `
PrepBro
← Назад к вопросам

Из каких этапов состоит CRP

2.0 Middle🔥 201 комментариев
#Браузер и сетевые технологии#Оптимизация и производительность

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

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

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

CRP — Critical Rendering Path

CRP (Critical Rendering Path) — это последовательность этапов, которые браузер проходит, чтобы преобразовать HTML, CSS и JavaScript в пиксели на экране. Понимание CRP критично для оптимизации производительности фронтенда.

Пять основных этапов CRP

1. Parsing (Парсинг)

Браузер читает HTML и создаёт DOM (Document Object Model):

// HTML
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <script src="script.js"></script>
  </body>
</html>

// Браузер строит DOM дерево
Document
├── html
│   ├── head
│   │   └── link (stylesheet)
│   └── body
│       ├── h1 ("Hello")
│       └── script

Особенность: если встречается <script> — парсинг останавливается, пока скрипт не загрузится и не выполнится.

2. Style Calculation (Вычисление стилей)

Браузер обрабатывает CSS и вычисляет стили для каждого элемента:

/* style.css */
body {
  background: white;
  font-family: Arial;
}

h1 {
  color: blue;
  font-size: 24px;
}

Браузер создаёт CSSOM (CSS Object Model) и применяет каскадные правила.

3. Layout (Макет)

Браузер вычисляет размер и позицию каждого элемента, создавая Layout дерево:

// Вычисляется для каждого элемента:
h1 {
  width: 800px,
  height: 30px,
  top: 10px,
  left: 0px
}

Это дорогая операция! Когда вы меняете размеры, позиции — запускается новый Layout.

4. Paint (Рисование)

Браузер рисует пиксели для каждого элемента (цвет, фон, тени, границы):

// Paint операции
- Рисуем фон элемента
- Рисуем текст
- Рисуем границы
- Рисуем тени

Дорогая операция. Если менять цвета, фоны — запускается Paint.

5. Composite (Композзиция)

Браузер складывает слои в правильном порядке и отправляет на GPU для финального отображения:

// Слои (Layers)
Layer 1: background
Layer 2: content
Layer 3: hover effects
// Объединяются в финальное изображение

Самая быстрая операция. Изменение только transform или opacity требует только Composite.

Визуальное представление CRP

HTML → Parsing → CSSOM → DOM + CSSOM → Layout Tree
                  ↓           ↓
                CSS           ↓
                              ↓
                        Paint Records
                              ↓
                           Layers
                              ↓
                         Composite
                              ↓
                           Screen

Пример: как разные действия влияют на CRP

// 1. Изменение содержимого → Layout + Paint + Composite
element.textContent = "New Text";
// Нужно пересчитать размер, перерисовать

// 2. Изменение цвета → Paint + Composite
element.style.color = "red";
// Нужно перерисовать, но размеры не поменялись

// 3. Анимация transform → только Composite (самое быстрое!)
element.style.transform = "translateX(100px)";
// GPU справляется сам, браузер не вычисляет заново

// 4. Анимация width → Layout + Paint + Composite (медленно!)
element.style.width = "200px";
// Нужно пересчитать весь макет

Оптимизация на основе CRP

// ПЛОХО: батчинг операций неправильно
for (let i = 0; i < 1000; i++) {
  element.style.left = element.offsetLeft + 10 + "px"; // Layout thrashing!
}

// ХОРОШО: батчинг правильный
let left = element.offsetLeft; // Читаем один раз
for (let i = 0; i < 1000; i++) {
  left += 10;
}
element.style.left = left + "px"; // Пишем один раз

// ХОРОШО: использовать transform вместо left
element.style.transform = `translateX(${newLeft}px)`; // Только Composite!

Ключевые выводы

  • Layout (размер/позиция) дороже всего — избегай изменений
  • Paint (цвет, фон) — средние затраты
  • Composite (transform, opacity) — быстро всегда
  • Батчинг — группируй читай и писай отдельно
  • GPU-акселерация — используй will-change и transform

Понимание CRP — это различие между приложением на 60 FPS и приложением на 20 FPS.

Из каких этапов состоит CRP | PrepBro