为什么在CSS3中启用硬件加速会降低性能？

我使用由过渡移动6000个小div元素在CSS3实验top: 0来top: 145px测试性能。

使用没有硬件加速运行平稳谷歌浏览器。

如果我通过translateZ(0)性能启用硬件加速，将变得可怕。

为什么呢？

这是我的示例代码：http : //dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

更新（2014-11-13）：由于这个问题仍在引起人们的注意，我想指出的是问题本身似乎仍然存在，尽管在现代硬件提供的演示中可能不再可见上述的卡顿现象。较旧的设备可能仍然会遇到性能问题。

我总是补充：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

使用3d变换时。甚至是“假” 3D变换。经验告诉我，这两条线总是可以提高性能，尤其是在iPad上和Chrome上。

我确实对您的示例进行了测试，据我所知，它确实有效。

至于您的问题的“为什么”部分……我不知道。3D变换是一个年轻的标准，因此实现起来很不稳定。这就是为什么它是一个前缀属性：用于beta测试的原因。有人可以填写错误报告或问题，然后让团队进行调查。

2013年8月19日编辑：

有一个关于这个答案经常性活动，我只是失去了一个小时，发现IE10也需要这个。所以不要忘记：

backface-visibility: hidden;
perspective: 1000;

添加null变换hack（translateZ(0)）时动画变慢的原因是每个null 3D变换都会创建一个新图层。当这些层太多时，由于浏览器需要向GPU发送大量纹理，渲染性能会受到影响。

该问题在2013年的苹果首页上被发现，该网页滥用了null转换黑客。参见http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

OP也正确地注意到了他们评论中的解释：

使用3D加速时，移动少量大物体比移动许多小物品更有效，因为所有3D加速层都必须转移到GPU并返回。因此，即使GPU表现出色，许多对象的传输也可能会成为问题，因此使用GPU加速可能不值得。

有趣。我试过了中的一些选项about:flags，特别是这些选项：

所有页面上的GPU合成使用所有页面上的GPU加速合成，而不仅仅是包含GPU加速层的页面。

GPU加速绘图启用合成后，启用页面内容的GPU加速绘图。

GPU加速的Canvas 2D通过使用图形处理器单元（GPU）进行渲染，可在2D上下文中实现更高的canvas标签性能。

启用这些功能，尝试一下，并在启用复选框的情况下惨败（就像您所做的那样）。但是后来我注意到了另一个选择：

FPS计数器当硬件加速处于活动状态时，显示页面的实际帧速率，以每秒帧数 为单位。

考虑到标志说明中的突出显示，我推测即使没有勾选复选框，我实际上也正在启用硬件加速，因为我看到打开了上述选项的FPS计数器！

TL; DR：最终，硬件加速是用户的偏爱；强制使用虚拟设备translateZ(0)将引入多余的处理开销，从而导致性能降低。

在chrome中检查chrome：// flags。它说

“启用线程合成后，加速的CSS动画将在合成线程上运行。但是，即使没有合成器线程，使用加速的CSS动画也可能会提高性能。”

我的经验是，对于所有类型的图形，GPU通常都不会更快。对于非常“基本”的图形，它们可能会变慢。

如果旋转图像，可能会得到不同的结果-这就是GPU擅长的事情

还要考虑translateZ（0）是3维操作，而改变top或left是2维操作

我看到了两个演示，我想我知道您感到困惑的原因：

1. 动画元素不要使用左侧或顶部来更改位置，请尝试使用-webkit-transform;。
2. 所有的子元素都需要打开硬件加速，例如使用translateZ（）或translate3D；
3. FPS衡量动画的流畅程度，您的演示FPS平均只有20FPS。

以上，仅是个人观点，谢谢！