Какие знаешь этапы рендеринга страницы в браузере?

Этапы рендеринга страницы в браузере

Рендеринг страницы — это процесс, при котором браузер преобразует HTML, CSS и JavaScript в визуальное отображение на экране. Это сложный многоэтапный процесс, от загрузки ресурсов до отрисовки финального изображения.

1. Parsing (Разбор кода)

HTML Parsing

Браузер читает HTML-файл и строит DOM дерево:

HTML → Tokenizer → Parser → DOM Tree

HTMl парсер работает сверху вниз, и если встретит <script>, то остановится, пока скрипт не загрузится и не выполнится.

CSS Parsing

Одновременно браузер читает CSS и строит CSSOM дерево (CSS Object Model):

style.css {
  h1: color blue;
}

CSS может идти в разных местах:

• <link rel=stylesheet> в head
• <style> тег
• Inline стили

2. Render Tree (Дерево отрисовки)

Браузер объединяет DOM + CSSOM в Render Tree:

DOM Tree + CSSOM Tree → Render Tree

Рендер дерево содержит только видимые элементы:

• Исключаются элементы с display none
• Исключаются head, script, meta
• Включаются псевдоэлементы

3. Layout (Макет / Reflow)

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

Render Tree → Layout → Box Model

Для каждого элемента вычисляется:

• width и height
• margin, padding, border
• position (absolute, relative, fixed)
• Координаты (x, y) на странице

4. Paint (Растеризация / Repaint)

Браузер отрисовывает пиксели на экран на основе вычисленного макета:

Layout → Paint → Pixels

Этап Paint включает:

• Заполнение фона
• Отрисовка текста
• Отрисовка границ и теней
• Рисование изображений

Что вызывает paint:

• Изменение color
• Изменение background
• Изменение opacity
• Изменение box-shadow
• Изменение border-radius

5. Composite (Композитинг)

Браузер объединяет слои (layers) в финальное изображение:

Paint layers → Composite → Display

Некоторые свойства создают новый слой (composite layer):

• transform
• opacity
• will-change
• filter
• animation на transform

Это быстро, потому что не требует repaint.

Полный цикл: критический путь рендеринга

1. HTML парсинг → DOM
2. CSS парсинг → CSSOM
3. DOM + CSSOM → Render Tree
4. Render Tree → Layout (reflow)
5. Layout → Paint (repaint)
6. Paint layers → Composite (отрисовка)

Оптимизация производительности

Избежать Reflow

// Плохо: несколько reflow'ов
const el = document.getElementById('box');
el.style.width = '100px';
el.style.height = '100px';

// Хорошо: один reflow
el.style.cssText = 'width: 100px; height: 100px;';

Использовать Transform вместо изменения position

// Плохо: вызывает reflow + repaint
el.style.left = '100px';

// Хорошо: только composite
el.style.transform = 'translateX(100px)';

Важные понятия

• Reflow (Layout) — перерасчёт размеров и позиций. ДОРОГО!
• Repaint (Paint) — перерисовка пикселей. Дешевле reflow
• Composite — объединение слоёв. Самое дешёвое

Critical Rendering Path (CRP)

Для быстрой первой отрисовки:

1. Минимизируй CSS в head
2. Отложи загрузку JavaScript
3. Используй async для скриптов без зависимостей
4. Оптимизируй изображения
5. Используй CDN для ресурсов

Инструменты анализа

• Chrome DevTools → Performance tab
• Lighthouse → аудит производительности
• WebPageTest → детальный анализ
• Network tab → водопад загрузки ресурсов