requestAnimationFrame与setTimeout的区别

Posted 2021-02-12 codejoker

以往常常使用 setTimeout 以及 setInterval 方法来制作 javascript 动画，但是这种方式制作的动画经常会由于计时器的特性而带来一些问题。简单地说一下，计时器动画有以下几个问题。

• 间隔时间不精确，可能被阻塞。计时器的间隔指的是将回调函数推入任务队列的间隔时间，任务队列中的任务只有在主线程任务执行完毕后才会被执行。
• 计时器动画的间隔时间如果设定过短就会出现过度渲染占用大量资源，如果设定过长就会影响动画的流畅度。只能够估计合适的时间间隔。
• 多数浏览器对于计时器动画没有优化。

使用 requestAnimationFrame 方法来定义动画就不会出现以上这些问题。

• requestAnimationFrame 动画的帧数是由系统根据当前页面是否可见，CPU 的占用情况等等来决定的，可以最大化地利用系统性能。
• 浏览器对 requestAnimationFrame 动画进行了优化。