一图搞懂 EventLoop

Question

JavaScript 中的 Event Loop（事件循环）是指一种机制，用于控制 JavaScript 代码的执行顺序和异步操作的处理。

在 JavaScript 中，代码的执行是单线程的，即一次只能执行一个任务。但是，JavaScript 也支持一些非阻塞的异步操作，例如网络请求、定时器等。当遇到这些异步操作时，不会阻塞后续代码的执行，而是将这些异步操作放在任务队列（task queue）中，等待执行。

Event Loop 负责处理任务队列中的任务。它会不断地从任务队列中取出任务，执行任务，并将执行结果返回。一般来说，任务分为两种类型：宏任务（macrotask）和微任务（microtask）。

1. 宏任务（macrotask）：包括整体代码块、setTimeout、setInterval 等。
2. 微任务（microtask）：包括 Promise 中的 then、catch、finally，MutationObserver 等。

当执行完一个宏任务后，会先处理所有的微任务，然后再执行下一个宏任务。这就是 Event Loop 的工作原理。

简化的 Event Loop 执行过程如下：

1. 执行整体代码块。
2. 执行第一个宏任务，执行期间可能会产生微任务。
3. 执行所有的微任务。
4. 执行下一个宏任务，执行期间可能会产生微任务。
5. 重复步骤 3 和 4，直到所有任务都执行完毕。

需要注意的是，浏览器中的 Event Loop 和 Node.js 中的 Event Loop 存在一些差异，例如 Node.js 中使用了 libuv 库来处理 I/O 操作。但是它们的基本原理是一样的，都是通过任务队列来控制代码的执行顺序和异步操作的处理。