Ответ
Оптимизация до одного Paint достигается за счёт использования will-change
и transform
/opacity
, которые не вызывают Layout/Compose. Пример:
.optimized {
will-change: transform; /* Подсказка браузеру */
transform: translateZ(0); /* Аппаратное ускорение */
opacity: 0.99; /* Фикс для некоторых браузеров */
}
Как это работает:
transform
иopacity
анимируются в отдельном слое (Composite)- Браузер пропускает этапы Layout и Compose
- Изменения применяются напрямую в Paint
Когда использовать:
- Анимации
- Прокрутка сложных элементов
- Частые визуальные изменения
⚠️ Не злоупотребляйте — каждый слой потребляет память.