使用'will-change'与'transformZ（0）'

Question

当我使用will-change属性和transform3D()将动画元素分隔为用于gpu渲染的新图层时，我一直在尝试使用javascript动画并注意到性能差异。 它发生在我试图为scaling元素设置动画时，该元素也具有border-radius css属性。 Codepen here

如果没有will-change属性，浏览器将执行其他 Rasterize Paint （在rasterizer thread1中 screenshot）

使用will-change时，没有 Rasterize Paint 操作（screenshot）。

当我在现实生活中尝试动画多个元素时，情况会变得更糟（特别是在移动设备上会受到伤害）。 （with will-change，without will-change）

所以问题是：will-change如何设法提供这种优化，即使它应该与transformZ(0)基本相同（为gpu-rendering创建新层）。有没有办法优化这个动画而不使用will-change？

Answer 1

will-change与translateZ(0) hack基本上（截至今天）是相同的。它们将元素拉到新的渲染层上。区别在于will-change告诉浏览器您的意图，即您将更改此属性；而使用translateZ(0)只是偶然的副作用。

所以will-change只是完成同一件事的一种更现代的方式，因此，它也是less widely supported than 3D transforms。

可以想象will-change随着时间的推移会变得越来越强大。我可以想象它用于颜色更改（使用GPU着色器），特定的位置更改（例如，绝对定位的元素的位置）等等。