Как происходит отрисовка сайта в браузере?

Отрисовка сайта (critical rendering path) — это последовательность шагов, которые браузер проходит от получения HTML до появления пикселей на экране.

Этапы рендеринга

1. Парсинг HTML → DOM — построение дерева объектов документа.
2. Парсинг CSS → CSSOM — дерево стилей.
3. Render Tree — объединение DOM и CSSOM только из видимых узлов (без display: none).
4. Layout (reflow) — вычисление геометрии: размеры и позиции элементов.
5. Paint — заливка пикселей: цвета, текст, границы, тени.
6. Composite — сборка слоёв в итоговое изображение (часто на GPU).

HTML → DOM ┐
CSS → CSSOM ┴→ Render Tree → Layout → Paint → Composite

Что влияет на скорость

• JS без `async`/`defer` блокирует парсинг HTML.
• CSS блокирует рендеринг (render-blocking).
• Reflow дорог: изменение геометрии пересчитывает layout.
• Repaint — при изменении цвета/фона без геометрии.

Оптимизация

• Минимизировать reflow (группировать изменения DOM).
• Анимировать transform/opacity (только composite, без layout/paint).
• Откладывать некритичный JS/CSS.

Коротко для собеседования

Отрисовка: DOM + CSSOM → Render Tree → Layout (геометрия) → Paint (пиксели) → Composite (слои). Reflow пересчитывает layout и дорог; transform/opacity анимируют дёшево на этапе composite.