性能更好的js动画实现方式——requestAnimationFrame

http://blog.csdn.net/sinolzeng/article/details/45418307
setTimeout和setInterval有着严重的性能问题，虽然某些现代浏览器对这两函个数进行了一些优化，但还是无法跟css3的动画性能相提并论

requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API，目前已在多个浏览器得到了支持，包括IE10+，Firefox，Chrome，Safari，Opera等，在移动设备上，
ios6以上版本以及IE mobile 10以上也支持requestAnimationFrame，
安卓上的原生浏览器并不支持requestAnimationFrame，
安卓版本的chrome 16+支持requestAnimationFrame的。

优势主要有两点：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

**requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout，
requestAnimationFrame不是自己指定回调函数运行的时间，而是跟着浏览器内建的刷新频率来执行回调，这当然就能达到浏览器所能实现动画的最佳效果了。**

目前，各个支持requestAnimationFrame的浏览器必须加前缀
，对于不支持requestAnimationFrame的浏览器，我们只能使用setTimeout，因为两者的使用方式几近相同，所以这两者的兼容并不难。
对于支持requestAnimationFrame的浏览器，我们使用requestAnimationFrame，而不支持的我们优雅降级使用传统的setTimeout。
把它们封装一下，就能得到一个统一兼容各大浏览器的API了。

<div id="demo" style="position:absolute; width:100px; height:100px; background:#ccc; left:0; top:0;">div>
    <script>
    var demo = document.getElementById('demo');
    function rander(){
        demo.style.left = parseInt(demo.style.left) + 1 + 'px'; //每一帧向右移动1px
    }
    requestAnimationFrame(function(){

    //一个回调函数作为参数，在即将开始的浏览器重绘时，会调用这个函数，并会给这个函数传入调用回调函数时的时间作为参数。
        rander();
        //当超过300px后才停止
        ////requestAnimationFrame的功效只是一次性的，所以若想达到动画效果，则必须连续不断的调用requestAnimationFrame。
        if(parseInt(demo.style.left)<=300) requestAnimationFrame(arguments.callee);
        //requestAnimationFrame函数会返回一个资源标识符
//可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调。
    });
    script>

调用requestAnimationFrame后，它会要求浏览器根据自己的频率进行一次重绘，
它接收一个回调函数作为参数，在即将开始的浏览器重绘时，会调用这个函数，并会给这个函数传入调用回调函数时的时间作为参数。
由于requestAnimationFrame的功效只是一次性的，所以若想达到动画效果，则必须连续不断的调用requestAnimationFrame。
requestAnimationFrame函数会返回一个资源标识符
可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调。