17370845950

事件循环是JavaScript运行时环境实现异步编程的核心机制，由调用栈、宏任务队列和微任务队列协同工作，每轮执行一个宏任务后清空所有微任务，微任务优先级高于宏任务且不触发UI渲染。

JavaScript 的事件循环（Event Loop）是它实现异步编程的核心机制，负责协调同步代码执行、回调队列和任务调度。它不是 JavaScript 引擎本身的语法特性，而是运行时环境（如浏览器或 Node.js）提供的底层模型。

事件循环的基本结构

事件循环围绕一个“调用栈”（Call Stack）和多个“任务队列”运转。主要包含：

• 调用栈：执行同步代码，遵循后进先出（LIFO）原则；
• Web API 环境（如 setTimeout、fetch、DOM 事件）：在后台处理异步操作，完成后将回调推入对应队列；
• 宏任务队列（Macrotask Queue）：存放 setTimeout、setInterval、I/O、UI 渲染等任务；
• 微任务队列（Microtask Queue）：存放 Promise.then/catch/finally、queueMicrotask()、MutationObserver 回调等；

事件循环每轮先执行一个宏任务，然后清空整个微任务队列（所有当前可执行的微任务），再进入下一个宏任务。

宏任务与微任务的执行顺序

这是理解调度行为的关键。微任务总是在当前宏任务结束后、下一个宏任务开始前执行，且具有更高优先级。

• 一次事件循环 = 执行一个宏任务 + 执行所有待处理微任务；
• 微任务可以递归添加新微任务（例如在 Promise.then 中再创建 Promise），它们会全部在本轮结束前执行完毕；
• 宏任务之间一定会穿插 UI 渲染（浏览器中），而微任务不会触发渲染，适合做轻量、高响应的逻辑（如状态更新、错误捕获）。

常见调度场景示例

下面这段代码能清晰体现执行顺序：

console.log(1);
setTimeout(() => console.log(2), 0); // 宏任务
Promise.resolve().then(() => console.log(3)); // 微任务
console.log(4);

输出结果是：1 → 4 → 3 → 2。原因：

• 1 和 4 是同步代码，立即执行；
• Promise.then 被加入微任务队列，当前宏任务（脚本整体）结束后立刻执行；
• setTimeout 回调被加入宏任务队列，在下一轮事件循环才执行。

Node.js 与浏览器的细微差异

两者都遵循事件循环模型，但阶段划分更精细（Node.js 有 timer、pending callbacks、idle/prepare、poll、check、close callbacks 六个阶段）。例如：

• Node.js 中 setImmediate() 属于 check 阶段，在 poll 阶段之后；
• process.nextTick() 不属于任何阶段，而是在每个阶段切换前优先执行，优先级高于微任务；
• 浏览器没有 setImmediate 和 nextTick，但有 queueMicrotask() 提供标准微任务入口。

实际开发中，应优先使用 Promise 和 queueMicrotask() 保证跨平台一致性。