Что такое reflow и repaint?

Что такое reflow и repaint?

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

Как они связаны?

Reflow всегда вызывает repaint, так как после пересчета геометрии нужно обновить внешний вид. Repaint может происходить без reflow, если меняются только визуальные свойства (color, visibility, background-color).

Примеры кода

// Вызывает reflow и repaint
document.getElementById('box').style.width = '200px';

// Вызывает только repaint
document.getElementById('box').style.backgroundColor = 'red';

// Чтение offsetHeight вызывает reflow (принудительный layout)
const height = document.getElementById('box').offsetHeight;

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

• Изменяйте классы вместо отдельных стилей.
• Работайте с элементами вне потока (position: absolute/fixed).
• Используйте documentFragment для массовых изменений DOM.
• Избегайте частого чтения свойств, вызывающих reflow (offsetHeight, clientWidth).

Вывод: понимание reflow и repaint помогает писать быстрые веб-приложения, особенно при анимациях и динамическом контенте. Минимизация reflow — ключ к плавному интерфейсу.