浏览器 Event Loop：揭开微队列与宏队列的执行奥秘

2023-11-30 02:28:17

在当今 Web 开发领域，JavaScript 已经成为不可或缺的技术，而浏览器 Event Loop 则是 JavaScript 异步编程的基础。它决定了 JavaScript 代码的执行顺序，从而影响着应用程序的性能和响应能力。本文将为你揭开宏队列与微队列的执行奥秘，助你更好地理解 JavaScript 异步编程的精髓。

宏队列与微队列的缘起

在早期，JavaScript 还是单线程语言，这意味着它一次只能执行一个任务。当浏览器遇到异步任务（例如网络请求或 setTimeout 回调函数）时，它需要将这些任务排队等待执行。这种队列就叫做宏队列（MacroTask Queue）。

随着 JavaScript 的发展，为了提高应用程序的性能，人们引入了一些新的异步编程技术，如 Promise、Async/Await 和 Generator 函数。这些技术允许 JavaScript 在不阻塞主线程的情况下执行异步任务。为了处理这些异步任务，浏览器引入了微队列（Microtask Queue）。

微队列与宏队列的执行顺序

微队列和宏队列是两个独立的队列，它们按照不同的顺序执行任务。微队列中的任务总是优先于宏队列中的任务执行。也就是说，当浏览器遇到一个微队列中的任务时，它会先执行这个任务，然后再执行宏队列中的任务。

微队列与宏队列的应用场景

微队列主要用于处理 Promise、Async/Await 和 Generator 函数等异步任务的回调函数。而宏队列主要用于处理 setTimeout、setInterval、UI 渲染等任务。

如何理解微队列与宏队列的执行顺序

为了更好地理解微队列与宏队列的执行顺序，我们来看一个例子：

console.log('宏队列 1');
setTimeout(() => {
  console.log('宏队列 2');
  Promise.resolve().then(() => {
    console.log('微队列 1');
  });
}, 0);
Promise.resolve().then(() => {
  console.log('微队列 2');
});
console.log('宏队列 3');