洞悉JS事件循环：揭秘Microtask和Macrotask之别

2023-10-14 11:28:10

把握前端开发的脉搏：事件循环的基石

在 JavaScript 世界中，事件循环充当着一个无形的调度者，指挥着代码的执行顺序，确保应用程序的平稳运行。它是一个不断循环的过程，在其中，浏览器接收并处理事件，并执行相应的代码。通过理解事件循环的运作方式，我们可以更好地掌控应用程序的执行流程，避免潜在的性能问题。

深入剖析：Microtask 与 Macrotask 的异同

JavaScript 事件循环主要由两类任务组成：Microtask 和 Macrotask。它们之间的区别至关重要，掌握这些差异有助于我们更好地优化代码。

Macrotask ：

Macrotask 代表一些离散的独立的工作，包括解析 HTML、生成 DOM、执行主线程 JS 代码等。
Macrotask 按照先进先出的原则执行。

Microtask ：

Microtask 则是为了完成一些更新应用程序状态的较小的任务，如处理 promise、mutation observer 和 UI 渲染等。
Microtask 在每个宏任务执行完毕后立即执行，具有更高的优先级。

举一反三：实例解析

为了更好地理解 Microtask 和 Macrotask 的区别，我们来看一个简单的例子：

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

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

在这个例子中，setTimeout 和 Promise.resolve 分别创建了一个 Macrotask 和一个 Microtask。根据事件循环的机制，Macrotask 会先于 Microtask 执行。因此，控制台会先输出 "Macrotask"，然后再输出 "Microtask"。