JS анимация с "will-change" против "transformZ(0)"

Question

Я пробовал анимацию JavaScript и заметил различия в производительности, когда я использовал will-change собственность и transform3D() разделить анимированный элемент на новый слой для рендеринга GPU. Бывает когда пытаюсь оживить scaling элемента, который также имеет border-radius собственность css. Codepen здесь

Без will-change Браузер свойств выполнит дополнительную Rasterize Paint (в теме растеризатора 1 на скриншоте)

С will-change действия Rasterize Paint нет ( скриншот).

И становится намного хуже, когда я пытаюсь анимировать сразу несколько элементов в реальном проекте (особенно это больно на мобильных устройствах). ( с изменением воли, без изменения воли)

Итак, вопрос: как will-change удается обеспечить такую ​​оптимизацию, хотя она должна делать в основном то же самое, что и transformZ(0) (создание нового слоя для gpu-рендеринга). И есть ли способ оптимизировать эту анимацию без использования will-change?

Answer 1

will-change в основном делает то же самое (на сегодняшний день), что и translateZ(0) hack: он вытягивает элемент на новый слой рендеринга. Разница в том, что will-change сообщает браузеру ваше намерение, а именно, что вы будете изменять это свойство; тогда как с translateZ(0) это просто случайный побочный эффект.

Так will-change это просто более современный способ выполнить то же самое, и как таковой, он также менее широко поддерживается, чем 3D-преобразования.

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