Какие способы оптимизации Reflow/Repaint ты знаешь?

Что такое Reflow и Repaint?

Reflow (или layout) — это процесс вычисления размеров и позиций элементов на странице. Он запускается при любом изменении, которое влияет на геометрию: изменение ширины, высоты, добавление/удаление элементов, изменение шрифта и т.д. Repaint — это процесс отрисовки пикселей, который происходит после Reflow или при изменении визуальных свойств, не влияющих на геометрию (например, цвет фона, тень).

Основные способы оптимизации

• Минимизация Reflow: Избегайте частых изменений, вызывающих перекомпоновку. Например, вместо изменения стилей по одному, используйте классы или cssText.
• Пакетное чтение и запись: Чтение свойств, вызывающих Reflow (например, offsetHeight), после записи может привести к принудительному Reflow. Группируйте чтения и записи отдельно.
• Использование transform и opacity: Эти свойства обрабатываются на уровне композитинга и не вызывают Reflow или Repaint, что идеально для анимаций.
• Применение will-change: Подсказывает браузеру, что элемент будет изменяться, позволяя заранее создать отдельный слой.
• Избегание сложных селекторов: Хотя это влияет на Repaint меньше, сложные селекторы могут замедлить пересчет стилей.

Пример кода

// Плохо: вызывает Reflow на каждой итерации
for (let i = 0; i < 100; i++) {
  const el = document.getElementById('item');
  el.style.width = i + 'px';
  console.log(el.offsetWidth); // принудительный Reflow
}

// Хорошо: пакетное чтение и запись
const el = document.getElementById('item');
const widths = [];
for (let i = 0; i < 100; i++) {
  widths.push(i);
}
for (let w of widths) {
  el.style.width = w + 'px';
}
// Чтение после всех записей
console.log(el.offsetWidth);

Вывод

Оптимизация Reflow и Repaint критична для производительности веб-приложений, особенно при анимациях и динамическом контенте. Используйте современные CSS-свойства, группируйте операции и избегайте принудительных перекомпоновок для плавного интерфейса.