JavaScript事件循环的工作原理
宏任务与微任务的时间线
在前端和后端的执行模型中，事件循环是保障异步操作按顺序执行的核心机制。在一个事件循环的轮次里，首先会执行一个宏任务队列中的代码，然后统一处理微任务队列，最后再进入渲染阶段。因此，理解两者的时间线是进行性能调优的关键。
宏任务包含如setTimeout、setInterval、以及浏览器的I/O相关回调等。这些任务在一个轮次结束时才会继续进入下一轮循环。
微任务通常来自于Promise.then、queueMicrotask等，它们会在当前宏任务结束后、下一次渲染之前被执行完毕，因此可能对输出顺序和UI响应产生直接影响。
console.log('A');
setTimeout(() => console.log('B'), 0); // 宏任务
Promise.resolve().then(() => console.log('C')); // 微任务
console.log('D');
/* 输出顺序：A、D、C、B */
主线程与任务队列的关系
浏览器主线程承担执行栈上的同步任务，同时管理多种任务队列。宏任务队列负责执行如定时器、I/O 等外部事件的回调，而微任务队列负责在当前宏任务结束后尽快执行的回调。
在一次循环中，执行栈清空之前，系统会不断从微任务队列中拉出任务执行，直到微任务也执行完毕。紧接着会触发必要的渲染，这就意味着微任务对UI更新的时序有直接影响。
Promise.resolve().then(() => console.log('微任务A')).then(() => console.log('微任务B'));
console.log('同步代码');
/* 输出顺序：同步代码 → 微任务A → 微任务B */
事件循环的阶段与执行顺序
宏任务阶段的处理流程
在浏览器中，事件循环的核心是通过事件队列逐步推进：从宏任务队列获取回调并执行；如果执行过程中产生了新的宏任务，它会被放入宏任务队列等待下一轮处理。此阶段的关键点是避免在宏任务中进行长时间阻塞。
执行阶段结束后，系统会检查是否有微任务需要执行，并在下一轮渲染前把它们全部执行完毕。若页面需要重新排布或绘制，浏览器会进入渲染阶段。
setTimeout(() => {console.log('宏任务回调');
}, 0);
console.log('同步点');
/* 输出顺序：同步点 → 宏任务回调 */
微任务阶段的处理与清空
每个宏任务结束后，事件循环会进入一个微任务清空阶段，在这个阶段会重复执行微任务队列中的所有回调，直到队列为空为止。只有当微任务都完成后，才会触发浏览器的渲染工作。
微任务越多，越可能影响渲染时机，因此在设计异步逻辑时应注意避免无限制的微任务拼接，以防止UI卡顿或频繁重排。
Promise.resolve().then(() => console.log('微任务1'));
Promise.resolve().then(() => console.log('微任务2'));
console.log('同步输出');
/* 输出顺序：同步输出 → 微任务1 → 微任务2 */
从宏任务/微任务到性能优化的实战要点
如何设计避免渲染阻塞
为了让应用在高频率更新中保持流畅，需要控制渲染时机与异步执行的平衡。合理使用requestAnimationFrame来安排跟踪渲染的任务，可以将工作负载分散到每帧的时间窗内，避免长时间占用主线程。
将高成本计算分解为小任务，并在每帧内完成部分工作，可以让UI绘制与用户交互保持响应。必要时利用requestIdleCallback来执行低优先级任务。
function heavyWorkFrame() {// 将任务分解为多帧执行const start = performance.now();while (performance.now() - start < 16) {// 小的工作单元}if (更多工作) {requestAnimationFrame(heavyWorkFrame); // 下一帧继续}
}
requestAnimationFrame(heavyWorkFrame);
使用微任务时机与边界风险
微任务在当前宏任务结束后执行，如果频繁地在循环中堆积微任务，可能会导致事件循环被微任务占据，延迟渲染与用户交互响应。因此，应该将微任务用于需要尽快完成的但不宜无限制扩展的任务。
避免在同一轮中持续创建大量微任务或在微任务内进行阻塞性计算。必要时，将部分逻辑转移到宏任务或分拆成独立的事件回调。
// 不推荐：在微任务中进行大量循环
Promise.resolve().then(() => {while (i < 1e9) { i++; } // 阻塞性计算
});
浏览器环境中的任务循环驱动因素
浏览器事件循环中的渲染与调度点
在浏览器端，渲染阶段通常发生在微任务清空之后，但在某些情况下浏览器可能会因页面可见性、动画或输入产生额外的渲染工作。把UI响应放在前端的关键目标，是确保鼠标点击和滚动等交互事件尽可能保持平滑。
动画帧的节奏通常与显示器刷新率对齐，因此使用requestAnimationFrame能更好地协调动画与绘制，降低抖动和卡顿的风险。
let start;
function frame(ts) {if (!start) start = ts;// 在当前帧内处理渲染相关的少量任务if (ts - start < 16) {// 继续优化} else {start = ts;}requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
Node.js中的任务调度差异与实践
在服务器端的Node.js中，事件循环模型也包含阶段队列，但没有浏览器那样的渲染阶段。Node.js引入了process.nextTick、queueMicrotask以及setImmediate等机制，影响任务的执行顺序与性能。
process.nextTick会在当前操作完成后、<'microtask'阶段>之前执行，因此它的优先级高于常规微任务，能够提前处理关键清理工作或依赖于当前栈的操作。
console.log('1');
process.nextTick(() => console.log('2: nextTick'));
Promise.resolve().then(() => console.log('3: microtask'));
console.log('4');
/* 输出顺序：1 → 2: nextTick → 4 → 3: microtask */
前端与Node中的事件循环差异要点回顾
跨环境的一致性与差异点
在前端浏览器中，渲染和交互响应是性能优化的核心考量，微任务与宏任务的安排直接影响到页面的流畅度。相比之下，Node.js的重点在于任务调度与I/O密集型处理，setImmediate与process.nextTick的选择关系到吞吐量与延迟。
正确地将重计算、数据处理和网络请求分配到不同的任务层级，可以显著提升应用在不同环境中的表现。理解事件循环与任务队列的分工，是提升性能的关键步骤。
// 在浏览器中优先使用requestAnimationFrame来协调绘制
window.requestAnimationFrame(() => {// 帧内更新
});// 在Node中搭配queueMicrotask与setImmediate实现高效调度
queueMicrotask(() => console.log('微任务阶段'));
setImmediate(() => console.log('下一轮事件循环的后续任务'));
