深入浅出浏览器事件循环，解构异步机制

前端

2024-01-13 08:00:56

在现代网络应用中，浏览器事件循环（Event Loop）扮演着至关重要的角色，它负责处理和管理来自用户交互、网络请求、定时器等各种事件。理解事件循环的运行机制对于构建响应迅速、高效的网页至关重要。

为了形象地解释事件循环的工作原理，我们把浏览器想象成一个邮递员，而事件则是一封封需要被处理的信件。邮递员按照一定的顺序处理这些信件，而处理的过程就是事件循环的运行。

浏览器事件循环的运作机制

浏览器事件循环分为两个阶段：

1. 宏任务阶段（Task Queue）

宏任务队列是一个先进先出的队列，包含了那些耗时较长的任务，例如 DOM 操作、定时器、网络请求。浏览器会依次执行队列中的宏任务，直到队列为空。

2. 微任务阶段（Microtask Queue）

微任务队列也是一个先进先出的队列，但它优先级高于宏任务队列。微任务包含了那些需要立即执行的任务，例如 Promise 的 resolve/reject、MutationObserver 的回调。浏览器会在执行完一个宏任务后，立即执行所有挂起的微任务。

事件循环的执行顺序

浏览器事件循环按照以下顺序执行：

浏览器会先执行所有同步代码，即没有回调函数或异步操作的代码。
执行所有宏任务，直到队列为空。
执行所有微任务，直到队列为空。
检查是否有新的事件，如果有，则将对应的事件处理函数加入事件队列。

这种执行顺序确保了浏览器能够响应用户交互和系统事件，同时尽可能高效地处理耗时的操作。

实例演示

考虑以下代码：

console.log('script start');

async function async_func1() {
  console.log('async_func1 start');
  await Promise.resolve();
  console.log('async_func1 end');
}

async function async_func2() {
  console.log('async_func2 start');
  await Promise.resolve();
  console.log('async_func2 end');
}

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

async_func1();
async_func2();

console.log('script end');

输出结果为：

script start
async_func1 start
async_func2 start
promise1
async_func1 end
async_func2 end
promise1 resolve
promise1 then
script end

在这个例子中，浏览器首先执行同步代码 "script start"，然后执行宏任务 async_func1 和 async_func2。由于 async_func1 和 async_func2 中都有 await 表达式，所以它们的执行会暂停，浏览器转而执行微任务 promise1。promise1 的 resolve 和 then 回调被添加到微任务队列中。

浏览器完成宏任务 async_func1 和 async_func2 的执行后，它会执行微任务队列中的 promise1 的 resolve 和 then 回调。最后，浏览器执行剩余的同步代码 "script end"。