84

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

  1. 使用 GPU 加速translate3D(x, y, z)或translateZ(0)
  2. top只需调整css中的属性即可无需GPU加速

使用无硬件加速在 Google Chrome 上运行相当流畅。

如果我启用硬件加速性能会变得更糟。太糟糕了，盒子甚至不再均匀分布：

使用 GPU/硬件加速：

没有 GPU/硬件加速：

问题

为什么呢？不应该使用 GPU 来提高性能吗？

演示应用

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

来源

https://github.com/valnub/hwtest

我用于测试的硬件

  • Apple Macbook Pro 15" 2015 型号
  • CPU 2,8 GHz 英特尔酷睿 i7
  • 16 GB 内存
  • macOS 大苏尔 11.2

更新（2014-11-13）：由于这个问题仍然引起关注，我想指出问题本身似乎仍然存在，尽管在提供的现代硬件演示中可能不再看到提到​​的口吃。较旧的设备可能仍会出现性能问题。

*更新 II (2021-02-17)：问题仍然存在，但您必须根据使用的硬件增加演示中移动的盒子数量。我更改了演示应用程序的 UI，因此您现在可以调整移动框的数量，为您的特定硬件创建口吃动画。为了重现这个问题，我建议创建足够的框来查看启用 GPU/硬件加速的卡顿。然后勾选该框并再次运行测试而不加速。动画应该更流畅。

4

6 回答 6

100

我总是添加：

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

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

我确实对您的示例进行了测试，据我所知，它有效。

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

2013 年 8 月 19 日编辑：

这个答案有规律的活动，我刚刚失去了一个小时，发现 IE10 也需要这个。所以不要忘记：

backface-visibility: hidden;
perspective: 1000;
于 2012-04-13T00:22:16.167 回答
8

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

该问题于 2013 年在 Apple 的主页上被发现，该主页滥用了 null 转换 hack。见http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-Page/

OP 也正确地注意到了他们评论中的解释：

使用 3D 加速时，移动少量大对象比移动大量小项目更高效，因为所有 3D 加速层都必须传输到 GPU 并返回。因此，即使 GPU 做得很好，许多对象的传输也可能是一个问题，因此使用 GPU 加速可能不值得。

于 2015-06-25T02:14:54.673 回答
6

有趣的。我尝试使用 中的一些选项about:flags，特别是这些选项：

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

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

GPU Accelerated Canvas 2D通过使用图形处理器单元 (GPU) 硬件进行渲染，使具有 2D 上下文的画布标签性能更高。

启用这些，尝试它并在启用复选框的情况下惨遭失败（就像您所做的那样）。但后来我注意到另一个选择：

FPS 计数器显示页面的实际帧速率，以每秒帧数为单位， 当硬件加速处于活动状态时。

鉴于标志描述中的突出显示，我推测硬件加速实际上对我来说是启用的，即使没有勾选复选框，因为我看到上面选项打开的 FPS 计数器！

TL;DR：硬件加速归根结底是用户偏好；用 dummy 强制它translateZ(0)会引入冗余处理开销，从而导致性能降低。

于 2012-04-11T22:41:02.987 回答
0

在 chrome 中检查 chrome://flags。它说

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

于 2012-04-09T01:51:17.497 回答
0

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

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

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

于 2012-04-15T23:16:27.973 回答
-2

看了你们两个demo，我想我知道你们困惑的原因了：</p>

  1. 动画元素不要使用left或者top来改变位置，尽量使用-webkit-transform；
  2. 所有子元素都需要开启硬件加速如使用 translateZ() 或 translate3D；
  3. FPS 衡量动画流畅度，你的演示 FPS 平均只有 20FPS。

以上，仅代表个人意见，谢谢！

于 2013-01-23T03:46:22.287 回答