官方的定义：

requestAnimationFrame 即请求动画帧，它是一个浏览器的宏任务。简单的说，这个api主要是用来做动画的。

css动画

js动画

在工作中，做动画最优的方案无疑是css动画，但是某些特定场景下，css动画无法实现我们所需要的需求。这时，我们就要考虑使用js去做动画了，canvas动画的本质也是定时器动画。使用定时器动画干活，实际上是可以的，但是存在一个最大的问题，就是动画会抖动，体验效果不是非常好。

而使用requestAnimationFrame去做动画，就不会出现抖动的现象。

这里笔者写一个demo动画（分别是上述两种方式实现dom元素向右平移）给大家看一下，就知道具体的区别。我们先看一下效果图：

由于gif录制软件的问题，看着都有点卡。实际上，大家把下方代码复制一份跑起来看的话，会发现定时器动画在微微颤抖，而requestAnimationFrame动画却稳如老狗

通过上述的例子，我们可以回答这个问题了：

所以在这里，我们还要顺带延伸一下，为什么定时器会卡，而requestAnimationFrame不会卡。在说这个问题之前，我们先来看下requestAnimationFrame的语法规则。

requestAnimationFrame和js中的setTimeout定时器函数基本一致，不过setTimeout可以自由设置间隔时间，而requestAnimationFrame的间隔时间是由浏览器自身决定的，大约是17毫秒左右

1.requestAnimationFrame我们可以在控制台输入window，然后展开查看其身上的属性，就能找到了，如下图：

2.由上图我们可以看到，requestAnimationFrame本质上是一个全局window对象上的一个属性函数，所以我们使用时，直接：window.requestAnimationFrame(callBack)即可。

3.和定时器一样其接收的参数callback也是一个函数，即下一次重绘之前更新动画帧所调用的函数，即在这个函数体中，我们可以写对应的逻辑代码（和定时器类似）。

4.requestAnimationFrame也有返回值，返回值是一个整数，主要是定时器的身份证标识，可以使用 window.cancelAnimationFrame()来取消回调函数执行，相当于定时器中的clearTimeout()。

5.二者也都是只执行一次，想要继续执行，做到类似setInterval的效果，需要写成递归的形式（上述案例中也提到了）

setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔，参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。

requestAnimationFrame能够做到，精准严格的卡住显示器刷新的时间，比如普通显示器60HZ它会自动对应17ms执行一次，高级显示器120HZ，它会自动对应9ms执行一次。当然requestAnimationFrame只会执行一次，想要使其多次执行，要写成递归的形式。

所以，这就是requestAnimationFrame的好处，window.requestAnimationFrame这个api就是解决了定时器不精准的问题的。

比如：回到顶部组件，就是使用requestAnimationFrame实现的。

效果图：

代码：