Что делает CSS-свойство will-change?

Когда браузер отрисовывает страницу, он проходит несколько этапов: расчёт стилей, layout, paint и compositing. Если элемент анимируется через свойства вроде transform или opacity, браузер может вынести его на отдельный слой и обновлять только этот слой, не пересчитывая всю страницу. Свойство will-change заранее сообщает браузеру, что такое изменение произойдёт, и он готовит слой заранее.

Как это работает

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

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  will-change: transform;
  transform: translateY(-10px);
}

Правила использования

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

Каждый слой композитинга занимает память GPU. Если объявить will-change для сотни элементов, браузер создаст сотни слоёв, что приведёт к падению производительности и росту потребления памяти.

Когда применять

Свойство полезно для элементов с частыми и сложными анимациями, например для модальных окон, слайдеров или карточек при наведении. В остальных случаях достаточно обычных CSS-транзишенов.

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