前天我去面试了...好吧,对于自己6年6份工作的悲催经历,我自己也是醉了。
但没办法,我这种当时上学没好好学习,临毕业才出家写代码的半吊子码农,起步没起好,以至于一直没能找到真正让自己满意的工作。
通过了几年的努力和累积,总算是把信心给拿回来了。
这不,又踏上我的追求之路了。我真心是希望这是我最后一次换工作了。
阿门,愿主保佑我...
那个...好像废话说得有点多了。OK,正题时间。
是这样,面试的时候,技术官问了我一个问题,引发了我的深思~那就是CSS动画的效率问题。
这个...因为之前接触移动项目只有约1年的时间,当时对移动前端开发性能研究还没触及这一块...
唉,没办法,初次接触移动项目,问题难免多多,而且当时连动画都用得不多,何况是动画性能的研究...
所以,作为一个老实人,我如实回答了...(当然后面还有一些问题我也失水准了,以至于这一次面试我感觉十有八九是要挂了...)
面试挂了就挂了,咱解决问题的心不能凉啊~(周围众人抛来不满的表情:你小样又在说废话了...- -b)
于是各种资料查找,找到了两篇相关的文章:
http://www.w3cfuns.com/article-5598175-1-1.html
http://www.cnblogs.com/PeunZhang/p/3510083.html
目前对提升移动端CSS3动画体验的主要方法有几点:
1.在桌面端和移动端用CSS开启硬件加速
我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能。
当浏览器检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。
.cube { -webkit-transform: translate3d(250px,250px,250px) rotate3d(250px,250px,250px,-120deg) scale3d(0.5, 0.5, 0.5); }
如果我们不需要对元素进行3D变换,又想启动硬件加速,可以用下面的小技巧来诱使浏览器启动硬件加速。
.cube { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); /* Other transform properties here */ }
使用transform: translateZ(0),不会对元素进行3D变换,但一样可以触发硬件加速。
同理,也可以使用下面的做法:
.cube { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ }
在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:
.cube { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; /* Other transform properties here */ }
通过使用translate3d制作的位移动画流畅度会明显优于使用left,right,top,bottom等属性。
但这种做法同时也增加了内存的使用,而且它会加快移动端设备的电池消耗。
2.尽可能少的使用box-shadows与gradients
box-shadows(阴影)与gradients(渐变)往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们,所以拥抱扁平化设计吧。
3.尽可能的让动画元素不在文档流中,以减少重排
方法很简单,直接在动画元素上使用
position: fixed;
或者
position: absolute;