requestAnimationFrame
是一个由浏览器提供的 JavaScript API,用于在下一次页面重绘之前执行指定的回调函数。它主要用于执行动画和其他需要高性能的操作,因为它可以让浏览器在执行动画之前做好准备,以获得更流畅的动画效果。
主要特点
-
与屏幕刷新同步:
requestAnimationFrame
会与浏览器的屏幕刷新频率同步,通常是每秒 60 次,这意味着动画会在每秒刷新 60 次,呈现更平滑的效果。 -
自动优化:浏览器会自动暂停或者降低频率执行
requestAnimationFrame
的回调函数,当页面不可见或者被隐藏时,以节省 CPU 和电池消耗。 -
最佳化性能:使用
requestAnimationFrame
可以避免一些问题,比如在不可见的标签页中运行动画会浪费资源,而requestAnimationFrame
可以确保动画只在页面可见时执行。
使用示例
javascript复制代码function animate() { // 执行动画操作 console.log("Animating..."); // 通过 requestAnimationFrame 请求下一帧动画 requestAnimationFrame(animate); } // 开始动画 animate();
兼容性
requestAnimationFrame
的兼容性相对较好,支持大多数现代浏览器,包括 Chrome、Firefox、Safari、Edge 等。在移动设备上也得到了广泛支持。
与 setTimeout 的比较
requestAnimationFrame
与 setTimeout
和 setInterval
相比,有一些显著的优势:
-
更平滑的动画效果:
requestAnimationFrame
会与浏览器的屏幕刷新频率同步,因此能够产生更平滑的动画效果。 -
自动优化:浏览器会自动暂停或者降低频率执行
requestAnimationFrame
的回调函数,以节省 CPU 和电池消耗。 -
在不可见的标签页中运行动画不会浪费资源:
requestAnimationFrame
可以确保动画只在页面可见时执行。