requestAnimationFrame 深度理解

requestAnimationFrame 深度学习(请求动画帧)

定义

• requestAnimationFrame 是一个浏览器提供的用于在下次重绘之前调用指定的回调函数的方法。它主要用于创建流畅的动画效果，通过与浏览器的刷新率同步来优化性能和效率。
• 执行时机 是每一帧浏览器进行渲染之前，是一个高优的任务。
• 同步执行：requestAnimationFrame 会告诉浏览器你希望执行一次重绘，并要求浏览器在下一次重绘之前调用指定的回调函数。这样可以确保你的动画帧与浏览器的刷新频率同步。
• 节省资源：当页面被最小化或不可见时（比如切换到其他标签页），浏览器会自动降低 requestAnimationFrame 的调用频率，甚至是暂停，这有助于节省系统资源。
• 参数：该方法接受一个回调函数作为参数，这个回调函数会在浏览器准备重绘画面时被调用。回调函数会被传入一个参数，表示回调被执行的时间点的时间戳（高精度时间），单位是毫秒，但与 Date.now() 返回的时间戳不同，它是相对于页面加载开始的时间。
• 取消 cancelAnimationFrame(xx)

实战

React fiber

问询模式

1. 使用问询模式 解决 setInterval 时间不准确的问题
2. 递归调用