通过使用requestAnimationFrame API，而不是使用之前的setInterval/setTimeout方法，来提高动画的性能；
setTimeout和setInterval缺点
首先，在切换到一个不同的标签时，甚至当相应页面最小化时，javascript计时器仍将继续工作。造成的后果就是，浏览器继续运行无形的动画，这导致了动画过度绘制，浪费 CPU 周期以及消耗额外的电能等问题。 在移动设备上，这会是特别糟糕的问题。
第二，计时器不仅会继续运行看不见的动画，而且当时间到了的时候他们总是还要排队等待他们的回调函数。让我来解释下为什么这种情况有时会带来问题 – 就是说你没有很好的完成你的工作，因为某些原因回调函数完成所需要的时间比你设置计时器的时间要长。一旦计时器的时间到了，他们又将排队到另外一个回调函数。尽管前一个还没有完成运行。随着时间的推移，这个过程一直重复着，你可以迅速排队到几乎无数的计时器， 这将导致浏览器停止运行
requestAnimationFrame的工作流程如下：
首先，RAF(Request Animation Frame)只绘制哪些对用户可见的动画。这意味着RAF会暂停那些隐藏的tabs、最小化的窗口或者隐藏的部分页面的动画，直到这些窗口或页面可见，这样就不会浪费CPU和电池的寿命。
其次，帧只会在当浏览器准备绘制并且没有其他的帧等待被绘制时才会绘制。这意味着这些情况是不可能发生的：使用requestAnimationFrame绘制动画需要排队超过一个回调函数或者使浏览器瘫痪。
第三，帧只会在当浏览器准备绘制并且没有其他的帧等待被绘制时才会绘制，没有不必要的帧绘制。所以动画更流畅了，CPU和电池的使用进一步得到优化。
