JavaScript事件循环的输出顺序

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

JavaScript事件循环基本概念

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

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

1. 执行所有同步代码
2. 执行所有微任务
3. 从宏任务队列中取出一个任务执行
4. 再次执行所有微任务
5. 重复步骤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环境)

事件循环执行顺序

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

1. 执行同步代码，直到调用栈为空
2. 执行所有微任务队列中的任务
3. 执行一个宏任务队列中的任务
4. 再次执行所有微任务队列中的任务
5. 重复步骤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. 首先执行同步代码，输出 '1'
2. 遇到 setTimeout，将其回调函数放入宏任务队列
3. 遇到 Promise.then，将其回调函数放入微任务队列
4. 继续执行同步代码，输出 '5'
5. 同步代码执行完毕，开始执行微任务队列中的所有任务，输出 '4'
6. 微任务队列清空后，从宏任务队列中取出一个任务执行，输出 '2'
7. 在这个宏任务中，又遇到 Promise.then，将其回调函数放入微任务队列
8. 当前宏任务执行完毕，再次执行微任务队列中的所有任务，输出 '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. 首先执行同步代码，输出 '1'
2. 遇到第一个 setTimeout，将其回调函数放入宏任务队列
3. 遇到 Promise.then，将其回调函数放入微任务队列
4. 继续执行同步代码，输出 '7'
5. 同步代码执行完毕，开始执行微任务队列中的所有任务，输出 '5'
6. 在微任务中，遇到 setTimeout，将其回调函数放入宏任务队列
7. 微任务队列清空后，从宏任务队列中取出第一个任务执行，输出 '2'
8. 在这个宏任务中，遇到 Promise.then，将其回调函数放入微任务队列
9. 又遇到 setTimeout，将其回调函数放入宏任务队列
10. 当前宏任务执行完毕，执行微任务队列中的所有任务，输出 '3'
11. 微任务队列清空后，从宏任务队列中取出下一个任务执行，输出 '6'
12. 最后从宏任务队列中取出最后一个任务执行，输出 '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

解释：

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

事件循环的可视化

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

浏览器与Node.js事件循环的差异

需要注意的是，浏览器环境和Node.js环境中的事件循环实现略有不同：

浏览器环境：

• 宏任务队列通常只有一个
• 微任务队列在每次宏任务执行后都会被清空

Node.js环境：

• 有多个宏任务队列（Timers、I/O callbacks、Check、Close callbacks等）
• 微任务队列在各个阶段之间执行

总结

JavaScript事件循环的执行顺序可以总结为：

1. 同步代码优先执行
2. 微任务优先于宏任务
3. 每次宏任务执行完毕后，都会执行所有微任务
4. 微任务执行过程中可能产生新的微任务，这些微任务会在同一轮循环中执行
5. 宏任务执行过程中产生的微任务，会在当前宏任务执行完毕后立即执行

理解事件循环对于编写高效的JavaScript代码至关重要，特别是在处理异步操作和避免阻塞主线程时。