Какие плюсы и минусы reflow?

Reflow (пересчёт геометрии) — необходимая часть рендеринга, но дорогая. «Плюс»: обеспечивает корректную раскладку. «Минус»: тормозит при частом вызове, особенно каскадный.

Что такое reflow

Пересчёт браузером геометрии элементов (размеров, позиций) при изменении, влияющем на layout.

«Плюс» (зачем нужен)

• Корректная раскладка — reflow пересчитывает layout, чтобы элементы отображались правильно после изменений (размеры, добавление элементов, изменение контента).
• Неизбежная часть рендеринга при изменении структуры/размеров.

«Минусы» (проблемы)

• Дорогой — пересчёт может каскадно затронуть родителей и потомков (всё поддерево).
• Тормозит — частые reflow вызывают jank (дёрганый UI), особенно в анимациях.
• Layout thrashing — чередование чтения (offsetHeight) и записи геометрии в цикле → многократный принудительный синхронный reflow:

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

• Блокирует основной поток.

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

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

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

Reflow — необходимый пересчёт геометрии для корректной раскладки, но дорогой: каскадно затрагивает дерево, тормозит при частом вызове (jank), особенно layout thrashing (чередование чтения offsetHeight и записи). Минимизируют: анимация через transform/opacity, группировка DOM-операций, изменение классов, DocumentFragment.