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

我在css3实验中使用从顶部：0到顶部：145px的转换来移动6000个小div元素，以测试性能。

在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上。

我试过你的例子，据我所知，它的工作原理。

至于“为什么”你的问题的一部分…我不知道。 3D变换是一个年轻的标准，所以实现是波动。这就是为什么它是一个前缀属性：用于beta测试。有人可以填写错误报告或问题，并让团队调查。

按2013年8月19日编辑：

在这个答案有定期活动，我只是失去了一个小时，发现IE10也需要这个。
所以不要忘记：

backface-visibility: hidden;
perspective: 1000;

原文地址：https://www.jb51.cc/css/223669.html