6.5 事件循环（Event Loop）机制解析

6.5 事件循环（Event Loop）机制解析

事件循环（Event Loop）是 JavaScript 运行时环境的核心机制，用于处理异步操作和事件回调。理解事件循环的工作原理对于编写高效的异步代码至关重要。本节将深入解析事件循环的机制，包括调用栈、任务队列和微任务队列。

6.5.1 JavaScript 的单线程模型

JavaScript 是单线程的，这意味着它一次只能执行一个任务。为了处理异步操作（如定时器、网络请求等），JavaScript 使用事件循环机制来调度和执行任务。

6.5.2 事件循环的基本概念

事件循环的核心组件包括：

• 调用栈（Call Stack）：用于存储函数调用的栈结构，遵循“后进先出”原则。
• 任务队列（Task Queue）：用于存储宏任务（如 setTimeout、setInterval、I/O 操作等）。
• 微任务队列（Microtask Queue）：用于存储微任务（如 Promise 回调、MutationObserver 回调等）。

6.5.3 事件循环的工作流程

事件循环的工作流程可以概括为以下步骤：

1. 执行同步代码：从调用栈中依次执行同步任务。
2. 处理微任务：当调用栈为空时，依次执行微任务队列中的所有任务。
3. 渲染页面：如果需要，执行页面渲染（如重绘、重排）。
4. 处理宏任务：从任务队列中取出一个宏任务并执行。
5. 重复上述步骤：继续处理微任务、渲染页面和宏任务，直到所有任务完成。

6.5.4 示例解析

1. 同步代码与异步代码

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

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

console.log("End");

输出顺序：

Start
End
Promise
Timeout

解析：

• 同步代码 console.log("Start") 和 console.log("End") 首先执行。
• Promise 回调是微任务，优先于宏任务（setTimeout）执行。
• setTimeout 回调是宏任务，最后执行。

2. 嵌套的微任务与宏任务

console.log("Start");

setTimeout(() => {
  console.log("Timeout 1");
  Promise.resolve().then(() => {
    console.log("Promise 1");
  });
}, 0);

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

Promise.resolve().then(() => {
  console.log("Promise 2");
});

console.log("End");

输出顺序：

Start
End
Promise 2
Timeout 1
Promise 1
Timeout 2

解析：

• 同步代码 console.log("Start") 和 console.log("End") 首先执行。
• Promise 2 是微任务，优先执行。
• Timeout 1 是宏任务，执行时又产生了一个微任务 Promise 1。
• Promise 1 在当前宏任务执行完毕后立即执行。
• Timeout 2 是下一个宏任务，最后执行。

6.5.5 微任务与宏任务的区别

6.5.6 事件循环的应用场景

1. 优化性能

• 将耗时操作放入宏任务，避免阻塞页面渲染。
• 使用微任务处理高优先级任务（如更新 UI 状态）。

2. 避免阻塞

• 将计算密集型任务拆分为多个微任务，避免长时间占用调用栈。

3. 控制执行顺序

• 通过 Promise 和 setTimeout 控制任务的执行顺序。

6.5.7 示例代码

示例 1：微任务与宏任务的执行顺序

console.log("Script start");

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

Promise.resolve()
  .then(() => {
    console.log("Promise 1");
  })
  .then(() => {
    console.log("Promise 2");
  });

console.log("Script end");

输出顺序：

Script start
Script end
Promise 1
Promise 2
setTimeout

示例 2：嵌套的微任务

Promise.resolve()
  .then(() => {
    console.log("Promise 1");
    Promise.resolve().then(() => {
      console.log("Promise 2");
    });
  })
  .then(() => {
    console.log("Promise 3");
  });

输出顺序：

Promise 1
Promise 2
Promise 3

6.5.8 总结

• 事件循环：是 JavaScript 处理异步操作的核心机制。
• 调用栈：用于执行同步任务。
• 任务队列：分为宏任务队列和微任务队列，微任务优先于宏任务执行。
• 应用场景：优化性能、避免阻塞、控制执行顺序。

通过理解事件循环的机制，你可以更好地编写高效的异步代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 微任务和宏任务的主要区别是什么？
2. 如何利用事件循环优化页面性能？
3. 在什么情况下应该使用微任务而不是宏任务？