Что такое CSS Reflow?

Что такое CSS Reflow?

Reflow (перепоток, перерисовка макета) — это процесс, при котором браузер пересчитывает размеры и позиции всех элементов на странице. Это дорогостоящая операция, которая значительно влияет на производительность приложения.

Отличие между Reflow и Repaint

Repaint — пересчёт только визуальных стилей (цвет, фон, тени) без изменения геометрии.

Reflow — пересчёт layout'а: размеры, позиции, обтекание текста. Он всегда вызывает Repaint.

Что вызывает Reflow?

1. Изменение размеров элемента (width, height, padding, border)
2. Изменение позиции (left, top, margin)
3. Добавление/удаление элементов
4. Чтение layout свойств (offsetWidth, clientHeight, getBoundingClientRect)
5. Изменение содержимого или CSS классов
6. Изменение шрифта

Как минимизировать Reflows

Батчинг изменений:

// ❌ Три Reflows
element.style.width = "100px";
element.style.height = "50px";
element.style.padding = "10px";

// ✅ Один Reflow
element.style.cssText = "width: 100px; height: 50px; padding: 10px;";

Использование transform вместо position:

// ❌ Reflow
element.style.left = "50px";

// ✅ Только Repaint
element.style.transform = "translateX(50px)";

Чтение и запись отдельно:

// ❌ Много Reflows
for (let i = 0; i < 100; i++) {
  elements[i].style.width = elements[i].offsetWidth + 10 + "px";
}

// ✅ Минимум Reflows
const widths = elements.map(el => el.offsetWidth);
for (let i = 0; i < 100; i++) {
  elements[i].style.width = widths[i] + 10 + "px";
}

DocumentFragment для добавления элементов:

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  fragment.appendChild(li);
}
ul.appendChild(fragment); // Один Reflow вместо 1000

requestAnimationFrame:

requestAnimationFrame(() => {
  element.style.width = "100px";
});

Инструменты для анализа

В Chrome DevTools Performance вкладке можно увидеть фиолетовые полосы (Layout/Reflow).

Ключевые моменты

• Reflow пересчитывает layout всех элементов (дорогостоящая операция)
• Батчинг изменений минимизирует количество Reflows
• Transform и opacity не вызывают Reflow
• Чтение layout свойств принудительно вызывает Reflow