事件循环（Event Loop）

概述

在 JavaScript 中，理解 事件循环 (Event Loop) 是深入掌握异步编程的关键。JavaScript 是一种单线程语言，这意味着它在同一时间只能执行一个任务。然而，现代应用通常需要同时处理多个任务，比如处理用户输入、执行网络请求、渲染页面等。事件循环机制帮助 JavaScript 在单线程的基础上，依然可以处理异步操作和并发任务，实现非阻塞的运行。

---

1. 什么是事件循环？

事件循环是 JavaScript 用来管理执行任务的机制。它的核心作用是在异步任务完成时，将回调函数推入任务队列，并确保在适当的时机执行它们。

JavaScript 是单线程的，意味着它一次只能执行一件事。为了确保程序在遇到耗时操作（如文件读取、网络请求）时不会阻塞，JavaScript 引入了 异步操作，并通过事件循环来处理这些异步任务。

基本过程：

1. 同步任务 进入 执行栈（Call Stack），按照顺序执行。
2. 异步任务（例如定时器、网络请求等）被挂起，并在任务完成后，等待被放入 任务队列（Task Queue）。
3. 当执行栈中的任务完成后，事件循环从任务队列中取出任务，放回执行栈执行。

---

2. 执行栈和任务队列

2.1 执行栈（Call Stack）

执行栈是 JavaScript 引擎用来跟踪当前正在执行的函数和代码的结构。它是一个 LIFO（后进先出）的数据结构。当函数调用发生时，它会被推入执行栈，执行结束后，从栈中弹出。

示例：

function foo() {
  console.log('foo');
}

function bar() {
  foo();
  console.log('bar');
}

bar();

执行顺序为：

1. bar() 推入栈。
2. foo() 被调用并推入栈。
3. foo() 执行结束，出栈。
4. bar() 执行结束，出栈。

2.2 任务队列（Task Queue）

任务队列用于存放异步任务的回调函数。当异步操作完成后，回调函数不会立即执行，而是被放入任务队列中，等待执行栈空闲时再执行。

常见的异步任务包括：

• 定时器 (setTimeout, setInterval)
• 网络请求 (fetch, XMLHttpRequest)
• 事件监听 (click, keydown)

任务队列是一个 FIFO（先进先出）的结构，事件循环会按照顺序取出任务进行处理。

---

3. 微任务与宏任务

在事件循环中，任务分为两类：宏任务 (Macro Task) 和 微任务 (Micro Task)。它们的优先级不同，处理顺序也不同。

3.1 宏任务（Macro Task）

宏任务指的是整个事件循环的一个完整执行周期，每个宏任务的执行都会依次处理同步代码、事件处理等。这些任务包括：

• setTimeout
• setInterval
• I/O 操作
• setImmediate（仅限 Node.js）

每次执行栈清空后，事件循环会从宏任务队列中取出任务执行。

3.2 微任务（Micro Task）

微任务是在每个宏任务执行结束后、下一个宏任务开始前执行的任务，通常是用来处理更高优先级的任务。常见的微任务有：

• Promise.then()
• MutationObserver
• queueMicrotask

事件循环在每次执行宏任务之前，都会先清空所有的微任务队列。微任务的优先级高于宏任务，因此，即使宏任务已经准备好，事件循环也会先执行所有的微任务。

示例：

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') 先执行。
• setTimeout 是宏任务，回调会被推入宏任务队列，稍后执行。
• Promise.then 是微任务，在同步代码执行完毕后立刻执行。
• 宏任务 setTimeout 的回调最后执行。

---

4. 事件循环的工作流程

总结事件循环的工作流程如下：

1. 执行栈：从栈中取出并执行同步任务，遇到异步任务则将其挂起。
2. 任务队列：将异步任务的回调函数加入任务队列。
3. 微任务队列：优先处理所有的微任务。
4. 事件循环：当执行栈为空时，检查微任务队列，依次执行。如果微任务队列为空，则从宏任务队列中取出任务执行。
5. 重复循环：事件循环会不断重复这个过程，确保所有的任务都被执行。

---

5. 优化性能：如何利用事件循环

事件循环的机制为我们提供了非阻塞式的异步处理方式，但要想提升应用性能，了解以下几点非常关键：

5.1 使用 setTimeout 控制任务顺序

在需要分块处理大型任务时，可以使用 setTimeout 将任务切分成多个小任务，避免主线程长时间阻塞。

示例：

function heavyTask() {
  for (let i = 0; i < 1000000000; i++) {}
  console.log('Task completed');
}

setTimeout(() => console.log('Next task'), 0);
heavyTask();

将耗时操作放入定时器中可以保证主线程及时处理其他任务。

5.2 避免阻塞主线程

任何长时间运行的同步任务都会阻塞主线程，导致用户交互（如点击、输入）无法响应。异步操作是解决这一问题的有效手段。

5.3 善用 Promise 和 async/await

Promise 和 async/await 的微任务特性可以帮助我们在异步操作之间调度任务，保证代码的可读性并提升性能。

---

6. 常见问题与解决方案

6.1 为什么 setTimeout 的回调不是立即执行？

setTimeout 的回调会被推入任务队列，而不是立即执行。当主线程忙于处理其他任务时，它不会打断当前的执行栈，因此回调会延迟到主线程空闲时再执行。

6.2 为什么微任务优先于宏任务？

微任务的设计初衷是为了在主任务执行过程中快速处理一些较小的任务，而不会拖慢整个应用的执行进程。它确保了在每个事件循环之间，所有微任务都会尽快被处理完毕。

---

7. 总结

事件循环 (Event Loop) 是 JavaScript 异步编程的核心机制，它通过任务队列、执行栈、微任务和宏任务的调度，让 JavaScript 可以在单线程环境下实现非阻塞的异步操作。理解事件循环可以帮助开发者更好地编写高性能的 JavaScript 应用，避免主线程阻塞，提升用户体验。