Какие свойства CSS влияют на последний этап отрисовки компонента

На последнем этапе отрисовки (painting) влияют свойства, изменя которые браузер перерисовывает элемент без изменения layout или composite:

1. Цветовые свойства: color, background-color, border-color
2. Декоративные: box-shadow, text-shadow, outline, opacity
3. Фоновые: background-image, background-size, background-position
4. Маски и фильтры: filter, mask, clip-path

Пример:

.button {
  background-color: blue; /* Триггерит repaint */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Триггерит repaint */
  opacity: 0.8; /* Триггерит repaint (но иногда может попадать в composite) */
}

Эти изменения дешевле, чем reflow (изменение layout), но всё равно влияют на производительность при частых анимациях. Для оптимизации анимаций лучше использовать transform и opacity, которые могут обрабатываться на этапе compositing.