requestIdleCallback适合日志上报，因其在浏览器空闲时低优先级执行，不阻塞主线程与用户交互；需设timeout降级保障必达，且不可用于关键日志。
可以用 requestIdleCallback 在浏览器空闲时段异步、低优先级地上报非关键日志，避免阻塞主线程和影响用户交互。
为什么适合日志上报
日志上报通常不要求实时性，且频繁调用可能拖慢页面响应。requestIdleCallback 会在浏览器空闲时（如任务队列清空、无用户输入、未在渲染帧中）执行回调，天然契合“不紧急+不干扰”的需求。
基础用法：封装一个懒上报函数
把日志暂存，等空闲时批量发送：
const pendingLogs = [];
function queueLog(log) {
pendingLogs.push(log);
// 只有当前没挂起任务时才注册
if (!pendingLogs._idleHandle) {
pendingLogs._idleHandle = requestIdleCallback(flushLogs, {
timeout: 2000 // 强制两秒内执行，防日志积压
});
}
}
function flushLogs(deadline) {
// 每次最多处理 5 条，避免超时
while (pendingLogs.length > 0 && deadline.timeRemaining() > 10) {
const log = pendingLogs.shift();
navigator.sendBeacon?.('/log', JSON.stringify(log)) ||
fetch('/log', { method: 'POST', body: JSON.stringify(log), keepalive: true });
}
if (pendingLogs.length > 0) {
// 还有剩，继续挂起
pendingLogs._idleHandle = requestIdleCallback(flushLogs, { timeout: 2000 });
} else {
delete pendingLogs._idleHandle;
}
}
注意事项和优化点
-
降级兼容：Safari 旧版、部分安卓 WebView 不支持 requestIdleCallback，需 fallback 到
setTimeout(..., 0)或Promise.resolve().then() -
避免无限挂起：务必设
timeout，防止页面长期无空闲导致日志丢失 - 慎用 keepalive / sendBeacon：确保日志体小（
-
页面卸载前兜底：监听
beforeunload或visibilitychange（hidden 时），立即尝试 flush 剩余日志
结合实际场景的建议
比如记录用户点击但非核心埋点（如“帮助按钮点击”）、组件加载耗时、非错误的性能指标：
立即学习“Java免费学习笔记（深入）”；
- 不要在
onClick中直接发请求，而是queueLog({ type: 'click', target: 'help-btn' }) - 避免在
useEffect或mounted里密集打点，统一走队列 - 错误日志仍建议同步 + try/catch +
fetch(..., { keepalive: true })，不走 idle
