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

我在一个 css3实验中将10,000个小 div 元素从浏览器视图的顶部移动到底部。对于这个测试，我使用了两种不同的方法:

  1. 使用 translate3D(x, y, z)或 translateZ(0)的 GPU 加速
  2. 通过简单地调整 css 中的 top属性没有 GPU 加速

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

如果我启用硬件加速性能会变得很糟糕，糟糕到盒子甚至不再平均分布:

使用图形处理器/硬件加速:

没有图形处理器/硬件加速:

提问

为什么会这样呢? 难道不应该使用 GPU 来提高性能吗？

演示申请

Https://www.timo-ernst.net/misc/hwtest/

来源

Https://github.com/valnub/hwtest

我的硬件用于测试

  • 苹果 Macbook Pro 15“2015款
  • CPU 2,8 GHz Intel Core i7
  • 16GB 内存
  • MacOS Big Sur 11.2

更新 (2014-11-13) : 由于这个问题仍然吸引着人们的注意力，我想指出问题本身似乎仍然存在，尽管上面提到的口吃可能在提供的演示 现代硬件中不再可见。较旧的设备可能仍然会看到性能问题。

* 更新二(2021-02-17) : 问题仍然存在，但是你必须根据所使用的硬件增加演示中移动的盒子数量。我改变了演示应用程序的用户界面，所以你现在可以调整移动的盒子的数量，为你的特定硬件创建一个结巴的动画。为了复制这个问题，我建议创建足够多的框，以便看到启用 GPU/硬件加速时的口吃。然后勾选框并在没有加速的情况下再次运行测试。动画应该更流畅。

54564 次浏览
小开

检查铬://标志在铬。它说

”启用线程合成时，在合成线程上运行加速的 CSS 动画。然而，即使没有排字线程，加速的 CSS 动画也可能会提高性能。”

小开

有意思。我试过在 about:flags中使用一些选项，特别是这些:

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

GPU 加速绘制 启用 GPU 页面加速绘制 启用合成时的内容。

GPU 加速画布2D 使画布标签具有更高的性能 通过使用图形处理器单元(GPU)呈现2D 上下文 硬件。

启用了那些，尝试了它，但是在启用了票据盒之后惨败(就像你做的那样)。但后来我注意到了另一个选择:

FPS 计数器 显示页面的实际帧速率，以帧率表示, 当硬件加速激活时。

考虑到旗帜描述中的亮点，我推测即使没有打勾的复选框，我的硬件加速也是打开的，因为我看到了 FPS 计数器打开了上面的选项！

强大的硬件加速最终是用户的首选项，强制使用虚拟的 translateZ(0)会引入冗余的处理开销，从而造成性能下降的假象。

小开

我总是说:

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

使用三维变换时。甚至“假的”3D 变形。经验告诉我，这两条线总是能提高性能，特别是在 iPad 和 Chrome 上。

我在你的例子上做了测试，据我所知，是有效的。

至于你问的“为什么”那部分... 我不知道。3D 转换是一个年轻的标准，因此实现是不稳定的。这就是为什么它是一个前缀属性: 用于 beta 测试。有人可以填写一份错误报告或一个问题，并让团队进行调查。

2013年8月19日编辑 :

这个问题的答案是有规律的，我花了一个小时才发现 IE10也需要这个。 所以别忘了:

backface-visibility: hidden;
perspective: 1000;
小开

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

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

还要考虑的是，transateZ (0)是一个3维操作，而改变顶部或左侧是一个2维操作

小开

我看了你们的小样，我想我知道你们困惑的原因了:

  1. 动画元素不要使用左边或顶部来改变位置，尝试使用-webkit-change;
  2. 所有子元素都需要打开硬件加速，比如 use transateZ ()或 transate3D;
  3. FPS 测量动画流畅性，你的演示 FPS 平均只有20 FPS。

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

小开
最佳答案

添加 零变形黑客(translateZ(0))时动画速度较慢的原因是每个空3D 转换创建一个新层。当这些图层太多时，渲染性能会受到影响，因为浏览器需要向 GPU 发送大量的纹理。

这个问题在2013年的苹果主页上被注意到，它滥用了 null 转换黑客技术

观察员办公室还正确地注意到 他们的评论中的解释:

当使用3D 加速时，移动少量的大物体比移动大量的小物体效果更好，因为所有的3D 加速图层都必须转移到 GPU 上，然后再回来。因此，即使 GPU 做得很好，许多对象的传输可能是一个问题，因此使用 GPU 加速可能不值得。


提交答案