在css3实验中，我将10000个小div元素从浏览器视口的顶部移动到底部.对于这个测试，我使用了两种不同的方法:
- 使用
translate3D(x, y, z)或translateZ(0)的GPU加速 - 通过简单地调整CSS中的
top属性，不会实现GPU加速
使用NO个硬件加速在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 Intel Core i7
- 16GB内存
- MacOS Big Sur 11.2
100 (2014-11-13): Since this question is still attracting attention I'd like to point out that the problem itself still seems to exist although the mentioned stuttering might not be visible anymore in the provided demo 101. Older devices might still see performance issues.
*Update II(2021-02-17):问题仍然存在，但您必须根据使用的硬件增加演示中移动的盒子数量.我更改了演示应用程序的UI，这样你现在就可以调整移动的框的数量，为你的特定硬件创建一个口吃的动画.为了复制这个问题，我建议创建足够多的框，以便在启用GPU/硬件加速的情况下看到口吃.然后勾选方框，在不加速的情况下再次运行测试.动画应该更平滑.