我正在css3实验中移动6000个小div元素，使用从top: 0到top: 145px的转换来测试性能。
使用无硬件加速可在Google Chrome上顺利运行。
如果我通过translateZ(0)启用硬件加速，则性能变得非常糟糕。
为什么会这样？
以下是我的示例代码：http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
更新 （2014-11-13）：由于这个问题仍然引起人们的注意，我想指出问题本身似乎仍然存在虽然在现代硬件上提供的演示 中可能不再可见所提到的口吃，但仍然存在。较旧的设备可能仍会出现性能问题。
答案 0 :(得分：96)
我总是添加：
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
使用3d变换时。甚至＆＃34;假＆＃34; 3D变换。经验告诉我，这两条线总能提高性能，尤其是在iPad上，但也在Chrome上。
我对你的例子进行了测试，据我所知，它有效。
至于＆＃34;为什么＆＃34;你的问题的一部分...我不知道。 3D变换是一个年轻的标准，因此实施起伏不定。这就是为什么它是一个前缀属性：用于beta测试。有人可以填写错误报告或问题并让团队进行调查。
2013年8月19日编辑：
这个答案有定期的活动，我只是失去了一个小时，发现IE10也需要这个。 所以不要忘记：
backface-visibility: hidden;
perspective: 1000;
答案 1 :(得分：7)
添加null transform hack（translateZ(0)）时动画较慢的原因是每个空3D变换都会创建一个新图层。当这些图层太多时，渲染性能会受到影响，因为浏览器需要向GPU发送大量纹理。
这个问题在2013年Apple的主页上被注意到，该主页滥用了null变换黑客。见http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/
OP也正确地注意到their comment中的解释：
移动少量大物体比使用3D加速移动大量小物品更有效，因为所有3D加速层都必须转移到GPU并返回。因此，即使GPU做得很好，许多对象的传输可能也是一个问题，因此使用GPU加速可能不值得。
答案 2 :(得分：6)
有趣。我试过在about:flags中使用一些选项，特别是这些选项：
所有网页上的GPU合成全部使用GPU加速合成 页面，而不仅仅是那些包含GPU加速图层的页面。
GPU加速绘图启用GPU加速页面绘制 启用合成时的内容。
GPU加速画布2D 启用更高性能的canvas标签 使用图形处理器单元（GPU）渲染2D上下文 硬件
启用了那些，尝试了它并且在启用了复选框的情况下失败了（就像你一样）。但后来我注意到了另一种选择：
FPS计数器显示网页的实际帧速率，以每秒帧数为单位， 当硬件加速处于活动状态时。
鉴于标志描述中的重点，我推测硬件加速实际上对我来说即使没有勾选复选框，因为我看到FPS计数器打开了上面的选项！
TL; DR：硬件加速最终是用户偏好;用伪translateZ(0)强制它会引入冗余的处理开销，从而导致性能降低。
答案 3 :(得分：0)
检查chrome中的chrome：//标志。它说
“启用线程合成时，加速的CSS动画在合成线程上运行。但是，即使没有合成器线程，加速的CSS动画也可能会有性能提升。”
答案 4 :(得分：0)
我的经验是，对于所有类型的图形，GPU通常不会更快。对于非常“基本”的图形，它们可能会变慢。
如果您正在旋转图像，可能会得到不同的结果 - 这就是GPU擅长的事情
还要考虑translateZ（0）是3维操作，而改变顶部或左边是二维操作
答案 5 :(得分：-2)
我看到你们两个演示，我想我知道你混淆的原因：
以上，只是个人意见，谢谢！