Что тяжелее Reflow или Repaint?

Разница между Reflow и Repaint и их влияние на производительность

Reflow (или Layout) и Repaint (или Paint) — это два ключевых этапа процесса рендеринга в браузере при обновлении веб-страницы. Оба влияют на производительность, но Reflow значительно «тяжелее» и более затратен по ресурсам, чем Repaint.

Что такое Repaint?

Repaint — это процесс перерисовки (обновления визуального отображения) элементов на экране без изменения их геометрии (размера, положения). Он происходит, когда меняются стили, не затрагивающие layout: цвет, фон, видимость (visibility), outline и т.д.

<!-- Изменение только цвета вызывает Repaint -->
<div id="box">Элемент</div>

// Это вызывает только Repaint
document.getElementById('box').style.color = 'red';

Процесс Repaint:

• Браузер проверяет, какие пиксели на экране нуждаются в обновлении.
• Перерисовывает только эти области (часто с использованием аппаратного加速ения).
• Не требует пересчёта позиций и размеров других элементов.

Что такое Reflow?

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

// Эти изменения вызывают Reflow (и затем Repaint)
document.getElementById('box').style.width = '200px';
document.getElementById('box').style.padding = '20px';
document.body.appendChild(newElement); // Добавление нового узла

Процесс Reflow гораздо сложнее:

1. Пересчёт стилей — вычисление конечных CSS правил для каждого элемента.
2. Layout/Reflow — определение точного положения и размеров каждого элемента.
3. Создание слоёв (Layer) — группировка элементов для оптимизации.
4. Paint — заполнение слоев пикселями (цвет, текст, изображения).
5. Composite — композиция слоев в итоговое изображение.

Почему Reflow «тяжелее»?

• Объём вычислений: Reflow требует пересчёта всей или части layout-цепочки, часто затрагивая множество элементов. Например, изменение ширины контейнера может повлиять на позиции всех его потомков и соседних элементов.
• Каскадный эффект: В сложных DOM-структурах один локальный Reflow может запустить цепочку Reflows в родителях или потомках.
• Более дорогой полный цикл: Reflow всегда включает последующий Repaint (нужно перерисовать элементы после изменения их позиций). Таким образом, Reflow = Layout + Paint, а Repaint = только Paint.
• Частое возникновение: Многие распространённые операции вызывают Reflow: получение вычисленных стилей (offsetHeight, getComputedStyle), изменение классов, манипуляции с DOM, даже чтение некоторых свойств после их изменения.

Практический пример и сравнение затрат

// Плохая практика: множественные Reflows
const box = document.getElementById('box');
box.style.width = '100px';   // Reflow 1
box.style.height = '200px';  // Reflow 2
box.style.padding = '10px';  // Reflow 3

// Оптимизация: минимизация Reflows
// Все изменения в одном цикле (или используйте cssText, класс)
box.style.cssText = 'width: 100px; height: 200px; padding: 10px;'; // 1 Reflow

Затраты ресурсов (примерное соотношение):

• Repaint: Затраты на перерисовку области, обычно ограниченной и оптимизированной.
• Reflow: Затраты на полный перерасчет layout + перерисовка всей зависимой области. Может быть на порядки дороже, особенно при глубоких DOM-структурах.

Как минимизировать влияние на производительность?

1. Избегайте синхронных чтений свойств layout после их изменения:

// Плохо: вызывает два Reflows (изменение → чтение → изменение)
element.style.width = '100px';
const height = element.offsetHeight; // чтение → Reflow!
element.style.height = height + '10px';

// Хорошо: разделите чтение и изменение
const height = element.offsetHeight; // чтение → 1 Reflow
element.style.width = '100px';
element.style.height = height + '10px'; // изменение → 1 Reflow

1. Группируйте изменения DOM: используйте cssText, изменяйте классы, или скрывайте элементы (display: none) для массовых изменений, затем показывайте.

2. Используйте оптимизированные CSS свойства: transform и opacity часто изменяются только на этапе Composite, минуя Reflow и Repaint.

/* Хорошо: только Composite */
.element {
  transform: translateX(100px);
  opacity: 0.5;
}

1. Ограничивайте область Reflow: используйте position: absolute/fixed для элементов, изменения которых не влияют на окружающий layout.

2. Дебаг через DevTools: в Chrome Performance Tab можно точно увидеть, какие операции вызывают Layout (Reflow) и Paint.

Вывод

Reflow значительно тяжелее Repaint, поскольку включает полный перерасчет геометрии страницы и затрагивает больше этапов рендеринга. Для создания высокопроизводительных интерфейсов ключевая задача — минимизировать количество и область Reflows, особенно в анимациях и при частых обновлениях DOM. Оптимизация здесь даёт намного больший эффект, чем борьба с Repaints.