Что такое forced reflow (принудительная перерисовка)? Как можно оптимизировать рендер, чтобы уменьшить количество принудительных перерисовок?

Что такое forced reflow?

Браузер строит веб-страницу в несколько этапов: парсинг HTML, построение DOM и CSSOM, создание дерева рендеринга, вычисление макета (layout/reflow) и отрисовка (paint). Обычно эти этапы выполняются асинхронно, и браузер может накапливать изменения стилей, чтобы выполнить их одним пакетом. Однако если JavaScript читает свойство, которое зависит от текущего макета (например, offsetWidth, clientHeight, getBoundingClientRect), браузер вынужден немедленно выполнить reflow, чтобы вернуть актуальное значение. Это называется forced reflow или layout thrashing.

Почему это проблема?

Каждый forced reflow заставляет браузер пересчитывать макет всей страницы (или её части), что может быть очень затратно, особенно на сложных страницах. Если в цикле многократно чередовать чтение и запись стилей, браузер будет выполнять reflow на каждой итерации, что приводит к заметным тормозам и снижению FPS.

Как оптимизировать?

Основная стратегия — избегать чередования чтения и записи. Сначала прочитайте все нужные значения, затем выполните все изменения. Также можно использовать requestAnimationFrame для группировки изменений перед следующей отрисовкой. Минимизируйте количество обращений к DOM и используйте классы для изменения стилей вместо инлайновых правок.

// Плохо: чередование чтения и записи
for (let i = 0; i < items.length; i++) {
  const width = items[i].offsetWidth; // forced reflow
  items[i].style.width = width + 10 + 'px'; // запись
}

// Хорошо: сначала читаем, потом пишем
const widths = [];
for (let i = 0; i < items.length; i++) {
  widths.push(items[i].offsetWidth); // один reflow
}
for (let i = 0; i < items.length; i++) {
  items[i].style.width = widths[i] + 10 + 'px'; // запись без reflow
}

Также полезно использовать CSS-свойство will-change для элементов, которые часто анимируются, чтобы браузер заранее создал отдельный слой, и избегать чтения свойств, вызывающих reflow, внутри обработчиков событий, которые срабатывают часто (например, scroll).

Вывод

Forced reflow — частая причина проблем с производительностью в веб-приложениях. Применяйте паттерн «чтение-запись» и группируйте изменения, чтобы минимизировать количество перерисовок. Это особенно важно для анимаций, игр и интерфейсов с большим количеством динамических элементов.