1

我一直在尝试 javascript 动画，并注意到在使用will-change属性并将transform3D()动画元素分离到新层以进行 gpu 渲染时的性能差异。当我尝试为元素设置动画时会发生这种情况scaling，该元素也具有border-radiuscss 属性。 在这里写代码

没有will-change属性浏览器将执行额外的光栅化绘制（在 屏幕截图上的光栅化线程 1 中）

will-change没有光栅化绘画动作（截图）。

当我尝试在现实项目中一次为多个元素设置动画时，情况会变得更糟（尤其是在移动设备上会受到伤害）。（有 will-change，没有 will-change）

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

4

1 回答 1

1

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

所以will-change这只是一种更现代的方式来完成同样的事情，因此，它的支持也没有 3D 变换那么广泛 。

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

于 2019-04-15T08:35:48.183 回答