Что такое CSS Repaint

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

Пример:

.button {
  background: blue; /* Триггерит repaint при изменении */
}

.button:hover {
  background: red; /* Вызовет repaint при наведении */
}

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

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