传统的 JavaScript 动画是通过 setTimeout 或者 setInterval 实现的，但是定时器动画一直存在两个问题：

• 动画的循环间隔不好控制，设置长了动画显得不够平滑流畅，设置短了浏览器的重绘频率会达到瓶颈，推荐的最佳循环间隔是 17ms（大多数电脑的显示器刷新频率是 60Hz，1000ms/60）
• 定时器第二个参数只是指定了多久后将动画任务添加到浏览器的 UI 线程队列中，如果 UI 线程处于忙碌状态，那么动画不会立刻执行。

为了解决这些问题，H5 中加入了 requestAnimationFrame 和 requestIdleCallback

requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然意味着更少的 CPU、GPU 和内存使用量

requestAnimationFrame 是浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下，动画会自动暂停，有效节省了 CPU 开销

性能对比

requestAnimationFrame 的回调会在每一帧确定运行，属于高优先级任务；而 requestIdleCallback 的回调则不一定，属于低优先级。

我们看到的网页都是浏览器一帧一帧绘制出来的，通常认为 FPS 为 60 是比较流畅的，而 FPS 为个位数的时候用户就会感受到明显的卡顿。

在每一帧里，浏览器都处理了一下的事情：

包含了用户的交互、js 的执行、以及 requestAnimationFrame 的调用，布局计算以及页面的重绘等工作。

假如某一帧里面要执行的任务不多，在不到 16ms（1000/60）的时间内就完成了上述任务的话，那么这一阵就会有一定的空闲时间，这段时间就恰好可以用来执行 requestIdleCallback 的回调：