Что такое reflow и какие этапы рендеринга браузера ты знаешь (layout, paint, composite)?

Reflow (или layout) — это процесс, когда браузер вычисляет геометрию элементов на странице: их размеры и позиции. Это происходит, когда DOM или CSS изменяются таким образом, что влияет на расположение элементов.

Основные этапы рендеринга браузера:

1. Style Recalculation — вычисление стилей для элементов.
2. Layout (Reflow) — вычисление размеров и позиций элементов.
3. Paint — отрисовка пикселей (цвета, текста, теней и т.п.) на слоях.
4. Composite — объединение слоев в итоговое изображение, которое выводится на экран.

Reflow — самый затратный по производительности этап, особенно если он происходит часто или затрагивает много элементов. Paint и Composite обычно быстрее, но тоже могут влиять на производительность.

Пример: изменение ширины блока вызовет reflow, а изменение цвета — только repaint.