Сколько раз в один цикл Event Loop может произойти reflow

Reflow (или layout) может происходить несколько раз в рамках одного цикла Event Loop, если JavaScript изменяет стили или структуру DOM, что заставляет браузер пересчитывать layout. Однако браузеры стараются оптимизировать этот процесс, объединяя изменения в один reflow.

Пример:

// Вызовет 1 reflow
element.style.width = '100px';
element.style.height = '200px';

// Но если читать layout-свойства между изменениями, может вызвать несколько reflows
const width = element.offsetWidth; // Триггерит reflow
element.style.width = width + 10 + 'px';
const height = element.offsetHeight; // Триггерит reflow
element.style.height = height + 10 + 'px';

Оптимальная практика — минимизировать чтение layout-свойств после изменений и использовать requestAnimationFrame для анимаций.