javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript事件循环

深度解析JavaScript中事件循环(Event Loop)的执行顺序

作者：豹哥学前端

为什么 setTimeout 明明是 0 毫秒,却要等到最后才执行,这篇文章小编就来和大家详细介绍一下JavaScript中事件循环(Event Loop)的执行机制吧

为什么 setTimeout 明明是 0 毫秒，却要等到最后才执行？

Promise.then 和 setTimeout 到底谁先执行？

面试官总爱问的“事件循环”，今天一篇帮你彻底打通。

1. 从一道经典面试题说起

console.log('1');

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

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

console.log('4');

问：以上代码的输出顺序是什么？

很多人会脱口而出：1 2 3 4 或 1 4 2 3。

正确答案是：1 4 3 2

为什么？这正是事件循环的规则导致的。

2. 事件循环是什么？为什么要它？

JavaScript 是单线程语言，同一时间只能做一件事。但我们需要处理用户点击、网络请求、定时器等异步操作。如果这些操作都排队执行，那网络请求的 200ms 就会让整个页面卡住。

事件循环就是 JS 引擎用来调度同步代码、异步回调、I/O 操作的一套机制，它让 JS 既能保持单线程，又能高效处理异步。

生活类比：

3. 宏任务（MacroTask）与微任务（MicroTask）

在事件循环中，任务被分为两种：宏任务和微任务。它们的执行优先级不同。

3.1 宏任务（MacroTask）

每次从任务队列中取出的一个任务，称为一个宏任务。

常见宏任务：

3.2 微任务（MicroTask）

在当前宏任务执行完成后、下一个宏任务开始前执行的任务。

常见微任务：

3.3 优先级总结

微任务队列 > 宏任务队列

每个宏任务执行完后，会立即清空当前所有的微任务，然后再去取下一个宏任务。

4. 事件循环的工作流程（附流程图）

用文字描述：

  1. 执行一个宏任务（最开始执行的是全局脚本代码）。
  2. 执行过程中如果遇到微任务，就把它添加到微任务队列。
  3. 当前宏任务执行完毕，检查微任务队列。
  4. 依次执行微任务队列中的所有任务（直到清空）。
  5. 执行必要的 UI 渲染（浏览器）。
  6. 从宏任务队列中取出下一个宏任务，重复步骤 1。

流程图（纯文本版）：

┌─────────────────────────┐
│   开始执行宏任务（script）  │
└────────────┬────────────┘
             │
             ▼
┌─────────────────────────┐
│  同步代码执行，遇到微任务入队 │
└────────────┬────────────┘
             │
             ▼
┌─────────────────────────┐
│   宏任务执行完毕          │
└────────────┬────────────┘
             │
             ▼
┌─────────────────────────┐
│   清空当前所有微任务      │
└────────────┬────────────┘
             │
             ▼
┌─────────────────────────┐
│   （可能执行 UI 渲染）    │
└────────────┬────────────┘
             │
             ▼
┌─────────────────────────┐
│   取出下一个宏任务        │
└─────────────────────────┘

5. 用代码验证每一步

示例 1：基本顺序

setTimeout(() => console.log('宏任务'), 0);
Promise.resolve().then(() => console.log('微任务'));
console.log('同步');
// 输出：同步 → 微任务 → 宏任务

示例 2：微任务中注册新微任务

Promise.resolve().then(() => {
  console.log('微任务1');
  Promise.resolve().then(() => console.log('微任务2'));
});
console.log('同步');
// 输出：同步 → 微任务1 → 微任务2

关键：微任务队列会一次性清空，新添加的微任务也会在当前轮次执行完。

示例 3：宏任务中注册微任务

setTimeout(() => {
  console.log('宏任务');
  Promise.resolve().then(() => console.log('宏任务中的微任务'));
}, 0);
Promise.resolve().then(() => console.log('外层微任务'));
// 输出：外层微任务 → 宏任务 → 宏任务中的微任务

6. async/await 在事件循环中的特殊表现

async/await 是 Promise 的语法糖，但它在事件循环中的行为有细微的陷阱。

async function foo() {
  console.log('2');
  await bar();        // ← 这里 await 后面的代码相当于 Promise.then
  console.log('4');
}
async function bar() {
  console.log('3');
}
console.log('1');
foo();
console.log('5');
// 输出：1 2 3 5 4

分析：

陷阱：很多人以为 await 会阻塞，其实它只是把后续代码包装成微任务，并不会阻塞主线程。

7. Node.js 与浏览器事件循环的区别

浏览器和 Node.js 的事件循环在实现上有所不同，下面列出主要差异（Node.js 版本 11+ 后已尽量与浏览器对齐，但仍有一些区别）。

特性浏览器Node.js（v11+）
宏任务类型setTimeout、setInterval、I/O、UI 渲染setTimeout、setInterval、I/O、setImmediate、process.nextTick（特殊微任务）
微任务执行时机每个宏任务之后清空微任务基本一致，但 process.nextTick 优先级高于 Promise.then
循环阶段简单：宏任务 → 微任务 → 渲染多阶段：timers → pending callbacks → idle → poll → check → close

Node.js 的事件循环有更多阶段，但作为前端开发者，你主要知道 setTimeout 和 Promise 的行为与浏览器基本一致即可。

8. 经典面试题集锦 + 解析

题目 1

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

输出：5 2 3 1 4

解释：

题目 2（混合 async/await）

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}
console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
async1();
new Promise((resolve) => {
  console.log('promise1');
  resolve();
}).then(() => console.log('promise2'));
console.log('script end');

输出：script start → async1 start → async2 → promise1 → script end → async1 end → promise2 → setTimeout

逐步拆解：

  1. 同步：script start
  2. 调用 async1，输出 async1 start
  3. await async2() 执行 async2，输出 async2，然后 await 后续代码（async1 end）入微任务
  4. 继续执行同步，new Promise 立即执行输出 promise1，resolve 后的 then 入微任务
  5. 同步 script end
  6. 当前宏任务结束，清空微任务队列：async1 end、promise2
  7. 下一个宏任务 setTimeout 输出

题目 3（Node.js 中的process.nextTick）

setTimeout(() => console.log('timeout'), 0);
process.nextTick(() => console.log('nextTick'));
console.log('start');

Node.js 输出：start → nextTick → timeout

process.nextTick 优先级高于 Promise.then，属于特殊的微任务。

9. 总结

事件循环是 JavaScript 异步执行的核心机制。记住三句话：

  1. 先同步，后异步：同步代码优先执行，异步回调在队列中等待。
  2. 微任务 > 宏任务：每个宏任务执行完后，必须清空所有微任务。
  3. await 不阻塞：它只是把后续代码包装成微任务。

实践建议：

到此这篇关于深度解析JavaScript中事件循环(Event Loop)的执行顺序的文章就介绍到这了,更多相关JavaScript事件循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文