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

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

1. 使用 GPU 加速translate3D(x, y, z) or translateZ(0)
2. 无需 GPU 加速，只需调整topCSS 中的属性

Using NO硬件加速在 Google Chrome 上运行相当流畅。

如果我启用硬件加速性能会变得更差。不幸的是，盒子甚至不再均匀分布：

使用 GPU/硬件加速：

没有 GPU/硬件加速：

Question

为什么会这样？使用 GPU 不应该提高性能吗？

演示应用程序

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

Source

https://github.com/valnub/hwtest https://github.com/valnub/hwtest

我用于测试的硬件

• 苹果 Macbook Pro 15 英寸 2015 款
• CPU 2.8 GHz 英特尔酷睿 i7
• 16 GB 内存
• macOS 大苏尔 11.2

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

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

我总是补充：

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

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

我对你的例子进行了测试，据我所知，它有效。

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

2013 年 8 月 19 日编辑:

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

backface-visibility: hidden;
perspective: 1000;