Что такое CSS Reflow

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

Примеры триггеров reflow:

• Изменение размеров/позиции элемента (width, height, margin, padding)
• Добавление/удаление DOM-элементов
• Изменение содержимого (текста, изображений)
• Активация псевдоклассов (:hover)
• Вычисление offsetWidth, offsetHeight (приводит к синхронному reflow)

Оптимизация:

// Плохо: вызывает reflow на каждой итерации
for (let i = 0; i < 100; i++) {
  element.style.width = i + 'px';
}

// Лучше: batch-изменения
element.style.width = '100px';

Используйте transform и opacity для анимаций (они не вызывают reflow), группируйте изменения DOM или применяйте display: none перед массовыми изменениями.