requestIdleCallback适合埋点上报，因其在浏览器空闲时执行，不阻塞用户交互，天然契合低优先级、非阻塞需求；需聚合任务、限制单次处理量、设置超时降级及卸载前兜底。
可以利用 requestIdleCallback 在浏览器空闲时段安全、不阻塞用户交互地执行低优先级埋点上报，避免影响首屏渲染、滚动流畅性或输入响应。
为什么适合埋点上报？
埋点上报通常不要求即时送达，且高频触发时若直接发起网络请求，容易在页面加载、动画、滚动等高负载阶段造成卡顿或请求被节流。而 requestIdleCallback 由浏览器调度，在主线程空闲（如任务队列为空、无待处理的渲染帧）时才执行回调，天然契合“低优先级 + 非阻塞”的需求。
基础用法：封装可排队的上报任务
不要每次埋点都立即调用 requestIdleCallback，应聚合任务并统一调度，避免频繁注册回调：
- 维护一个待上报队列（如数组或 Map），收集事件数据
- 使用一个标志位（如
isScheduling）确保同一时间最多只有一个空闲回调在运行 - 在回调中批量发送（例如合并为一个 POST 请求），并限制单次处理条数（如 ≤ 10 条），防止超时或阻塞空闲窗口
- 若空闲时间不足（
deadline.timeRemaining() < 20），暂存剩余数据，下次再续
增强健壮性：降级与兜底
requestIdleCallback 并非所有环境都支持（如 Safari 旧版本、部分 WebView），且空闲时机不可控，长期未执行会影响数据完整性：
- 设置最大等待时间（如 5 秒），超时后强制触发上报（可用
setTimeout降级） - 监听
visibilitychange或pagehide，在页面卸载前尽可能 flush 剩余数据 - 对关键路径埋点（如支付成功）可同步触发一次轻量上报，空闲回调作为补充，不依赖单一通道
实际示例（简化版）
（注意：生产环境需增加错误重试、序列化、节流防抖等逻辑）
const pendingEvents = [];
let isScheduling = false;
function scheduleUpload() {
if (isScheduling) return;
isScheduling = true;
const sendBatch = (deadline) => {
while (pendingEvents.length && deadline.timeRemaining() > 20) {
// 模拟批量上报逻辑
const batch = pendingEvents.splice(0, 5);
navigator.sendBeacon?.('/log', JSON.stringify(batch)) ||
fetch('/log', { method: 'POST', body: JSON.stringify(batch), keepalive: true });
}
if (pendingEvents.length > 0) {
requestIdleCallback(sendBatch, { timeout: 2000 });
} else {
isScheduling = false;
}
};
requestIdleCallback(sendBatch, { timeout: 2000 });
}
// 埋点入口
function track(event) {
pendingEvents.push(event);
if (!isScheduling) scheduleUpload();
}
