requestIdleCallback 是浏览器提供的空闲时段任务调度 API，允许在主线程空闲时执行低优先级任务，避免阻塞渲染与用户交互，并支持超时保障和 timeRemaining() 时间控制。
JavaScript 中无法真正实现“非阻塞队列”意义上的底层队列（如 Go 的 channel 或 Rust 的 mpsc），因为 JS 是单线程、无系统级线程/协程调度的环境；但你可以借助事件循环机制，设计一个逻辑上非阻塞、高吞吐、不阻塞主线程的任务队列，适用于异步任务编排、节流调度、批量处理等场景。
用 microtask 队列实现轻量级、高优先级任务调度
microtask（如 Promise.then、queueMicrotask）在每次宏任务结束后立即执行，且清空整个 microtask 队列，适合需要“尽快执行但不打断当前同步逻辑”的场景。它比 setTimeout 更及时，开销更低。
示例：一个不阻塞渲染、自动批处理的微任务队列：
class MicrotaskQueue {
#queue = [];
#isFlushing = false;
push(task) {
this.#queue.push(task);
if (!this.#isFlushing) {
this.#isFlushing = true;
queueMicrotask(() => this.#flush());
}
}
#flush() {
const tasks = this.#queue.splice(0, this.#queue.length);
for (const task of tasks) {
try {
task();
} catch (e) {
console.error('Task failed:', e);
}
}
this.#isFlushing = false;
}
}
// 使用：1000 次 push 不会卡住页面
const q = new MicrotaskQueue();
for (let i = 0; i < 1000; i++) {
q.push(() => console.log('task', i));
}
用 requestIdleCallback 实现用户交互友好的后台队列
当任务可延迟、需让位于用户输入或动画时，requestIdleCallback 是更优选择。它在浏览器空闲时段执行，天然防掉帧，适合低优先级批量处理（如日志上报、预加载、状态同步）。
立即学习“Java免费学习笔记（深入）”；
- 支持超时控制（
timeout），避免任务被无限搁置 - 回调参数提供
didTimeout和剩余空闲时间timeRemaining() - 注意：Safari 支持较晚，可用
setTimeout降级
示例：带节流与空闲保障的队列：
class IdleQueue {
#queue = [];
#isRunning = false;
push(task) {
this.#queue.push(task);
this.#schedule();
}
#schedule() {
if (this.#isRunning) return;
this.#isRunning = true;
requestIdleCallback(
(deadline) => this.#runUntilIdle(deadline),
{ timeout: 2000 }
);
}
#runUntilIdle(deadline) {
while (this.#queue.length > 0 && deadline.timeRemaining() > 0) {
const task = this.#queue.shift();
try {
task();
} catch (e) {
console.warn('Idle task error:', e);
}
}
this.#isRunning = false;
if (this.#queue.length > 0) {
this.#schedule(); // 剩余任务继续调度
}
}
}
混合策略：宏任务 + 微任务 + 空闲分片，按优先级分流
真实高性能队列往往不是单一机制，而是分层调度：
-
紧急任务（如响应用户点击后的 UI 反馈）→ 直接同步执行或用
queueMicrotask -
常规异步任务（如 API 请求后更新状态）→ 用
Promise.resolve().then或queueMicrotask -
后台/批量任务（如分析埋点聚合、缓存清理）→ 用
requestIdleCallback或带节流的setTimeout(..., 0) - 避免所有任务挤在同一个 microtask 队列里导致饥饿，可对长任务主动
await Promise.resolve()让出控制权
关键原则：不追求“绝对非阻塞”，而追求可控延迟、可预测调度、不伤害用户体验。
避坑提醒：哪些做法实际会阻塞或低效
- 用
while (queue.length) {...}同步清空大量任务 → 直接卡死主线程 - 过度依赖
setTimeout(fn, 0)→ 进入宏任务队列，延迟不可控，可能堆积成千上万个定时器 - 在 microtask 中递归调用
queueMicrotask→ 可能导致 microtask 饥饿，阻塞后续渲染和事件响应 - 未做错误隔离 → 单个任务异常导致整个队列中断，应为每个任务加
try/catch或封装为 Promise
高性能的本质不是“快”，而是“不抢资源、懂让步、可退让”。JS 的事件循环不是缺陷，而是约束下的设计杠杆——善用它，比绕过它更有效。
