'will-change' 与 'transformZ(0)' 的 JS 动画性能

Question

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

没有 will-change 属性 浏览器将执行额外的 Rasterize Paint（在光栅化线程 1 中 screenshot)

will-change 没有 光栅化绘画 操作 (screenshot)。

当我试图在现实生活项目中同时为多个元素制作动画时，情况会变得更糟（尤其是在移动设备上）。 (with will-change, without will-change)

所以问题是：will-change 如何设法提供这种优化，即使它应该做与 transformZ(0) 基本相同的事情（为 gpu 渲染创建新层）。有没有什么方法可以不使用 will-change 来优化这个动画？

Answer 1

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

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

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