解决Chrome动画”卡顿”的办法

为动画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);

 

  使用-webkit-transform:transition3d(0,0,0)开启GPU硬件加速的chrome中渲染动画性能明显顺畅了许多,平均能达到55fps左右

chrome诡异的Bug

  对所有动画DOM元素添加-webkit-transform:transition3d(0,0,0)开启GPU硬件加速之后,又出现了一个chrome诡异的Bug,当你有多个position:absolute;元素添加-webkit-transform:transition3d(0,0,0);开启GPU硬件加速之后,会有几个元素凭空消失,调试许久无果遂Google之,国内暂时没有人发表过关于这类问题的文章,于是在国外网站找呀找,找到了很多与我遇到同样问题的人,但都没有真正靠谱的解决办法,这可能是跟添加-webkit-transform之后chrome尝试使用GPU硬件加速有关系,最后还是要等待Chrome官方更新解决了,当前Chrome版本是33。如果谁发现比较好的解决办法,欢迎提出^_^

其他人遇到的类似问题:
3D CSS transform: translateZ causes elements to disappear in Chrome
Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

如何避免这个问题:

  在使用-webkit-transform尝试对很多DOM元素编写3D动画时,尽量不要对这些元素及他们的父元素使用position:absolute/fixed。(其实这种情况很难避免)
所以我的临时解决办法是,减少使用-webkit-transform:transition3d(0,0,0)的DOM元素数量,从9个减至6个便没有元素消失的现象了。
PS:由于测试环境有限,如果大家发现在你的浏览器还有这个Bug,麻烦留言告诉我,万分感谢!

开启GPU硬件加速可能触发的问题:

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后,有些时候可能会导致浏览器频繁闪烁或抖动,可以尝试以下办法解决之:

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

如何监测动画帧速率

推荐两种实时监测网页渲染帧速率的方法:

1.Chrome的DevTool中TimeLine的Frame模块
chrome_timeline_frames

2.地址栏输入”chrome:flags”搜索”fps”,将”FPS计数器”开启,浏览器重启后右上角会实时显示帧速率。
chrome_fps_counter

我会再过些天单独写一篇关于通过Frame模块监测网站性能的教程,敬请留意^_^

通过-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时

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

总结:

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

您还可以参考以下HTML5相关文章:
人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
HTML5 Drag&Drop 拖拽、FileReader实例教程
关于HTML 5 canvas 的基础教程

留意更新

订阅彬Go以查看HTML5最新资源、教程。

转载声明:
原载:彬Go——关注前端开发 & Web UI设计
本文链接:http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html如需转载必须以链接形式注明原载或原文地址,谢谢合作
posted @ 2015-05-23 19:13  Xdoudou  阅读(7858)  评论(0编辑  收藏  举报