requestAnimationFrame()就是为运行动画而生的function。

针对之前介绍的异步函数setInterval, 在显示方面的问题创建的这个新的requestAnimationFrame()函数。请求动画帧。
setInterval不能针对设备优化Frame运行的速率，在某些情况下会丢Frame. 缺少适合动画的一些优化，比如停止执行当tab不是激活状态或者动画被滚动到屏幕外面等等。

The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:
这个方法带一个参数作为callback，当repaint的时候调用。下面是常规模式：

function draw() {
   // Drawing code goes here
   requestAnimationFrame(draw);
}

draw();

定义一个函数，更新动画，代码块最后加上requestAnimationFrame(),函数名作为参数， 指示浏览器再调用函数下一次paint的时候。
持续的运行，

This is then run continuously, as the code is calling requestAnimationFrame() recursively.
然后，当代码递归调用requestAnimationFrame（）时，它将连续运行。

还有CSS animations这个运行的更快一些。一些简单的DOM动画可以用CSS Animations. 他们直接计算通过浏览器内部代码，而不是通过javascript.
If, however, you are doing something more complex and involving objects that are not directly accessible inside the DOM (such as 2D Canvas API or WebGL objects), requestAnimationFrame() is the better option in most cases.

动画时间间隔是多少？
how fast does your animation run?
流畅的动画直接依赖你的动画的frame rate， 通过fps , frames per second. 越高越顺畅。

more frame 意味着更多的进程，也可能引起结巴和跳跃（stuttering and skipping），掉帧 or jank

requestAnimationFrame() always tries to get as close to this magic 60 FPS value as possible. Sometimes, it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. In all cases, requestAnimationFrame() will always do the best it can with what it has available.


Let's talk a little bit more about how the requestAnimationFrame() method differs from the other methods used earlier. Looking at our code from above:

function draw() {
   // Drawing code goes here
   requestAnimationFrame(draw);
}

draw();

Let's now see how to do the same thing using setInterval():

function draw() {
   // Drawing code goes here
}

setInterval(draw, 17);

对应requestAnimationFrame你没用指定一个时间区间，它尽快和尽量顺畅的执行，浏览器不会浪费时间，如果动画不在屏幕显示范围。

setInterval(), 需要指定间隔时间，

Including a timestamp

The actual callback passed to the requestAnimationFrame() function can be given a parameter, too: a timestamp value, that represents the time since the requestAnimationFrame() started running.

This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:
更加时间来运行某些代码，这样就不用管我的动画允许的是快或者慢了。

let startTime = null;

function draw(timestamp) {
    if (!startTime) {
      startTime = timestamp;
    }

   currentTime = timestamp - startTime;

   // Do something based on current time

   requestAnimationFrame(draw);
}

draw();

requestAnimationFrame() is supported in more recent browsers than setInterval()/setTimeout().  Interestingly, it is available in Internet Explorer 10 and above.

So, unless you need to support older versions of IE, there is little reason to not use requestAnimationFrame().