Сколько будет reflow в один кадр

Reflow (или layout) происходит, когда браузер пересчитывает положение и размеры элементов на странице. В идеале в одном кадре (frame) должен быть только один reflow, но иногда их может быть несколько из-за синхронных чтений layout-свойств (например, offsetWidth, getBoundingClientRect()).

Пример с несколькими reflow:

// Плохо: вызывает reflow дважды
element.style.width = '100px';
const width = element.offsetWidth; // Чтение → reflow
element.style.height = `${width}px`; // Запись → reflow

Оптимизированный вариант (1 reflow):

// Хорошо: batch изменений
element.style.width = '100px';
element.style.height = '100px'; // Один reflow

Совет: минимизируйте чтение layout-свойств после изменений, используйте requestAnimationFrame для анимаций.