requestAnimationFrame和requestIdleCallback

简介

requestAnimationFrame和requestIdleCallback的应用场景并不一样，requestAnimationFrame是为了实现更流畅和性能更好的动画；后者是为了在渲染空闲时间执行优先级不高的操作，以避免阻塞渲染。
两者放到一起进行说明是因为它们都是由浏览器控制执行时机，而不是由开发者通过定时器控制。另外，相对于不使用这两个方法，使用它们都能在一定的情况下获得性能的提升。

在了解这两个方法之前要先回顾一下渲染流水线。

在性能优化中已经讨论过渲染流水线。那么这两个方法的回调在渲染流水线中的什么位置呢？

用户输入事件，包括敲击键盘、点击、滚动等；还有js执行（可能修改样式），都可能触发重新渲染。

渲染完成后，在下一帧绘制之前如果有requestAnimationFrame，则调用之。如果在一帧渲染完后有空闲，就会执行requestIdleCallback注册的回调。什么算是空闲呢？这和浏览器渲染的频率有关系。一般情况下浏览器渲染的频率会和显示器保持一致。通常1s 60帧的帧率可以让肉眼感觉不卡顿。1s ÷ 60 ≈ 16ms。我们以60fps为例，如果浏览器渲染一帧发现不到16ms，那么剩余时间就算是空闲时间。

渲染过程

requestAnimationFrame

通常我们可以通过定时器（setTimeout/setInterval）实现一个动画，但是定时器时间并不精确，如果时间太短，