Динамически добавлять значение будет меняться при нажатии / наведении курсора jQuery

Question

В этой статье автор заявляет, что не нужно постоянно хранить стиль. will-change: transform;и должен быть добавлен динамически с использованием JavaScript

Также автор сценария примера:

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';
}

Могу ли я использовать этот скрипт, и будет ли он мне полезен?

      $('.my_class')    
      .mouseenter(function() {
        $(this).css("will-change", "transform");
      })
      .mouseleave(function() {
        $(this).removeAttr("style");
      });

Я буду рад услышать предложения о том, как эффективно использовать стиль will-change

Answer 1

Вы должны обратить особое внимание на этот абзац в статье, на которую вы ссылаетесь (акцент мой)

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

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