Что такое reflow?

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

Когда происходит reflow

• Изменение размеров/позиций (width, height, margin, padding, top).
• Добавление/удаление элементов DOM.
• Изменение содержимого, влияющего на размеры (текст, шрифты).
• Изменение размера окна.
• Чтение «геометрических» свойств (offsetHeight, getBoundingClientRect) — вынуждает синхронный reflow.

Почему дорого

Reflow может каскадно затронуть родителей и потомков, пересчитав layout всего поддерева, за ним следует repaint.

Layout thrashing

Чередование записи и чтения геометрии в цикле вызывает многократный принудительный reflow:

// Плохо — reflow на каждой итерации
for (const el of els) {
  el.style.width = el.offsetWidth + 10 + 'px';
}

Как минимизировать

• Группировать чтения и записи DOM отдельно.
• Менять классы, а не отдельные стили.
• Использовать transform/opacity для анимаций (не вызывают reflow).
• Работать с DocumentFragment при массовой вставке.

Reflow против repaint

Reflow — пересчёт геометрии (дороже); repaint — перерисовка пикселей без изменения расположения.

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

Reflow — пересчёт геометрии элементов (размеры/позиции), дорогая операция, каскадно затрагивающая дерево. Вызывается изменением размеров, DOM и чтением offset*. Минимизируют группировкой DOM-операций и анимацией через transform/opacity.