requestAnimationFrame是个什么东西

这是我参与新手入门的第三篇文章

requestAnimationFrame是HTML5中新添加的一个专门用于处理动画的API，使用方法也非常简单，只要传入需要处理的那一帧的处理函数即可

    const frame = requestAnimationFrame(()=>{
        // 渲染的内容
        console.log(1);
    })
    console.log(frame); // 一串数字，是回调函数的唯一标识
    cancelAnimationFrame(frame) //取消
复制代码

该API中设置的函数会在未来的特定时刻调用，可以使用cancelAnimationFrame这个API来取消这个函数的调用。

requestAnimationFrame有什么优势

在JS中一般会采用定时器setTimeout或者setInterval来处理动画。通过设置一个固定的时间改变内存中某个属性的值，之后等到显示器刷新时重新绘图将动画的下一帧内容显示在屏幕上，这就导致了一些问题：比如任务队列中定时器处理的时间不固定，渲染时频率和显示器刷新的频率不一致导致的丢帧，定时器持续执行。这些问题在requestAnimationFrame都会得到解决。

requestAnimationFrame在渲染动画时，首先会获取到显示器的刷新频率(一般是60Hz),然后根据这个结果设置一个与之相等的渲染间隔，保证在这个时间点之前执行传入的函数，然后重新渲染，刷新屏幕，更新显示内容。这样做保证了每次刷新的时间是固定的，而且渲染的时间间隔紧紧贴合显示器刷新频率，也不会出现丢帧的问题。

除此之外，requestAnimationFrame在动画对内存的使用上也做了优化。当执行完函数后，requestAnimationFrame会一次性处理好所有的DOM变更并绘制好，避免了定时器可能会出现的在两次屏幕刷新之间调用多次的情况。而且遇到无需渲染的地方，requestAnimationFrame也不会去重新渲染，减少了对计算机性能的消耗。当打开多tab页时，如果切换到别的tab页上，定时器函数还是会继续执行，而requestAnimationFrame会停止执行，减少了对CPU的消耗。