请解释一下JavaScript事件循环的输出顺序

lightbulb

题型摘要

JavaScript事件循环是处理异步操作的核心机制。执行顺序为：先执行所有同步代码，然后执行所有微任务，再执行一个宏任务，接着再次执行所有微任务，如此循环。微任务（如Promise.then）优先级高于宏任务（如setTimeout），每次宏任务执行后都会清空微任务队列。async/await本质上是Promise的语法糖，遵循相同的微任务规则。浏览器和Node.js的事件循环实现略有差异，但基本原理相同。

JavaScript事件循环的输出顺序

JavaScript事件循环是JavaScript处理异步操作的核心机制，理解它对于掌握JavaScript的执行顺序至关重要。我将从基本概念到具体执行顺序进行详细解释。

JavaScript事件循环基本概念

JavaScript是单线程语言，意味着它一次只能执行一个任务。但为了处理网络请求、用户交互等耗时操作而不阻塞主线程，JavaScript使用了事件循环机制。

事件循环的基本工作原理是：

执行所有同步代码
执行所有微任务
从宏任务队列中取出一个任务执行
再次执行所有微任务
重复步骤3-4

宏任务与微任务

JavaScript中的异步任务分为两类：宏任务(Macrotask)和微任务(Microtask)。

宏任务(Macrotask)：

setTimeout
setInterval
setImmediate (Node.js环境)
requestAnimationFrame
I/O操作
UI渲染

微任务(Microtask)：

Promise.then/catch/finally
async/await
MutationObserver
queueMicrotask
process.nextTick (Node.js环境)

事件循环执行顺序

事件循环的执行顺序可以概括为以下步骤：

执行同步代码，直到调用栈为空
执行所有微任务队列中的任务
执行一个宏任务队列中的任务
再次执行所有微任务队列中的任务
重复步骤3-4，形成循环

这种执行顺序意味着微任务优先级高于宏任务，每次宏任务执行完毕后，都会检查并执行所有微任务。

典型代码示例分析

让我们通过一个典型的例子来理解事件循环的输出顺序：

console.log('1');

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

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

console.log('5');

输出顺序是：1, 5, 4, 2, 3

解释：

首先执行同步代码，输出 '1'
遇到 setTimeout，将其回调函数放入宏任务队列
遇到 Promise.then，将其回调函数放入微任务队列
继续执行同步代码，输出 '5'
同步代码执行完毕，开始执行微任务队列中的所有任务，输出 '4'
微任务队列清空后，从宏任务队列中取出一个任务执行，输出 '2'
在这个宏任务中，又遇到 Promise.then，将其回调函数放入微任务队列
当前宏任务执行完毕，再次执行微任务队列中的所有任务，输出 '3'

更复杂的例子

让我们看一个更复杂的例子：

console.log('1');

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

Promise.resolve().then(() => {
  console.log('5');
  setTimeout(() => {
    console.log('6');
  }, 0);
});

console.log('7');

输出顺序是：1, 7, 5, 2, 3, 6, 4

解释：

首先执行同步代码，输出 '1'
遇到第一个 setTimeout，将其回调函数放入宏任务队列
遇到 Promise.then，将其回调函数放入微任务队列
继续执行同步代码，输出 '7'
同步代码执行完毕，开始执行微任务队列中的所有任务，输出 '5'
在微任务中，遇到 setTimeout，将其回调函数放入宏任务队列
微任务队列清空后，从宏任务队列中取出第一个任务执行，输出 '2'
在这个宏任务中，遇到 Promise.then，将其回调函数放入微任务队列
又遇到 setTimeout，将其回调函数放入宏任务队列
当前宏任务执行完毕，执行微任务队列中的所有任务，输出 '3'
微任务队列清空后，从宏任务队列中取出下一个任务执行，输出 '6'
最后从宏任务队列中取出最后一个任务执行，输出 '4'

async/await 中的事件循环

async/await 本质上是 Promise 的语法糖，它们遵循相同的微任务规则：

async function async1() {
  console.log('1');
  await async2();
  console.log('2');
}

async function async2() {
  console.log('3');
}

console.log('4');

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

async1();

new Promise(resolve => {
  console.log('6');
  resolve();
}).then(() => {
  console.log('7');
});

console.log('8');

输出顺序是：4, 1, 3, 6, 8, 2, 7, 5

解释：

首先执行同步代码，输出 '4'
遇到 setTimeout，将其回调函数放入宏任务队列
调用 async1()，输出 '1'
在 async1 中遇到 await async2()，执行 async2()，输出 '3'
await 将 async1 剩余部分放入微任务队列
继续执行同步代码，遇到 Promise，输出 '6'
Promise 的 then 回调被放入微任务队列
继续执行同步代码，输出 '8'
同步代码执行完毕，开始执行微任务队列中的所有任务：
- 首先执行 async1 剩余部分，输出 '2'
- 然后执行 Promise 的 then 回调，输出 '7'
微任务队列清空后，从宏任务队列中取出任务执行，输出 '5'

事件循环的可视化

下面使用 Mermaid 流程图来可视化事件循环的执行过程：

--- title: JavaScript事件循环流程 --- graph TD A[开始] --> B[执行同步代码] B --> C[调用栈是否为空?] C -->|否| B C -->|是| D[执行所有微任务] D --> E[微任务队列是否为空?] E -->|否| D E -->|是| F[宏任务队列是否为空?] F -->|否| G[执行一个宏任务] G --> D F -->|是| H[结束]