网页“事件循环”Event Loop究竟是什么？

网页“事件循环”Event Loop通常指的是浏览器如何管理和执行JavaScript中的异步任务，包括事件处理、网络请求、定时器等。这个机制的核心概念是“事件循环”（Event Loop）。理解事件循环对于编写高效的JavaScript代码至关重要，特别是在处理异步操作时。

事件循环的基本概念

1. 调用栈（Call Stack）：

   • 调用栈是一个后进先出（LIFO）的数据结构，用于记录程序的执行路径。
   • 每当调用一个函数，该函数就会被压入调用栈；当函数执行完毕，它会被弹出调用栈。

2. 任务队列（Task Queue）：

   • 任务队列用于存储宏任务（Macrotasks）。
   • 常见的宏任务包括：I/O、UI 渲染、setTimeout 和 setInterval 回调、事件处理等。

3. 微任务队列（Microtask Queue）：

   • 微任务队列用于存储微任务（Microtasks）。
   • 常见的微任务包括：Promise 回调、process.nextTick（Node.js）、MutationObserver 回调等。

事件循环的工作流程

1. 执行同步代码：

   • 浏览器首先执行调用栈中的同步代码，直到调用栈为空。

2. 处理微任务：

   • 当调用栈为空时，浏览器会检查微任务队列，并依次执行所有的微任务，直到微任务队列为空。

3. 渲染：

   • 如果调用栈和微任务队列都为空，浏览器会进行一次渲染，更新页面。

4. 处理宏任务：

   • 渲染完成后，浏览器会从任务队列中取出一个宏任务，将其放入调用栈中执行。
   • 执行完一个宏任务后，再次检查微任务队列，重复上述过程。

具体示例

假设我们有以下代码：

console.log('Start');

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

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

console.log('End');

执行顺序如下：

1. 同步代码：

   • console.log('Start'); 输出 "Start"。
   • setTimeout 设置一个0延迟的定时器，将回调函数放入任务队列。
   • Promise.resolve().then 创建一个微任务，将回调函数放入微任务队列。
   • console.log('End'); 输出 "End"。

2. 微任务：

   • 调用栈为空，检查微任务队列，执行 Promise 回调，输出 "Promise"。

3. 渲染：

   • 浏览器进行一次渲染。

4. 宏任务：

   • 从任务队列中取出 setTimeout 的回调函数，放入调用栈中执行，输出 "Timeout"。

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

微任务的设计目的是为了在当前任务完成后立即执行一些必要的清理或更新操作，以确保代码的连贯性和一致性。例如，Promise 的回调需要在当前任务结束后立即执行，以保证异步操作的顺序。

总结

理解事件循环和任务队列的机制对于编写高效、无阻塞的JavaScript代码非常重要。通过合理使用宏任务和微任务，可以更好地管理异步操作，避免不必要的性能瓶颈。