window
提供一个 API,优化动画的执行。
语法:
const id = window.requestAnimationFrame(callback);
传入一个回调函数 callback
,在下一次重绘的时候执行。
浏览器重绘频率一般是60 fps(frame per second),也就是一秒钟执行60帧动画。
它的优点有:
- 执行流畅。
requestAnimationFrame
执行时间和重绘频率一致,相当于自带函数节流功能。 - 执行准确。浏览器重绘频率定好的,不会像
setTimeout
需要主流程执行完毕再执行。 - 性能优化。在页面 hidden 的情况下,
requestAnimationFrame
不会执行,节省性能。
取消 requestAnimationFrame
:
window.cancelAnimationFrame(id)
我是 Pandy,一个喜欢英语的程序猿 👨💻
关注公众号 Yopth,回复「加群」,加入「英文技术翻译互助群」,我们加入一起充电英语 🔌
Reference
[1] https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
[2] https://blog.csdn.net/xuanhun521/article/details/112793135