will-change и продвижение на слои

will-change сообщает браузеру, что элемент будет анимироваться, и позволяет заранее подготовить оптимизации — например, вынести элемент на собственный слой композитинга GPU до начала анимации.

Укажите свойство, которое будет изменяться: will-change: transform, will-change: opacity, will-change: transform, opacity. Используйте will-change: auto, чтобы удалить подсказки после завершения анимации.

Применяйте will-change только к элементам, которые действительно будут анимироваться, и только на время анимации. Добавлять и удалять его с помощью JavaScript (через класс) эффективнее, чем постоянно оставлять его у статичных элементов.

Каждый слой, вынесенный в отдельный слой композитинга, потребляет память GPU. Одновременный вынос множества элементов создаёт нагрузку на память и может снизить производительность — особенно на мобильных устройствах с ограниченным объёмом памяти GPU. Выносите элементы на отдельные слои умеренно и обдуманно.

Никогда не применяйте will-change к * или к большому числу элементов. Затраты на оптимизацию превышают пользу, когда создаётся слишком много слоёв. Сначала выполните профилирование; добавляйте will-change только после подтверждения конкретной проблемы с рывками.

До появления will-change разработчики использовали transform: translateZ(0) или translate3d(0,0,0), чтобы принудительно вынести элемент на слой GPU. will-change — правильный семантический подход. Приём с translateZ по-прежнему работает, но является деталью реализации, а не выражением намерения.

Слои, вынесенные в отдельный слой композитинга, создают новые контексты наложения. Это влияет на поведение z-index: дочерние элементы вынесенного элемента располагаются относительно него, а не корня документа. При выносе элементов учитывайте изменения контекста наложения.

Добавляйте will-change при наступлении mouseenter или в начале анимации, а удаляйте при наступлении mouseleave или после завершения анимации. Это даёт браузеру время на подготовку и не приводит к постоянному расходу памяти GPU на неактивные элементы.

Панель Layers в Chrome DevTools визуализирует слои, вынесенные в отдельный слой композитинга. Большое количество слоёв (сотни) указывает на чрезмерный вынос. В разделе Memory отображается использование памяти GPU. Сведите количество таких слоёв к минимуму и проверяйте его на профилях недорогих устройств.

CSS contain: layout paint ограничивает вычисления компоновки и отрисовки поддеревом, подобно изоляции. Это повышает производительность автономных виджетов без создания слоёв GPU и является менее затратной оптимизацией для неанимируемых элементов, чем will-change.

will-change полностью поддерживается всеми современными браузерами. Браузеры воспринимают его как подсказку, а не как команду и могут проигнорировать его при нехватке ресурсов. Не полагайтесь на него как на гарантию; используйте его только как рекомендацию по повышению производительности.

Каков основной риск одновременного применения will-change к большому числу элементов?

will-change заранее выносит элементы на слои композитинга GPU, устраняя затраты на вынос в момент начала анимации. Применяйте его динамически и умеренно — только там, где профилирование показывает рывки, — чтобы избежать чрезмерного расхода памяти GPU из-за избыточного выноса.