建议使用requestAnimationFrame替代定时器setInterval、setTimeout完成页面动画

requestAnimationFrame是一种用于优化网页动画效果的方法，它可以让动画在浏览器的合适帧率下运行，即按屏幕的刷新帧率进行动画与机器同步，
requestAnimationFrame 的回调函数会在浏览器下一次重绘之前被调用，requestAnimationFrame不属于微宏任务，并不直接参与任务队列管理，它有自己的回调队列，这个队列会在浏览器进行下一次重绘之前被清空并执行其中的所有回调函数，是浏览器提供的一种特殊的动画绘制机制，提供更流畅和高效的动画体验。

在本文中，我们将深入探讨requestAnimationFrame的原理、用法以及与传统定时器的区别。

一、requestAnimationFrame的原理

requestAnimationFrame是浏览器提供的一种用于执行动画的API，它利用浏览器的刷新频率来决定何时绘制下一帧。它的工作原理如下：

当调用requestAnimationFrame时，浏览器会在下一次重绘之前调用回调函数。
回调函数中的动画逻辑会在每一帧绘制时执行。
浏览器会自动优化动画的执行，确保动画在合适的帧率下运行。

二、使用requestAnimationFrame 使用

requestAnimationFrame来创建动画非常简单，主要包括以下几个步骤：

定义一个更新动画的函数，通常称为动画循环函数。
在动画循环函数中，使用requestAnimationFrame调度下一次绘制。
在每次绘制时更新动画的状态，例如改变元素的位置或样式。
根据动画的需求，可以设置动画的开始和结束条件，以及相应的回调函数。

三、requestAnimationFrame与传统定时器的区别 与传统的定时器相比，requestAnimationFrame具有以下几个优点：

更高的性能：requestAnimationFrame利用浏览器的刷新频率来决定动画的绘制时机，可以更加精确地控制动画帧率，避免过度占用CPU资源。
更好的节能效果：由于requestAnimationFrame会根据浏览器的刷新频率来调用回调函数，它可以在页面不可见或处于后台时自动停止动画，从而减少不必要的能耗。
与屏幕刷新同步：使用requestAnimationFrame可以保证动画与屏幕的刷新同步，避免因刷新间隔不一致而导致的动画卡顿或不流畅的问题。

四、最佳实践和注意事项 在使用requestAnimationFrame时，还需要考虑以下最佳实践和注意事项：

避免重复请求：在每次绘制前，确保只调用一次requestAnimationFrame，避免不必要的重复请求。

利用时间戳：requestAnimationFrame的回调函数会接收一个时间戳参数，可以利用它来计算动画的进度和控制动画的速度。

使用CSS动画：对于简单的动画效果，应优先考虑使用CSS动画，因为浏览器可以在硬件加速下进行优化，提供更好的性能和流畅度。

考虑兼容性：尽管大多数现代浏览器都支持requestAnimationFrame，但为确保兼容性，仍需提供备用方案或使用Polyfill库。