深入解析 JavaScript 事件循环：宏任务与微任务的执行顺序

单线程背景与设计权衡

JavaScript 的核心设计目标是与用户交互（DOM操作）及脚本逻辑，这决定了它必须是单线程的。如果在主线程中允许同时修改 DOM，多线程会导致渲染结果不确定和内存冲突。因此，JS 引擎在执行时独占 UI 线程，确保数据一致性。

虽然 HTML5 Web Worker 引入了多线程能力，但子线程完全受主线程控制且禁止访问 DOM，仅用于后台计算。为了在不阻塞 UI 渲染的前提下利用多核 CPU 优势，同时解决单线程同步等待导致的效率问题，JavaScript 采用了事件循环机制来处理异步操作。

同步、异步与任务队列分类

在执行栈（Call Stack）清空后，JavaScript 引擎会从任务队列中读取任务。根据来源不同，任务分为两类：

第1步：识别宏任务（Macrotask）

宏任务通常由外部触发或明确的系统级异步请求组成。常见的宏任务包括：

• script（整体代码）
• setTimeout / setInterval
• I/O 操作（如网络请求 Ajax/Fetch）
• UI 交互事件
• setImmediate（Node.js 环境）

宏任务的执行通常涉及特定的异步线程，完成后将回调函数推入队列。

第2步：识别微任务（Microtask）

微任务通常在当前阶段执行完毕后立即触发，无需特定异步线程支持。常见的微任务包括：

• Promise.then / .catch / .finally
• MutationObserver（DOM 变动监听）
• process.nextTick（仅限 Node.js，优先级高于其他微任务）

事件循环一次完整的执行流程

事件循环的基本规则是：每次循环执行一个宏任务，然后清理该宏任务期间产生的所有微任务。只有当微任务队列为空时，才会进行下一轮 UI 渲染（如需）并进入下一个宏任务。

第3步：模拟 Event Loop 执行步骤

以下示例展示了从初始代码到多个定时器回调的执行顺序。请注意 Promise 构造函数内的代码是同步执行的，而 .then 是异步微任务。

console.log('1. 同步代码开始');

setTimeout(function () {
    console.log('2. setTimeout 宏任务开始');
    new Promise(function (resolve) {
        console.log('3. Promise 构造函数（同步）');
        resolve();
    }).then(function () {
        console.log('4. Promise .then 微任务');
    });
}, 0);

new Promise(function (resolve) {
    console.log('5. 第二个 Promise 构造函数（同步）');
    resolve();
}).then(function () {
    console.log('6. 第二个 Promise .then 微任务');
});

setTimeout(function () {
    console.log('7. 第二个 setTimeout 宏任务');
    new Promise(function (resolve) {
        console.log('8. 第三个 Promise 构造函数（同步）');
        resolve();
    }).then(function () {
        console.log('9. 第三个 Promise .then 微任务');
    });
}, 0);

/* 
预期输出顺序：
1. 同步代码开始
5. 第二个 Promise 构造函数（同步）
6. 第二个 Promise .then 微任务
2. setTimeout 宏任务开始
3. Promise 构造函数（同步）
4. Promise .then 微任务
7. 第二个 setTimeout 宏任务
8. 第三个 Promise 构造函数（同步）
9. 第三个 Promise .then 微任务
*/

分析上述过程：

1. 第一次循环：执行同步代码（输出 1），遇到第一个 Promise 其构造函数同步输出（5），其 .then 加入微任务队列；遇到两个 setTimeout，加入宏任务队列。此时微任务队列有 1 项。执行完所有微任务后输出 6。
2. 第二次循环：取出第一个 setTimeout（输出 2），其内部的新 Promise 构造函数同步执行（输出 3），新的 .then 加入微任务队列。执行该微任务输出 4。
3. 第三次循环：取出第二个 setTimeout（输出 7），同理内部同步代码输出 8，微任务输出 9。

定时器的精度与环境差异

尽管设置 setTimeout(fn, 0) 意在“立即”执行，但由于 JS 的单线程特性，回调必须等待当前调用栈清空后才能执行。此外，现代浏览器对定时器有最小间隔限制，HTML5 标准规定不得低于 4 毫秒，旧版浏览器为 10 毫秒。

第4步：Node.js 环境的特殊机制

Node.js 基于 V8 引擎和 libuv 库实现事件循环，其机制比浏览器更复杂，但在理解基础概念时需重点区分 process.nextTick 和 setImmediate：

• process.nextTick：在当前操作完成后、下一次 Event Loop 之前执行。它的优先级高于所有其他微任务。即使嵌套在 setTimeout 中，只要在同一个阶段被调用，也会先于该阶段的微任务执行。
• setImmediate：安排在“I/O 回调”之后执行，本质上属于宏任务的一种变体，但在执行时机上晚于当前的同步代码和微任务。

在实际开发中，若需频繁执行高优先级回调，建议使用 process.nextTick；若需保持界面响应或避免阻塞 I/O，则使用 setImmediate 或 setTimeout。

总结

JavaScript 的事件循环并非简单的队列 FIFO，而是严格遵循“宏任务 -> 全部微任务 -> 下次宏任务”的节奏。掌握这一机制，能有效避免竞态条件和时间偏差带来的 Bug。需要注意的是，Node.js 的 libuv 事件循环包含多个阶段，其行为细节与浏览器环境存在差异，但在微任务优先于宏任务这一核心原则上是一致的。

以上就是深入了解Javascript的事件循环机制的详细内容，更多关于Javascript事件循环机制的资料请关注本站其它相关文章！