Ответ
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 для анимаций.
Ответ 18+ 🔞
Охренеть, ну ты представляешь, этот ваш reflow — он же, блядь, как нервы у программиста, может дёргаться несколько раз за один цикл Event Loop! Особенно если твой JavaScript, как слон в посудной лавке, начинает менять стили или ломать DOM. Браузер, конечно, не дурак, пытается оптимизировать, собрать всё в кучу, но если ты его неправильно трогаешь — пиши пропало.
Смотри, вот тебе живой пример, как не надо делать, если не хочешь, чтобы всё зависло:
// Вызовет 1 reflow — нормально, браузер умный, объединит
element.style.width = '100px';
element.style.height = '200px';
// А вот тут начинается пиздец, товарищ!
const width = element.offsetWidth; // Ёбта! Только что спросил ширину — триггернул reflow!
element.style.width = width + 10 + 'px';
const height = element.offsetHeight; // Опять, сука, спрашиваешь! Ещё один reflow!
element.style.height = height + 10 + 'px';Видишь? Каждый раз, когда ты читаешь layout-свойство после изменения, браузер вынужден останавливаться и пересчитывать всё, как будто ты ему мозги ебёшь! А это, на минуточку, овердохуища ресурсов.
Так что запомни, хитрая жопа: сначала всё пиши, а потом уже читай. А для анимаций вообще используй requestAnimationFrame, чтобы не выносить всем мозг. И будет тебе счастье, а не тормоза.