Что такое repaint

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

Пример:

// Вызовет repaint (изменение цвета)
element.style.color = 'red';

// Вызовет reflow + repaint (изменение ширины)
element.style.width = '200px';

Оптимизация:

• Группируйте изменения стилей (используйте requestAnimationFrame).
• Избегайте частых изменений стилей в циклах.
• Используйте transform и opacity для анимаций — они обрабатываются в отдельном слое и часто не вызывают repaint основного документа.