requestAnimationFrame 是 html 提供动画优化的一个 api

requestAnimationFrame 比起 setTimeout、setInterval的优点

  • requestAnimationFrame最大的优势是由浏览器来决定回调函数的执行时机，即紧跟浏览器的刷新步调。不会引起丢帧

**

  • 使用setTimeout实现的动画，当页面被隐藏(隐藏的)或最小化(后台标签页)时，setTimeout仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，而且还浪费 CPU 资源和电池寿命。而requestAnimationFrame则完全不同，当页面处于未激活的状态下，该页面的屏幕绘制任务也会被浏览器暂停，因此跟着浏览器步伐走的requestAnimationFrame也会停止渲染，

场景：
使用 requestAnimationFrame 解决如何渲染几万条数据页面卡顿的问题