will-change

Свойство will-change CSS подсказывает браузерам, как ожидается изменение элемента. Браузеры могут настроить оптимизации перед фактическим изменением элемента. Эти виды оптимизаций могут повысить отзывчивость страницы, выполнив потенциально дорогостоящую работу до того, как она фактически потребуется.

Правильное использование этого свойства может быть немного сложным:

• Не применяйте will-change к слишком многим элементам. Браузер уже делает все возможное для оптимизации всего. Некоторые из более мощных оптимизаций, которые, вероятно, связаны с will-change, в конечном счёте используют много ресурсов машины, а при чрезмерном использовании могут привести к замедлению работы страницы или потреблению большого количества ресурсов.
• Используйте экономно. Нормальное поведение для оптимизаций, которые выполняет браузер, — это удаление оптимизаций, как только он может, и возврат к обычному состоянию. Но добавление will-change непосредственно в таблицу стилей подразумевает, что целевые элементы всегда находятся в ожидании изменения, и браузер будет сохранять оптимизации в течение гораздо более длительного времени, чем в противном случае. Поэтому рекомендуется включать will-change и выключать с помощью кода скрипта до и после изменения.
• Не применяйте will-change к элементам для выполнения преждевременной оптимизации. Если ваша страница работает хорошо, не добавляйте свойство will-change к элементам только для того, чтобы извлечь немного больше скорости. will-change предназначено для использования в качестве крайней меры, чтобы попытаться справиться с существующими проблемами производительности. Его не следует использовать для прогнозирования проблем с производительностью. Чрезмерное использование will-change приведёт к чрезмерному использованию памяти и вызову более сложного рендеринга, поскольку браузер пытается подготовиться к возможному изменению. Это приведёт к ухудшению производительности.
• Позвольте ему достаточно времени, чтобы поработать. Это свойство предназначено как способ для авторов сообщить пользовательскому агенту о свойствах, которые, вероятно, изменятся заранее. Затем браузер может применить необходимые оптимизации, предваряющие изменение, до того, как оно фактически произойдёт. Поэтому важно дать браузеру время, чтобы фактически выполнить оптимизации. Найдите способ предсказать, что что-то изменится хотя бы немного заранее, и установите will-change тогда.
• Следует помнить, что will-change может фактически влиять на визуальный вид элементов, когда используется с значениями свойств, создающими контекст стекирования (например, will-change: opacity), так как контекст стекирования создаётся заранее.

/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */

/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;

.slide {
  will-change: transform;
}

will-change = 
  auto                    |
  <animateable-feature>#  

<animateable-feature> = 
  scroll-position  |
  contents         |
  <custom-ident>   

const el = document.getElementById("element");

// Set will-change when the element is hovered
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}