Для чего нужно свойство Will-Change?

Свойство `will-change` нужно, чтобы заранее сообщить браузеру, какие свойства элемента будут меняться (анимироваться) — браузер оптимизирует их рендеринг, вынося элемент на отдельный слой.

Что делает

will-change даёт браузеру подсказку заранее подготовиться к изменениям, создав отдельный композитный слой (часто на GPU):

.animated {
  will-change: transform; /* браузер готовится к анимации transform */
}

Это уменьшает «рывки» в начале анимации — слой готов заранее.

Значения

will-change: transform;
will-change: opacity;
will-change: transform, opacity;
will-change: scroll-position;

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

Для элементов, которые скоро будут анимироваться (transform, opacity), особенно сложные анимации.

Предостережения

• Не злоупотреблять — каждый слой потребляет память (GPU). Много will-change = деградация, а не ускорение.
• Не ставить на всё подряд и постоянно — применять точечно, желательно динамически перед анимацией и убирать после:

element.style.willChange = 'transform';
// анимация
element.style.willChange = 'auto'; // убрать после

• Не нужно, если анимация и так плавная — только для проблемных случаев.

Альтернатива

Часто анимация transform/opacity уже идёт на composite без will-change — его добавляют, когда есть заметные рывки.

Коротко для собеседования

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