关于CSS3动画性能

前天我去面试了...好吧，对于自己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;