Как браузер рисует сайт: что такое layout, paint и reflow

Когда ты открываешь любую страницу в браузере, начинается цепочка процессов. Чтобы ты понимал, производительность вёрстки — это не только «как красиво», но и насколько быстро всё рендерится. Вот что происходит «под капотом»:

Этапы рендеринга сайта
1. HTML → DOM (Document Object Model)
Браузер читает HTML и строит древовидную структуру. Всё, что ты написал — <div>, <p>, <h1> — превращается в объекты, которые JS может изменять.
2. CSS → CSSOM (CSS Object Model)
Параллельно браузер анализирует CSS. Правила, селекторы, каскад, наследование — всё сводится в дерево стилей.
3. DOM + CSSOM = Render Tree
Из двух деревьев строится дерево отрисовки. Оно содержит только те элементы, которые реально отображаются (например, display: none сюда не попадают).

Layout (или reflow)
Браузер рассчитывает размеры, положение и геометрию всех элементов: где находится блок, какая у него ширина и высота, отступы, границы, вложенность и т.д.
Что может вызвать повторный layout (reflow):
- изменение размеров (width, height)
- изменение положения (top, left, margin, padding)
- изменение шрифта
- добавление/удаление элементов в DOM

❗️Это один из самых тяжёлых этапов — он может тормозить страницу.

Paint
Далее браузер «рисует» пиксели — цвет фона, бордеры, тени, изображения и т.д. Это проще, чем layout, но всё равно требует ресурсов.

Composite
Если на странице есть слои (например, position: fixed, transform, opacity) — они объединяются на этом этапе. Это последний шаг перед выводом на экран.

Как избежать лишних затрат
Не меняй width, top, margin, padding — это вызывает reflow.

Лучше используй transform: translate() и opacity — это затрагивает только composite, и работает быстрее.

Если используешь анимации — делай их через transform, а не left/right.

Как проверить
Открой DevTools → вкладка Performance
→ нажми «Record»
→ соверши действия на странице
→ посмотри, где происходит Layout, Paint, Composite.

#полезности