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

前端之家收集整理的这篇文章主要介绍了为什么在CSS3中启用硬件加速会降低性能?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在css3实验中使用从顶部:0到顶部:145px的转换来移动6000个小div元素,以测试性能

在Google Chrome上不使用硬件加速运行顺畅。

如果我通过translateZ(0)启用硬件加速性能变得可怕。

为什么?

这里是我的示例代码http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

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

解决方法

我总是添加
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

使用3d变换时。甚至“假”3D变换。经验告诉我,这两条线总是提高性能,特别是在iPad上,而且在Chrome上。

我试过你的例子,据我所知,它的工作原理。

至于“为什么”你的问题的一部分…我不知道。 3D变换是一个年轻的标准,所以实现是波动。这就是为什么它是一个前缀属性:用于beta测试。有人可以填写错误报告或问题,并让团队调查。

按2013年8月19日编辑:

在这个答案有定期活动,我只是失去了一个小时,发现IE10也需要这个。
所以不要忘记:

backface-visibility: hidden;
perspective: 1000;

猜你在找的CSS相关文章