当我使用will-change属性和transform3D()将动画元素分离为用于gpu渲染的新图层时，我一直在尝试javascript动画并注意到性能差异。它发生在我试图动画元素的scaling时，它也有一个border-radius css属性。 Codepen here
没有will-change属性浏览器将执行额外的Rasterize Paint（在screenshot上的rasterizer thread1中）
使用will-change没有Rasterize Paint动作（screenshot）。
当我试图在现实生活中一次动画多个元素时（尤其是在移动设备上受到伤害），它会变得更糟。 （with will-change，without will-change）
所以问题是：will-change如何设法提供这种优化，即使它应该与transformZ(0)基本相同（为gpu渲染创建新层）。有没有办法优化这个动画而不使用will-change？
will-change基本上和translateZ(0) hack做同样的事情（截至今天）：它将元素拉出到新的渲染层上。区别在于will-change告诉浏览器你的意图，即你将改变这个属性;而translateZ(0)只是巧合的副作用。
所以will-change只是一种更现代的方式来完成同样的事情，因此，它也是less widely supported than 3D transforms。
可以想象，随着时间的推移，will-change将变得更加强大。我可以想象它被用于颜色变化（使用GPU着色器），特定的定位变化（例如，绝对定位的元素的位置）等等。