JavaScript 事件循环详解

前言

JavaScript 的事件循环（Event Loop）是其异步编程的核心机制，理解它对于掌握 JavaScript 的执行流程至关重要。以下是对事件循环的详细解释：

事件循环

1. 同步、异步与单线程

同步任务

含义：在主线程上排队执行的任务，只有一个任务执行完毕，才能执行后一个任务

异步任务

含义：不进入主线程，而进入“任务队列（task queue）”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。异步任务又分为宏任务和微任务。

单线程

JavaScript 是单线程的，这意味着它一次只能执行一个任务。然而，JavaScript 通过事件循环机制实现了异步操作，使得它能够处理诸如定时器、网络请求、用户交互等非阻塞任务。所有同步任务都在主线程上执行，形成一个函数调用栈（执行栈），而异步则先放到任务队列（task queue）里，任务队列又分为宏任务（macro-task）与微任务（micro-task）。

2. 事件循环的组成部分

事件循环主要由以下几个部分组成：

• 调用栈（Call Stack）：用于存储函数调用的栈结构。当一个函数被调用时，它会被推入调用栈；当函数执行完毕时，它会被弹出调用栈。

• 任务队列（Task Queue）：用于存储待执行的任务。任务队列分为两种：

宏任务队列（MacroTask Queue）：包含 script(整体代码)、setTimeout、setInterval、I/O 操作、setImmediate(node.js环境)、UI 渲染等任务。

微任务队列（MicroTask Queue）：包含new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTick（node环境） 等任务。

tips：​ 若同时存在promise和nextTick，则先执行nextTick

• 事件循环（Event Loop）：负责监控调用栈和任务队列，当调用栈为空时，事件循环会从任务队列中取出任务并推入调用栈执行。

3. 事件循环的执行流程

事件循环的执行流程可以概括为以下几个步骤：

1. 执行同步代码：首先，JavaScript 引擎会执行所有的同步代码，这些代码会依次被推入调用栈并执行。
2. 处理微任务：当调用栈为空时，事件循环会检查微任务队列。如果微任务队列中有任务，事件循环会依次执行这些任务，直到微任务队列为空。
3. 渲染页面：如果需要进行 UI 渲染，浏览器会在此阶段更新页面。
4. 处理宏任务：事件循环接着检查宏任务队列。如果宏任务队列中有任务，事件循环会取出一个任务并执行。执行完毕后，事件循环会再次检查微任务队列，并重复上述步骤。
5. 循环执行：事件循环会不断重复上述步骤，直到所有任务队列为空。

4. 示例代码

以下是一个简单的示例，展示了事件循环的执行顺序：

console.log('Start');

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

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

console.log('End');

输出结果：

Start
End
Promise
Timeout

解释：

• 首先执行同步代码，输出 Start 和 End。

• 然后处理微任务队列，输出 Promise。

• 最后处理宏任务队列，输出 Timeout。

5. 注意事项

• 微任务优先：微任务队列中的任务会在宏任务之前执行。

• 避免阻塞：长时间运行的同步代码会阻塞事件循环，导致页面无法响应。因此，应尽量避免在同步代码中执行耗时操作。

6. 总结

JavaScript 的事件循环机制使得它能够在单线程环境下高效地处理异步任务。理解事件循环的执行顺序和任务队列的优先级，对于编写高效的 JavaScript 代码至关重要。通过合理地使用 Promise、async/await 等异步编程工具，可以更好地利用事件循环机制，提升代码的性能和可维护性。

拓展

为什么JS不能有多个线程呢？

作为浏览器的脚本语言，JavaScript 的主要用途是与用户交互以及操作 DOM。这种特性决定了它必须是单线程的，否则会引发复杂的同步问题。例如，假设 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，而另一个线程却删除了该节点，此时浏览器将无法确定以哪个线程的操作结果为准。为了避免这种复杂性，JavaScript 被设计为单线程。

事件循环的优点？

JavaScript 的事件循环（Event Loop）机制是其异步编程的核心，它为单线程的 JavaScript 提供了处理并发任务的能力。以下是事件循环的主要优点：

1. 高效处理异步任务

JavaScript 是单线程的，但通过事件循环机制，它可以高效地处理异步任务（如定时器、网络请求、文件读写等）。事件循环允许 JavaScript 在执行异步任务时不必阻塞主线程，从而提高了程序的响应速度和性能。

• 示例：在等待网络请求返回时，JavaScript 可以继续执行其他任务，而不是一直等待。

---

2. 非阻塞 I/O 操作

事件循环使得 JavaScript 能够以非阻塞的方式处理 I/O 操作（如文件读写、网络请求等）。这些操作会被放入任务队列中，等待主线程空闲时再执行，从而避免了阻塞主线程。

• 示例：Node.js 利用事件循环实现了高性能的 I/O 操作，能够同时处理大量并发请求。

---

3. 更好的用户体验

在浏览器环境中，事件循环使得 JavaScript 能够同时处理用户交互（如点击、滚动等）和其他任务（如渲染、网络请求等）。这确保了页面的流畅性和响应性，提升了用户体验。

• 示例：即使页面正在加载数据，用户仍然可以滚动页面或点击按钮。

---

4. 任务优先级管理

事件循环通过 微任务队列（MicroTask Queue） 和 宏任务队列（MacroTask Queue） 的划分，实现了任务的优先级管理。微任务（如 Promise 回调）会优先于宏任务（如 setTimeout）执行，这使得开发者可以更灵活地控制任务的执行顺序。

• 示例：Promise 的回调会优先于 setTimeout 的回调执行。

---

5. 简化并发编程

事件循环机制使得 JavaScript 能够以单线程的方式模拟多线程的并发行为。开发者无需关心复杂的线程同步问题（如锁、死锁等），从而降低了并发编程的难度。

• 示例：在 Node.js 中，开发者可以轻松处理数千个并发连接，而无需担心线程安全问题。

---

6. 资源利用率高

由于事件循环是非阻塞的，它能够充分利用 CPU 和内存资源。在等待异步任务完成时，JavaScript 可以继续执行其他任务，而不是空转或等待。

• 示例：Node.js 利用事件循环实现了高并发、低延迟的网络服务。

---

7. 支持实时应用

事件循环机制使得 JavaScript 非常适合开发实时应用（如聊天应用、在线游戏等）。通过异步任务和事件驱动的方式，JavaScript 能够快速响应事件并处理数据。

• 示例：WebSocket 通信通过事件循环实现实时数据传输。

---

8. 跨平台一致性

事件循环机制在浏览器和 Node.js 中都是一致的，这使得开发者可以以相同的方式处理异步任务，无论是在前端还是后端。

• 示例：Promise、async/await 在前端和后端的行为一致。

---

9. 灵活的任务调度

事件循环允许开发者通过 setTimeout、setInterval、Promise、async/await 等工具灵活地调度任务。开发者可以根据需求控制任务的执行时机。

• 示例：使用 setTimeout 延迟任务的执行，或使用 Promise 实现链式调用。

---

10. 与现代异步编程模型结合

事件循环与 Promise、async/await 等现代异步编程模型紧密结合，使得异步代码的编写更加简洁和直观。

示例：

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

总结

事件循环的优点可以概括为：

• 高效处理异步任务，提升性能。

• 非阻塞 I/O 操作，避免主线程阻塞。

• 更好的用户体验，确保页面流畅。

• 简化并发编程，降低开发难度。

• 高资源利用率，支持实时应用。

• 跨平台一致性，统一前后端开发。

通过事件循环，JavaScript 能够在单线程环境下实现高效的异步编程，成为现代 Web 开发和服务器端开发的核心技术之一。