Когда вызывается Reflow

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

Основные триггеры:

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

Пример:

// Вызывает reflow
const el = document.getElementById('box');
el.style.width = '200px'; 

// Ещё один reflow
const width = el.offsetWidth; 

Для оптимизации можно:

1. Группировать изменения DOM
2. Использовать requestAnimationFrame
3. Избегать частых чтений layout-свойств