17、requestAnimationFrame 和requestIdleCallback 的执行时机
2021-06-06 11:26:38
requestAnimationFrame 和 requestIdleCallback 的执行时机
requestAnimationFrame 的执行时机：
下一次浏览器重绘之前：requestAnimationFrame 的回调函数会在浏览器下一次重绘之前被调用。这意味着它会在当前宏任务的所有微任务执行完毕后，紧接着在渲染之前执行。因此，它非常适合用于动画处理，因为它能够确保动画的每一帧都与浏览器的刷新频率同步，从而提供平滑的动画效果。
示例解析：在你提供的示例中，moveAnimation 函数通过 requestAnimationFrame 递归调用自身，每次都会将 divEle 的 marginLeft 增加 x 的值，并递增 x。当 x 超过 20 时，递归停止。这个过程中，每一帧的动画都会在下一次浏览器重绘之前被更新，从而实现平滑的动画效果。
requestIdleCallback 的执行时机：
浏览器空闲时：requestIdleCallback 的回调函数会在浏览器的空闲时段被调用。这意味着它会在所有宏任务、微任务以及 requestAnimationFrame 回调执行完毕后，如果浏览器还有剩余的时间片，才会执行 requestIdleCallback 的回调。因此，它非常适合用于执行低优先级的长任务，如统计信息收集、非关键性的数据更新等。
执行时机不确定：由于 requestIdleCallback 的执行依赖于浏览器的空闲时间，因此它的执行时机是不确定的。如果浏览器一直忙于处理其他任务，requestIdleCallback 的回调可能会被推迟甚至不被执行。
使用场景：由于执行时机的不确定性，requestIdleCallback 不适合用于需要精确控制执行时间的任务。但是，对于那些可以延迟执行、对性能影响较小的任务，requestIdleCallback 提供了一个很好的机制来优化浏览器的响应性和性能。
总结：
- requestAnimationFrame 适用于需要精确控制动画帧率的场景，它确保每一帧动画都在下一次浏览器重绘之前被更新。
- requestIdleCallback 适用于执行低优先级的长任务，它会在浏览器空闲时执行回调，但执行时机不确定。
在选择使用这两个 API 时，需要根据具体任务的优先级和性能要求来做出决策。
您可能感兴趣问答
热门标签
