在css3实验中,我将10,000个小div元素从browser视口的顶部移动到底部。对于这个测试,我使用了两种不同的方法:
使用translate3D(x, y, z)
或translateZ(0)
中的top
属性即可实现
使用不使用硬件加速在Google Chrome上运行相当流畅。
如果我启用硬件加速,性能会变得更差。很糟糕的是,盒子甚至不再均匀地分布:
使用GPU/硬件加速:
没有GPU/硬件加速:
问题
为什么会这样呢?使用GPU不应该提高性能吗?
演示应用程序
https://www.timo-ernst.net/misc/hwtest/
来源
https://github.com/valnub/hwtest
我用于测试的硬件
更新 (2014-11-13):由于这个问题仍然吸引着人们的注意,我想指出这个问题本身似乎仍然存在,尽管在提供的现代硬件__上的演示中可能看不到前面提到的卡顿。较旧的设备可能仍会遇到性能问题。
*更新II (2021-02-17):问题仍然存在,但您必须根据使用的硬件增加演示中移动的盒子数量。我更改了演示应用程序的UI,以便您现在可以调整移动的框的数量,以便为您的特定硬件创建卡顿动画。为了重复这个问题,我建议创建足够多的盒子来查看启用了GPU/硬件加速的卡顿。然后在框中打勾,在没有加速的情况下再次运行测试。动画应该更流畅。
https://stackoverflow.com/questions/10014461
复制相似问题