Подтвердить что ты не робот

CSS `will-change` - как его использовать, как он работает

Я нашел CSS will-change W3.org docs, MDN docs (который уже работает в Chrome и частично поддерживается Firefox и Opera), но я не уверен, как это работает. Кто-нибудь знает что-то еще об этой загадочной вещи?

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

  • Должен ли я добавить это свойство в класс элемента или его состояние зависания?

    .my-class{
    will-change: 'opacity, transform'
}
.my-class:hover{
    opacity: 0.5
}
.my-class:active{
    transform: rotate(5deg);
}

    ИЛИ

    .my-class{
    ...
}
.my-class:hover{
    will-change: 'opacity'
    opacity: 0.5
}
.my-class:active{
    will-change: 'transform'
    transform: rotate(5deg);
}

  • Как повысить производительность браузера? Теоретически, когда CSS загружен, браузер уже "знает", что будет с каждым элементом, не так ли?

Если вы можете добавить любой хороший пример, иллюстрирующий, как эффективно использовать его, я буду благодарен:)

4b9b3361

ОТВЕТЫ

Ответ 1

Я не буду копировать и вставлять всю статью здесь, но здесь, tl;dr версия:

Указание того, что именно вы хотите изменить, позволяет браузеру принимать более обоснованные решения относительно тех оптимизаций, которые необходимо выполнить для этих конкретных изменений. Это, очевидно, лучший способ повысить скорость, не прибегая к взлому и не заставляя браузер создавать слои, которые могут быть или не быть необходимыми или полезными.

Как это использовать:

will-change: transform, opacity;

Как его не использовать:

will-change: all;

.potato:hover {
  will-change: opacity;
  opacity:1;
}

Указание will-change при наведении не действует:

Установка will-change для элемента непосредственно перед его изменением мало, чтобы никакого эффекта. (Это может быть на самом деле хуже, чем не устанавливать его вообще. Вы можете понести стоимость нового слоя, когда вы анимация не была бы готова к новому слою!)

Ответ 2

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

1. Layers Hack/Null Transform Hack

В "древние времена" (как 2 года назад) кто-то обнаружил, что вы можете рисовать CSS-анимацию быстрее.

Как это работает?

Если вы добавите transform: translateZ(0) к селектору css, это заставит браузер переместить элемент с этим селектором на новый слой композитора. Более того, это повысит производительность (в большинстве случаев используйте мощности графического процессора вместо процессора) Подробнее читайте здесь.

2. Пока, хаки, добро пожаловать "will-change:"

Вероятно, пока рано говорить "До свидания" с Layer Hack, но это время скоро придет. Новое свойство will change появилось в спецификациях CSS и станет отличным наследником взлома слоев.

3. Поддержка браузера

На данный момент он доступен в Chrome и Opera, а также частично поддерживается Firefox.

4. Как правильно его использовать

Не используйте will-change в любом месте вашего CSS, пока не завершить реализацию ваших анимаций. Только тогда вы должны вернуться к ваш CSS и применить волю-изменения. Больше

Это, наверное, самый ценный совет, который вы можете получить.

Нет смысла использовать его непосредственно перед началом действия, например, добавив его в состояние :hover селектора. Потому что браузеру не понадобится время для подготовки оптимизации до появления изменений. Браузеру понадобится ок. 200 мс, чтобы применить оптимизацию, поэтому, например, лучше добавить will-change к элементу, когда родительский элемент находится в состоянии наведения. Больше

Пример:

 .parent:hover .change{
     will-change: opacity;
 }
 .change:hover{
    opacity: .5;
 }

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

Вы можете сделать это легко, используя JavaScript document.getElementById('my_element_id').style.willChange = off;

Ответ 3

Теперь с помощью CSS вы можете выполнять различные анимации, и иногда эта анимация становится узким местом для процессора. Поэтому вместо выполнения этой задачи на процессоре было бы неплохо использовать GPU для этой задачи. И не так давно люди начали использовать трюк, чтобы сделать это для 2D-преобразования, сделав что-то вроде:

.accelerate {
  -webkit-transform: translate3d(0, 0, 0);
}

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

На основе проект W3C,

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

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

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

Ответ 4

Насколько я знаю...

  • Это альтернатива для translate-z: 0.
  • Я не знаю о зависании, но afaik лучше всего использовать его для свойств, которые постепенно изменяются JS, изменяя непрозрачность, положение во время прокрутки и т.д.
  • Это свойство не должно злоупотреблять, особенно на телефонах, планшетах, используя это слишком много   элементы могут вызвать проблемы с производительностью.
  • Рекомендуется удалить/отключить это свойство JS, когда оно больше не актуально.

Таким образом, пример использования будет применяться в какой-то точке прокрутки, с scrollTop: 400, затем постепенно увеличивать непрозрачность и, скажем, scrollTop: 500, отключить снова-изменится.

Источник: shoptalkshow podcast - они упоминают эту статью - https://dev.opera.com/articles/css-will-change-property/ - это, вероятно, лучший источник информации, чем мой пост: D

Ответ 5

Лучшее решение для меня:

transform : translate(calc(-50% + 0.5px), calc(-50% + 0.5px));