配图源自 Freepik
一、requestAnimationFrame
从 MDN 介绍可知：
调用
window.requestAnimationFrame()方法告知浏览器，希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
从这句话可以看出，它相比 setTimeout 等 API 的优势之一是减少 DOM 重绘的次数。
语法也很简单：
window.requestAnimationFrame(callback)
它接受一个回调函数（即下一次重绘之前更新动画帧所调用的函数），并返回一个非零且唯一的 requestId（可以传给 window.cancelAnimationFrame() 以取消回调函数）。
回调函数将会被传入一个 DOMHighResTimeStamp 参数，表示 requestAnimationFrame() 开始去执行回调函数的时刻。
看一下 MDN 给出的一个示例：
Document
效果可看下 CodeSandbox。
帧动画回调函数的执行次数取决于「屏幕刷新率」，以 60Hz（表示每秒钟图像刷新的次数）的屏幕来说，约 16.7ms 会刷新一次，也就是说 requestAnimationFrame() 的回调函数约 16.7ms 就会执行一次。
而且，在多数浏览器中，当 requestAnimationFrame() 处于后台标签页或者被隐藏的