# 简单介绍 requestIdleCallback 及使用场景
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 379 (opens new window)
Author
requestIdleCallback 维护一个队列，将在浏览器空闲时间内执行。它属于 Background Tasks API (opens new window)，你可以使用 setTimeout 来模拟实现
window.requestIdleCallback =
window.requestIdleCallback ||
function (handler) {
let startTime = Date.now();
return setTimeout(function () {
handler({
didTimeout: false,
timeRemaining: function () {
return Math.max(0, 50.0 - (Date.now() - startTime));
},
});
}, 1);
};
以上实现过于复杂以及细节化，也可以像 swr (opens new window) 一样做一个简单的模拟实现，以下代码见 https://github.com/vercel/swr/blob/8670be8072b0c223bc1c040deccd2e69e8978aad/src/use-swr.ts#L33 (opens new window)
const rIC = window["requestIdleCallback"] || ((f) => setTimeout(f, 1));
在 rIC 中执行任务时需要注意以下几点：
- 执行重计算而非紧急任务
- 空闲回调执行时间应该小于 50ms，最好更少
- 空闲回调中不要操作 DOM，因为它本来就是利用的重排重绘后的间隙空闲时间，重新操作 DOM 又会造成重排重绘
React 的时间分片便是基于类似 rIC 而实现，然而因为 rIC 的兼容性及 50ms 流畅问题，React 自制了一个实现: scheduler (opens new window)
use-swr (opens new window) 中进行资源的 revalidate 时，也是通过 rIC 来提高性能
# 参考
强烈推荐 MDN 与 w3c 上的两篇介绍