为什么在CSS3中启用硬件加速会降低性能？
我正在使用从top: 0到top: 145px的转换在css3实验中移动6000个小div元素以testing性能。
Google Chrome浏览器无需使用硬件加速运行。
如果我通过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上。
我testing了你的例子，据我所知，它的工作原理。
至于你的问题的“为什么”部分…我不知道。 3D变换是一个年轻的标准，所以实现起伏不定。 这就是为什么它是一个前缀属性：用于betatesting。 有人可以填写错误报告或问题，并让团队调查。
编辑每2013年8月19日 ：
这个答案有定期的活动，我只是失去了一个小时发现IE10也需要这个。 所以不要忘记：
backface-visibility: hidden; perspective: 1000;
添加空变换hack （ translateZ(0) ）时animation变慢的原因是每个空3D变换都会创build一个新图层。 当这些层数太多时，渲染性能会受到影响，因为浏览器需要向GPU发送大量纹理。
这个问题在2013年被苹果公司的主页发现了，它滥用了null变换技术。 见http://wesleyhales.com/blog/2013/10/26/Jank-Binging-Apples-Home-Page/
OP也正确地注意到他们评论中的解释：
在使用3D加速时，移动less量大物体比移动大量小物体的性能更高，因为所有3D加速层必须转移到GPU并返回。 所以，即使GPU做得很好，许多对象的传输可能是一个问题，所以使用GPU加速可能不值得。
有趣。 我已经尝试了几个about:flags选项，特别是这些：
所有页面上的GPU合成在所有页面上使用GPU加速合成，而不仅仅是包含GPU加速层的合成。
GPU加速绘图启用合成时启用GPU加速绘制页面内容。
GPU Accelerated Canvas 2D通过使用graphics处理器单元（GPU）硬件进行渲染，可在2D上下文中实现更高的canvas标签性能。
启用这些，尝试它，并启用tickbox惨败失败（就像你做的那样）。 但后来我注意到另一个select：
FPS计数器 当硬件加速处于活动状态时 ，以每秒帧数显示页面的实际帧速率。
鉴于标志描述中的亮点，我推测硬件加速对于我来说甚至没有打勾的checkbox，因为我看到FPS计数器打开了上面的选项！
TL; DR：硬件加速最终是用户的偏好; 用dummy translateZ(0)强制它会引入冗余的处理开销，从而降低性能。
在chrome中检查chrome：//标志。 它说
“当启用线程合成时，加速的CSSanimation会在合成线程上运行，但是，即使没有合成器线程，运行加速的CSSanimation也可能会有性能提升。
我的经验是GPU对于各种graphics通常不会更快。 对于非常“基本”的graphics，它们可能会变慢。
如果你正在旋转图像，你可能会得到不同的结果 – 这是GPU擅长的
还要考虑translateZ（0）是一个3维操作，而顶部或左边是2维操作
我看了你两个demo，我想我知道你弄糊涂的原因：
- animation元素不要使用left或者top来改变位置，尝试使用-webkit-transform;
- 所有子元素都需要打开硬件加速，比如使用translateZ（）或者translate3D;
- FPS测量animation的stream畅度，你的演示FPS平均只有20FPS。
以上只是个人意见，谢谢！
