Libiros
@Libiros
WebDev ninja!

Как правильно использовать will-change с точки зрения оптимизации?

Про сам will-change все понятно. Читаем документацию. Делаем выводы и следуем рекомендациям, например.
Там советуют дописать в js следующий код
var 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';
}

Это нужно, чтобы will-change не висел просто так перманентно, а присваивался только в момент события mouseenter.

В связи с этим вопрос, почему бы не использовать :hover в CSS? Это ведь проще и не нужно лишний раз обрабатывать весь DOM. Или такой вариант не сработает?

Почему бы мне не повесить на элемент следующие стили?
.element:hover {
  will-change: transform;
  transition: transform .5s ease-in;
}


Задаю этот вопрос с точки зрения оптимизации производительности. В моем понимании, чем меньше JS, тем лучше, особенно на сильнонагруженных DOM-элементами страницах. Но MDN рекомендует использовать JS и ни слова не говорит про :hover.
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Вы немного не так поняли пример, хотя он действительно странный. Там выше есть подсказка
Дайте ему достаточно времени, чтобы работать. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

т.е. нельзя сразу при наведении добавлять will-change, нужно заранее. Также не рекомендуется сразу в стилях указывать will-change. Имея два данных факта, нужно найти способ заранее узнать, что скоро будет включена анимация, например, при наведении на родительский блок добавляем will-change к элементу, который будет анимироваться. Тут у нас будет время, пока пользователь наводит мышь конкретно на анимированный элемент.
UPD: в примере из mdn анимация как я понимаю, вероятно включается при клике на элемент.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы