CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了为什么在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;

大佬总结

以上是大佬教程为你收集整理的为什么在CSS3中启用硬件加速会降低性能?全部内容,希望文章能够帮你解决为什么在CSS3中启用硬件加速会降低性能?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。