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

程一诺

发布时间：2026-10-15| 5人浏览过

原创

JavaScript采用单线程模型，依赖事件循环（Event Loop）机制处理异步操作。理解同步任务、宏任务（Macrotask）与微任务（Microtask）的队列优先级，是解决异步代码执行顺序问题的关键。本文将结合代码实例，详细拆解从同步代码执行到各类回调触发的完整流程。

事件循环的基本原理

JavaScript运行时环境的核心是一个持续运行的事件循环。其基本工作流程如下：

执行栈（Call Stack）：同步代码按顺序压入执行栈并立即执行。
任务队列（Task Queue）：当遇到异步操作（如定时器、网络请求）时，浏览器或Node.js会将回调函数放入相应的队列中，不会阻塞当前主线程的执行。
循环检测：每当执行栈清空（即所有同步任务完成），事件循环机制会检查任务队列。如果有待处理的宏任务，则取出一个放入执行栈；随后，它会优先清空当前的微任务队列。

这种机制确保了高优先级的响应（如UI更新、Promise决议）能被尽快处理，同时维持了JavaScript的单线程特性。如果某个任务执行时间过长，会阻塞后续任务的执行，因此在开发长耗时任务时，应考虑将其拆分或使用Web Worker等技术。

任务类型与队列区分

为了更精确地控制执行顺序，JavaScript将异步任务细分为宏任务和微任务两类。理解它们的区别对于编写可预测的代码至关重要。

3.1 同步任务与异步任务

同步任务：在主线程上排队执行，前一个任务完成后才能执行下一个。例如：console.log()、变量声明等。
异步任务：不进入主线程，而是进入任务队列，只有主线程空闲时才会被读取执行。包括定时器（setTimeout, setInterval）、DOM事件、Ajax请求等。

虽然伪代码可以简单表示为无限循环等待消息，但实际引擎的实现更为复杂，涉及多个队列的管理：

while (queue.waitForMessage()) {
    queue.processNextMessage();
}

3.2 宏任务与微任务

这是事件循环中决定执行顺序的关键概念：

宏任务（Macrotask）：代表较大的工作单元。典型例子包括：setTimeout、setInterval、I/O操作、UI渲染（在部分环境中）。每次事件循环只执行一个宏任务。
微任务（Microtask）：代表较小的、紧急的工作单元。典型例子包括：Promise.then/catch/finally回调、MutationObserver、async/await内部的异步逻辑。在当前宏任务结束后、下一个宏任务开始前，微任务队列会被完全清空。

核心规则：在一个宏任务执行期间，如果产生了新的微任务，它们会在同一个宏任务结束后立即执行，而不是等到下一个宏任务。

代码执行顺序深度解析

通过具体的代码片段，我们可以清晰地观察事件循环如何处理不同类型的任务。

案例一：基础混合场景

考虑以下代码的执行流程：

console.log('1');

setTimeout(function() {
    console.log('2');
    Promise.resolve().then(function() {
        console.log('3');
    });
}, 0);

Promise.resolve().then(function() {
    console.log('4');
});

console.log('5');

执行步骤分析：

同步执行阶段：
执行 console.log('1')，输出 1。
遇到 setTimeout，设定回调将在未来某个时刻执行，暂不运行，将其注册到宏任务队列。
遇到 Promise.resolve().then，将第一个回调函数注册到微任务队列。
执行 console.log('5')，输出 5。
此时主线程同步代码执行完毕，调用栈为空。
微任务清理阶段：
检查微任务队列，发现有一个任务（输出'4'）。执行它，输出 4。
微任务队列为空。
下一个宏任务阶段：
从宏任务队列取出 setTimeout 的回调。
执行回调内代码：先输出 2。
在回调内部遇到新的 Promise.resolve().then，将其注册为新的微任务。
setTimeout 回调本身结束（作为一个宏任务单元结束）。
再次微任务清理：
检查微任务队列，发现刚注册的输出'3'的任务。执行它，输出 3。

最终输出结果： 1 5 4 2 3

案例二：嵌套微任务与延迟任务

另一个常见的陷阱场景：

console.log('1');

setTimeout(function() {
    console.log('2');
    Promise.resolve().then(function() {
        console.log('3');
    });
}, 0);

Promise.resolve().then(function() {
    console.log('4');
    setTimeout(function() {
        console.log('5');
    }, 0);
});

console.log('6');

执行步骤分析：

第一轮同步代码：
输出 1。
注册宏任务A（输出'2'及后续逻辑）。
注册微任务A（输出'4'及后续逻辑）。
输出 6。
第一轮微任务清理：
执行微任务A：输出 4。
在微任务A内部，注册宏任务B（输出'5'）。
微任务A执行完毕。
第二轮宏任务执行：
取出宏任务A执行：输出 2。
在宏任务A内部，注册微任务B（输出'3'）。
宏任务A结束。
第二轮微任务清理：
执行微任务B：输出 3。
微任务队列为空。
第三轮宏任务执行：
取出宏任务B执行：输出 5。

最终输出结果： 1 6 4 2 3 5

现代异步编程实践

除了基础的 Promise，async/await 语法糖进一步简化了异步代码的可读性，但其底层依然遵循上述事件循环规则。

Promise：将异步操作封装为对象，通过链式调用 .then() 处理结果，避免了“回调地狱”。其回调属于微任务。
async/await：ES2017引入的标准写法。async 函数总是返回一个 Promise。await 关键字会暂停函数的执行，直到右侧的 Promise settled（解决或拒绝），并将控制权交还给事件循环去处理其他任务。因此，await 之后的代码本质上仍然是在微任务或后续的宏任务队列中被调度执行的。

在实际开发中，合理利用微任务的高优先级特性可以用于在DOM更新后执行特定逻辑，或者确保某些数据状态在同步渲染前已经就绪。同时，意识到长时间运行的微任务也会阻塞界面渲染，需保持微任务执行的轻量性。