为什么启用硬件加速的CSS3降低性能？为什么启用硬件加速的CSS3降低性能？(Why does en

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

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

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

为什么会这样？

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

更新（2014-11-13）：因为这个问题仍然引起人们的关注，我想指出的是，这个问题本身似乎仍然在现代硬件上提供的演示存在虽然提到口吃可能不可见了。旧设备可能还会看到一些性能问题。

Answer 1:

我总是补充：

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

在与3D转换工作。即使是“假的” 3D变换。经验告诉我，这两条线路始终把提高性能，尤其是在iPad上，而且在Chrome。

我做了你的测试为例，并尽我所知道的，它的工作原理。

至于你的问题的“为什么”的一部分......我不知道。 3D转换是一个年轻的标准，所以执行是波涛汹涌。这就是为什么它是一个前缀属性：Beta测试阶段。有人可能会填补缺陷报告或问题，并有团队调查。

每2013年8月19日编辑 ：

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

backface-visibility: hidden;
perspective: 1000;

Answer 2:

其原因动画较慢时添加的空变换劈（ translateZ(0)是每个空3D变换将创建一个新层。当有太多这些层，渲染性能受到影响，因为浏览器需要大量的纹理发送给GPU。

这个问题是在2013年注意到了苹果公司的主页，滥用空变换黑客。见http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

该任择议定书还正确注意到在解释自己的评论：

移动几大对象比使用3D加速，因为所有的3D加速层不得不被转移到GPU和回来的路上移动大量的小件物品更好的性能。所以，即使GPU做了很好的工作，许多对象的转移可能因此使用GPU加速可能不值得的是一个问题。

Answer 3:

有趣。我试着在几个选项打about:flags ，特别是这些的：

在所有网页GPU合成采用GPU加速合成的所有网页上，而不是只在那些包括GPU加速层。
GPU加速在启用合成图纸启用的页面内容GPU加速绘图。
GPU加速画布2D通过渲染使用图形处理器单元（GPU）硬件启用与2D画布上下文变量的更高的性能。

启用的，试了一下，与tickbox启用悲惨地失败了（就像你一样）。但后来我发现另一种选择：

FPS计数器 ，显示页面的实际帧速率，以每秒帧数， 当硬件加速是有效的 。

鉴于亮点旗描述，我推测，硬件加速，事实上，对我即使没有选中复选框，因为我看到了上面打开的选项FPS计数器！

TL; DR：硬件加速，在端部，用户偏好; 与虚设迫使它translateZ(0)将引入冗余处理开销给出较低性能的外观。

Answer 4:

检查铬：//旗铬。它说

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

Answer 5:

我的经验是该GPU是不是一般快于各种图形。对于非常“基本”的图形，他们可以慢。

如果你旋转图像你可能已经得到了不同的结果 - 这就是那种事情的GPU擅长

还认为，translateZ（0）是在3名维操作，同时改变顶部或左边是一个2三维操作

Answer 6:

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

动画元素不使用左或顶部更改位置，尝试使用WebKit的变换;
所有的子元素需要硬件加速转如使用translateZ（）或translate3D;
FPS措施动画流畅，你平均只有20FPS演示FPS。

以上，只是个人意见，谢谢！

文章来源: Why does enabling hardware-acceleration in CSS3 slow down performance?