使用CSS3动画代替JS动画的好处

让你的页面动画在移动设备上运行的更快一些，这是一个比较有趣的话题，也是当下移动互联网前端工程师需要关注的问题。

我们都知道导致JavaScript效率低的两大原因：操作DOM和使用页面动画。在浏览器上实现动画效果可不比客户端轻松，通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果，刚巧导致js效率低的两个因素都包括在内了。在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint）， 在PC版本的浏览器中，因为浏览器可用的内存比较大，用户肉眼几乎看不见页面动画产生的repaint和reflow，所以工程师几乎(请注意，我是说几乎)无需过多的考虑动画带来的性能问题，但在移动设备上可大有不同，移动设备分配给浏览器(指内置浏览器)的内存可没有PC版本的浏览器内存可观，据说 iPhone分配给safari的内存只有10M，但有位国外工程师测试过实际上iPhone 3GS分配给safari的内存仅有6M，而Android分配给浏览器的内存更加的不确定，不管是iPhone还是Android还是 windowPhone还是黑霉，都没有官方的文档说系统内置浏览器最多占用多少内存，所以以上说的内存数据都带有不确定性。目前对CSS3支持最好的莫过于webkit浏览器了，在webkit内核的浏览器，莫过于Apple公司的safari其次是Google公司的chrome再次应该算是黑莓浏览器。

在继续说下去之前，我们再把话题转向CSS3。前端工程师们都知道CSS3提供了一大批新的特性，包括2D＼3D动画特性，其它特性不在本篇讨论范围内，我们此刻讨论一下CSS3的动画特性。用CSS3动画替代JS模拟动画的好处：

　　1. 不占用JS主线程；

　　2. 可以利用硬件加速；

　　3. 浏览器可对动画做优化（元素不可见时不动画，减少对FPS的影响）。

坏处是：

　　浏览器对渲染的批量异步化处理让动画难以控制，此时可以用

1 $.fn.repaint = function () {
2   this.each(function (item) {
3     return item.clientHeight;
4 });  
5 }

　　来强制同步。

CSS3动画提供了2D和3D以及常规动画属性接口，它可以工作在页面的任何一个元素的任意一个属性，CSS3的动画是利用C语言编写的，它是系统层面的动画，因此它的效率绝对的高于js模拟的动画，真的就是这样吗？

经过我们的测试发现CSS3动画与javascript模拟动画有以下区别：

　　1.  CSS 3D动画在js中无法实现

CSS3的3D动画是CSS3中非常强大的功能，因为它的工作原理是在一个三维的空间里，因此js是无法模拟出像CSS3那样的3D动画，当然这个3D动画的实际应用场景是否很广，值得思考……

　　2. CSS 2D矩阵动画效率高于js利用margin和left,top模拟的矩阵动画

CSS3的2D动画是指是2D矩阵Transform变化，比如缩放＼变形＼x轴＼y轴，js当然是不能做变形动画的。就拿坐标动画来说，经过我们的测试 发现使用CSS3的transform做translateXY动画比js中的position left，position right快了近700mm!而且视觉上也比js动画流畅很多。

　　3. CSS3其它常规动画属性的效率均低于js模拟的动画

常规动画属性在这里是指：height，width,opacity,border-width,color…..
我们曾在Android HTC中测试将一个DOM元素从height:0改变为height:100，我们使用了jQuery animate和CSS3的transition以及animation，结果表明：CSS3的tansition和animation均慢于 jQuery animate 500mm！其它的常规动画属性均慢于jQuery animate 400-500mm!。

以上是我们就CSS3动画和jQuery动画做过的一些简单的测试，我们希望您也能够在评论中列出您的测试结果。下面我们再来看看动画事件。
每在页面执行一次动画时，都应该带有至少两个事件animationStart和animationEnd有的可能还需要 animationDuration，在手机上我们不推荐animationDuration，本来效率就已经非常低了，尽量不要在动画执行期间还做其它 的事件。用js模拟动画，需要开发者编写这些动画事件的接口，以便更好的做下一步的工作，而CSS3动画不需要开发者编写这些事件接口，浏览器本身就已经提供了， 拿webkit内核的浏览器举例，它提供了 webkitTransitionStart,webkitTransitionEnd,webkitAnimationStart,webkitAnimationDuration,webkitAnimationEnd 事件接口，开发者可以很方便的使用这些事件。

通过上面的讨论我们可以发现一个结果：
至于采用js动画还是css3动画，需要开发者根据不同的需求做出不同的抉择，但应该遵循一个基本的原则是：
如果你需要做2D动画，请勿必使用CSS3的transition或animation。

使用CSS3动画代替JS动画的好处,古老的榕树,5-wow.com