js requestAnimationFrame

参考
requestAnimationFrame简介
requestAnimationFrame，Web中写动画的另一种选择
CSS3动画那么强，requestAnimationFrame还有毛线用？

当我们写window.requestAnimationFrame(回调函数)时，浏览器会在下次重绘前执行回调函数。我们可以用它来做连贯的逐帧动画。例如：

function render(){
     // 一些更新界面的操作
     requestAnimationFrame(render);
}

render();

在没有requestAnimationFrame方法之前，我们只能用setTimeout或setInterval来实现类似的效果

function render(){
     // 一些更新界面的操作
    setTimeout(render, 1000/60);// 一般浏览器是每秒60帧
}

render();

这样写的存在的问题是：如果浏览器不是每秒60帧，会造成掉帧。还有，在性能方面，大部分在浏览器在标签页/窗口处于的时候非激活状态（如窗口最小化或标签页切换了）时，requestAnimationFrame是不会被执行的，而setTimeout/setInterval 会。

以下参考CSS3动画那么强，requestAnimationFrame还有毛线用？

国庆北京高速，最多每16.7s通过一辆车，结果，突然插入一批setTimeout的军车，强行要10s通过。显然，这是超负荷的，要想顺利进行，只能让第三辆车直接消失（正如显示绘制第三帧的丢失）。然，这是不现实的，于是就有了会堵车！

同样的，显示器16.7ms刷新间隔之前发生了其他绘制请求(setTimeout)，导致所有第三帧丢失，继而导致动画断续显示（堵车的感觉），这就是过度绘制带来的问题。不仅如此，这种计时器频率的降低也会对电池使用寿命造成负面影响，并会降低其他应用的性能。

这也是为何setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。

而我requestAnimationFrame就是为了这个而出现的。我所做的事情很简单，跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那我就这个间隔绘制；如果浏览设备绘制间隔是10ms, 我就10ms绘制。这样就不会存在过度绘制的问题，动画不会掉帧，自然流畅的说~~