Event Loop：浏览器背后的事件引擎

Event Loop详解

Event Loop是一个不断循环的过程，它从事件队列中获取事件，并将其分发到适当的处理程序中执行。Event Loop主要由以下几个部分组成：

• 事件队列 (Event Queue) ：存储等待被处理的事件。
• 任务队列 (Task Queue) ：存储需要被执行的脚本任务。
• 微任务队列 (Microtask Queue) ：存储需要被执行的微任务。

Event Loop工作原理

Event Loop以循环的方式工作，它的主要流程如下：

1. Event Loop从事件队列中获取事件，并将其分发到适当的处理程序中执行。
2. 事件处理程序执行完毕后，将控制权交还给Event Loop。
3. Event Loop从任务队列中获取脚本任务，并将其执行。
4. 脚本任务执行完毕后，将控制权交还给Event Loop。
5. Event Loop从微任务队列中获取微任务，并将其执行。
6. 微任务执行完毕后，控制权交还给Event Loop。
7. Event Loop重复上述过程，直到所有事件、任务和微任务都被处理完毕。

Event Loop中任务的优先级

在Event Loop中，任务的优先级如下：

1. 微任务 (Microtask) ：优先级最高，会在所有宏任务之前执行。
2. 宏任务 (Macrotask) ：优先级低于微任务，包括脚本任务、定时器、I/O操作等。

一道题加深理解

为了加深对Event Loop的理解，我们来看一道题：

在浏览器中，以下代码的执行顺序是什么？

console.log(1);

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

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

console.log(4);

解析 ：

1. 首先，代码中的console.log(1)会被立即执行，输出1。
2. 接下来，setTimeout(() => { console.log(2); }, 0)被执行，它将一个延迟0毫秒的任务添加到事件队列中。
3. 然后，Promise.resolve().then(() => { console.log(3); })被执行，它将一个微任务添加到微任务队列中。
4. 最后，console.log(4)被执行，输出4。
5. 在Event Loop的下一个循环中，微任务队列中的微任务被执行，输出3。
6. 接着，事件队列中的任务被执行，输出2。

因此，代码的执行顺序是：1 -> 4 -> 3 -> 2。