Как можно оптимизировать Reflow (Layout) и Repaint, чтобы избежать их поочерёдного вызова (Layout-Paint-Layout-Paint)?

Что такое Reflow и Repaint

Когда браузер загружает страницу, он строит DOM-дерево, затем CSSOM, и объединяет их в render-дерево. После этого происходит layout (расчёт геометрии) и paint (отрисовка). Reflow — это процесс пересчёта позиций и размеров элементов, а Repaint — перерисовка видимых пикселей. Reflow всегда вызывает Repaint, но Repaint может происходить без Reflow (например, при изменении цвета).

Почему происходит поочерёдный вызов

Когда вы изменяете стили, браузер помечает изменения и выполняет их асинхронно. Однако если вы читаете свойства, которые зависят от текущего layout (например, offsetWidth), браузер вынужден немедленно выполнить Reflow, чтобы вернуть актуальное значение. Если затем вы снова изменяете стили, это вызывает новый Reflow, и так далее — возникает цикл Layout-Paint-Layout-Paint.

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

• Группируйте чтение и запись: сначала прочитайте все нужные значения, затем выполните все изменения. Это позволяет браузеру объединить операции.
• Используйте классы вместо инлайн-стилей: изменение класса вызывает один Reflow, а не несколько.
• Избегайте изменения layout-свойств в циклах: выносите вычисления за цикл.
• Применяйте transform и opacity для анимаций: они не вызывают Reflow, только Repaint, и могут быть обработаны на GPU.
• Используйте documentFragment для массовых вставок: это уменьшает количество операций с DOM.

Пример кода

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

// Хорошо: сначала читаем, потом пишем
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
}

Вывод

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