微任务与宏任务：深入浅出解读 JavaScript 异步世界

在 JavaScript 错综复杂的异步世界中，微任务和宏任务扮演着至关重要的角色，它们共同协调着代码的执行顺序。对于初学者来说，理解二者的区别至关重要，有助于提升编码效率。

微任务和宏任务：本质对比

简单来说，微任务是在当前执行栈中执行完毕后立即执行的异步任务，而宏任务则是在执行栈清空后才执行的异步任务。通俗地讲，微任务具有更高的优先级，总是先于宏任务执行。

微任务队列和宏任务队列

JavaScript 引擎维护着两个独立的队列：微任务队列和宏任务队列。微任务会添加到微任务队列中，而在当前执行栈执行完毕后立即执行。另一方面，宏任务会被添加到宏任务队列中，等待当前执行栈清空后才执行。

常见的微任务和宏任务类型

微任务：

• Promise.then()
• MutationObserver
• 事件监听器（click、DOMContentLoaded、load 等）

宏任务：

• setTimeout()
• setInterval()
• XMLHttpRequest
• Fetch

执行顺序与交互

在 JavaScript 中，代码按照以下顺序执行：

1. 同步任务： 当前执行栈中的代码按顺序执行。
2. 微任务队列： 当前执行栈清空后，所有微任务都会立即执行。
3. 宏任务队列： 在所有微任务执行完毕后，宏任务才会按顺序执行。

这种执行顺序确保了关键操作（如事件处理）得到优先处理，同时允许后台任务（如网络请求）在不阻塞主线程的情况下执行。

实例示例

为了更好地理解微任务和宏任务，我们来看一个示例：

console.log("同步任务 1");

setTimeout(() => {
  console.log("宏任务 1");
}, 0);

Promise.resolve().then(() => {
  console.log("微任务 1");
});

console.log("同步任务 2");

在这个示例中，代码将按照以下顺序执行：

1. 同步任务 1
2. 同步任务 2
3. 微任务 1
4. 宏任务 1

正如你所看到的，尽管 setTimeout() 被设置了 0 毫秒的延迟，但微任务仍然优先执行，因为它在微任务队列中。

结论

掌握微任务和宏任务的概念对于编写高效、响应迅速的 JavaScript 代码至关重要。通过理解二者的区别和交互方式，你可以有效地控制异步代码的执行顺序，从而提升应用程序的性能和用户体验。

---