Reflow (layout) — это стадия рендеринга в браузере, на которой пересчитывается геометрия элементов страницы: размеры, позиции и взаимное расположение.
Основные стадии рендеринга в браузере
1️⃣ Парсинг HTML → DOM
Браузер читает HTML и строит DOM-дерево.
2️⃣ Парсинг CSS → CSSOM
Стили собираются в CSSOM.
3️⃣ Построение Render Tree
DOM + CSSOM объединяются в дерево рендеринга (без display: none).
4️⃣ Reflow (Layout)
Вычисляются:
- ширина / высота элементов
- отступы, границы
- положение относительно других элементов
Именно здесь браузер понимает, где и какого размера будет каждый блок.
5️⃣ Repaint (Paint)
Отрисовываются цвета, тени, текст, изображения.
6️⃣ Composite (компоновка слоёв)
Слои объединяются и выводятся на экран (часто с использованием GPU).
Когда происходит Reflow
Reflow вызывается при изменениях, влияющих на layout:
- изменение размеров (width, height)
- изменение отступов (margin, padding)
- изменение шрифтов
- добавление/удаление DOM-элементов
- изменение display
- изменение содержимого текста
- чтение layout-свойств (offsetWidth, getBoundingClientRect() и др.)
Почему Reflow дорогой
Reflow может:
- затронуть один элемент
- пересчитать целый блок или даже всю страницу
Частые reflow → просадки производительности.
Как уменьшить количество Reflow
✅ Менять стили через классы, а не по одному свойству
✅ Группировать DOM-изменения
✅ Использовать documentFragment
✅ Избегать «layout thrashing» (чередование чтения и записи layout)
✅ Для анимаций использовать transform и opacity (они вызывают repaint/composite, но не reflow)
Anastasiia Berest
Senior Web UI Engineer