高频异步任务需合理调度：requestAnimationFrame适用于视觉更新，Promise微任务+标志位实现每帧一次，setTimeout用于节流/防抖，requestIdleCallback处理低优先级后台任务。
高频触发的异步任务（比如 resize、scroll、input 或鼠标移动事件）如果每次触发都立即执行回调，容易造成任务堆积、主线程阻塞、UI 卡顿甚至内存压力。JavaScript 本身不提供“事件循环队列管理”的 API，但可以通过合理调度任务进入微任务（microtask）或宏任务（macrotask）队列，并结合节流（throttle）、防抖（debounce）、requestIdleCallback 等策略来控制执行节奏。
用 requestAnimationFrame 控制视觉相关高频任务
对与屏幕刷新强相关的操作（如 DOM 重排、动画更新），requestAnimationFrame 是最优选择：它把任务自动对齐到浏览器下一帧开始前执行，既避免丢帧，又不会抢占渲染时机。
- 它不是微任务也不是宏任务，而是由浏览器在帧开始时统一调度，天然具备节流效果（通常 60fps ≈ 每 16ms 最多执行一次）
- 适合：计算样式、更新位置、滚动视差、Canvas 绘图等
- 示例：监听
scroll并平滑更新吸顶状态
function handleScroll() {
if (pending) return;
pending = true;
requestAnimationFrame(() => {
// 实际处理逻辑
updateStickyHeader();
pending = false;
});
}
window.addEventListener('scroll', handleScroll);
用 Promise.microtask + 标志位实现“每帧最多一次”执行
当需要更轻量、不依赖渲染帧（比如纯数据处理或非视觉逻辑），可以用微任务队列 + 状态标记模拟“去重+延迟执行”，确保同一批次高频触发只执行最后一次：
- 利用
Promise.resolve().then()将任务推入微任务队列 - 用布尔标志（如
isQueued）避免重复入队 - 适合：输入校验、搜索建议触发、状态聚合等
function scheduleUpdate(data) {
if (isQueued) return;
isQueued = true;
Promise.resolve().then(() => {
processLatestData(data); // 注意：需自行保存最新 data
isQueued = false;
});
}
用 setTimeout + 时间窗口做简单节流或防抖
对不需要严格帧同步、但需限制频率的任务，setTimeout（宏任务）仍是清晰可靠的选择：
立即学习“Java免费学习笔记（深入）”；
- 节流（throttle）：固定时间间隔内最多执行一次，适合持续性行为（如拖拽、滚动位置上报）
- 防抖（debounce）：等待触发停止后延迟执行，适合终态响应（如搜索框输入完成）
- 注意：避免在大量事件中反复创建定时器，应复用 clearTimeout + 闭包缓存 timer ID
function throttle(fn, delay) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last >= delay) {
fn.apply(this, args);
last = now;
}
};
}
用 requestIdleCallback 处理低优先级后台任务
对于可延迟、非紧急、耗时较长的异步工作（如日志上报、预加载、复杂计算），requestIdleCallback 让浏览器在空闲时段自动调度，完全不干扰用户交互和渲染：
- 任务在帧末尾空闲时执行，超时会强制执行（默认 1s，可设
timeout） - 返回的
deadline对象能查剩余空闲时间，支持中断长任务 - 注意：兼容性需考虑（IE 不支持，可用
setTimeout降级）
while (deadline.timeRemaining() > 0 && tasks.length > 0) {
performNextTask();
}
if (tasks.length > 0) {
requestIdleCallback(doBackgroundWork);
}
}
requestIdleCallback(doBackgroundWork);
