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

Question

[Михаил Федотов]

Про сам 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.

Comments

[Rustam Bainazarov]

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

Если уж и использовать, то вариант с JS предпочтительнее.

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

[Rustam Bainazarov]

Ну, собственно говоря, это всё и написано в статье по ссылке.

[Михаил Федотов]

Рустам Байназаров, не совсем понятно.
В статье предлагают по событию mouseenter присваивать will-change.
Я предлагаю делать то же самое, но через :hover.

Так как JS пересчитывает DOM, присваивая новые стили. А :hover нет.
Если я не прав, поясните, пожалуйста.

[Rustam Bainazarov]

Михаил Федотов, а, значит, я неправильно понял, извините.

Тогда не могу вам ничего сказать на этот счёт, к сожалению. Но думаю, если бы было лучше это вешать на :hover, то об этом написали.

Answer 1

[Владимир Проскурин]

Вы немного не так поняли пример, хотя он действительно странный. Там выше есть подсказка

Дайте ему достаточно времени, чтобы работать. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

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

Comments

[Михаил Федотов]

То есть :hover делает это моментально, но для will-change нужно некоторое время.
Теперь ясно, почему :hover не подходит, но неясно, почему при этом подходит mouseenter.
Это не одно и то же?

[Владимир Проскурин]

Михаил Федотов, я на 100% уверен, что в примере анимация включается при клике по элементу, иначе это ошибка. mouseenter и анимация при клике подходит, т.к. между наведением и кликом все равно будет некоторое время. А moueenter и анимация при :hover нет, т.к. эти два события происходят в один момент.

[Владимир Проскурин]

Михаил Федотов, я погуглил. Вот тут лучше написано https://dev.opera.com/articles/ru/css-will-change-...

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

Но что если вы рассчитываете, что изменение должно произойти при наведении курсора, а не при клике по элементу? Тогда, как уже говорилось, запись, представленная выше, будет бесполезной. В таком случае часто всё же возможно найти какой-либо способ предсказать действие до его осуществления. Например, наведение на родительский элемент изменяемого элемента должно дать нам достаточную фору:

[Михаил Федотов]

Владимир Проскурин, я неправильно выразился, это моя ошибка.
В моей задаче стоит включение анимации, при клике. Например, пусть будет вот такой код:

<div id="container">
  <div id="animateMe"></div>
  <button id="startAnimate">Начать анимацию</button>
</div>

Мой вопрос звучит так:
почему нельзя сделать

#container:hover>#animateMe {
  will-change: transform;
}

а вместо этого нужно:

var container = document.getElementById("container");
var animateMe = document.getElementById("animateMe");
var button = document.getElementById("startAnimate");

// заметьте, mouseenter на animateMe, а не на container!!!
animateMe.addEventListener("mouseenter", function() {
  this.style.willChange = 'transform, opacity';
});

// и сама анимация
button.addEventListener("click", function() {
  animateMe.style["transform"] = "translate3d(100px,0,0);"
}

Еще по ходу родился вопрос, как быть с мобильными пользователями, но сначала бы с этим разобраться...

[Владимир Проскурин]

Если анимация запускается по клику, то можно, т.к. проходит некоторое время перед кликом. По ссылке, что я кидал, есть пример

.element {
	transition: transform 1s ease-out;
}
.element:hover {
	will-change: transform;
}
.element:active {
	transform: rotateY(180deg);
}

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