事件循环机制完全解读_微任务与宏任务的执行顺序

JavaScript事件循环中，先执行宏任务，再清空微任务队列。例如：同步代码（宏任务）→ 微任务（如Promise.then）→ 下一个宏任务（如setTimeout）。输出顺序为1→4→3→2，因微任务在当前宏任务后立即执行，而setTimeout属于下一轮宏任务。嵌套微任务也会在本轮处理，如C→A→B所示。掌握此机制对异步编程至关重要。

JavaScript 是单线程语言，所有任务都在一个主线程上执行。为了协调异步操作（如定时器、网络请求、DOM 事件等）的执行，JS 引擎引入了事件循环机制（Event Loop）。理解事件循环的关键在于搞清楚宏任务（Macrotask）和微任务（Microtask）的执行顺序。

什么是宏任务与微任务？

宏任务和微任务是事件循环中两种不同类型的任务队列：

• 宏任务包括：整体代码块、setTimeout、setInterval、I/O 操作、UI 渲染、postMessage、setImmediate（Node.js）等。
• 微任务包括：Promise.then/catch/finally、MutationObserver（浏览器）、process.nextTick（Node.js）、queueMicrotask 等。

每轮事件循环中，JS 引擎会先执行一个宏任务，然后清空当前所有的微任务队列。只有当微任务队列为空时，才会进行下一轮宏任务。

执行顺序规则详解

事件循环遵循以下流程：

• 从宏任务队列中取出第一个任务执行（比如主代码块或 setTimeout 回调）。
• 在该宏任务执行过程中，遇到微任务时，将其加入微任务队列。
• 当前宏任务执行完毕后，立即执行微任务队列中的所有任务，直到队列清空。
• 微任务执行完后，可能触发 UI 渲染（浏览器环境），然后进入下一轮事件循环，取下一个宏任务。

简单说就是：一个宏任务 → 所有微任务 → 下一个宏任务 → 所有微任务……

实际例子解析

来看一段经典代码：

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

输出顺序是：1 → 4 → 3 → 2

蚂蚁PPT

AI在线智能生成PPT

113

查看详情

解释：

• '1' 是同步代码，直接输出。
• setTimeout 是宏任务，被放入宏任务队列。
• Promise.then 是微任务，进入微任务队列。
• '4' 是同步代码，接着输出。
• 当前宏任务（主代码块）执行结束，开始执行微任务队列，输出 '3'。
• 微任务清空后，进入下一轮事件循环，执行 setTimeout 回调，输出 '2'。

嵌套情况下的执行顺序

微任务可以继续注册新的微任务，这些都会在本轮宏任务结束后依次执行：

Promise.resolve().then(() => {
  console.log('A');
  Promise.resolve().then(() => {
    console.log('B');
  });
});
console.log('C');

输出：C → A → B

因为 'A' 输出后又注册了一个微任务 'B'，它仍属于当前宏任务后的微任务阶段，所以会在 'A' 后立即执行，不会等到下一轮宏任务。

基本上就这些。掌握宏任务与微任务的区别以及事件循环的执行节奏，对理解异步编程、避免回调地狱、优化性能都至关重要。不复杂但容易忽略细节。

以上就是事件循环机制完全解读_微任务与宏任务的执行顺序的详细内容，更多请关注php中文网其它相关文章！