即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

使用CSS3开启GPU硬件加速提升网站动画渲染性能

Web前端 FrontEnder_way 60℃ 0评论
本文目录
[隐藏]

为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,这两个属性都会开启GPU硬件加速模式,从而让浏览器在渲染动画时从CPU转向GPU,其实说白了这是一个小伎俩,也可以算是一个Hack,-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式,但我们设置值为0后,并没有真正使用3D效果,但浏览器却因此开启了GPU硬件加速模式。

  这种GPU硬件加速在当今PC机及移动设备上都已普及,在移动端的性能提升是相当显著地,所以建议大家在做动画时可以尝试一下开启GPU硬件加速。

当然也可以这样开启所有浏览器的GPU硬件加速:

webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

或

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

1.适用情况

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围:

使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。


页面有很多大尺寸图片并且进行了css缩放处理,页面可以滚动时。


使用background-size:cover设置大尺寸背景图,并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw)


编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)


使用很多PNG图片拼接成CSS Sprite时


我能想到的暂时只有这五种情况,欢迎大家补充。

2.总结

  通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题,但使用仍需谨慎,使用前一定要进行严谨的测试,否则它反而会大量占用浏览网页用户的系统资源,尤其是在移动端,肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量,降低电池寿命等问题。

原文地址::http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

转载请注明:CodingBlog » 使用CSS3开启GPU硬件加速提升网站动画渲染性能

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情