微任务，宏任务，不再傻傻分不清

在 JavaScript 的世界中，"微任务"和"宏任务"是两个至关重要的概念，掌握它们对于深入理解 JavaScript 的执行机制至关重要。然而，对于许多初学者来说，这两个概念常常让人困惑，傻傻分不清。本文将以通俗易懂的方式，带你深入了解微任务和宏任务，帮你扫清知识盲区。

微任务：抢先一步，优先执行

微任务本质上是 JavaScript 代码中的小型任务，具有更高的执行优先级。当 JavaScript 引擎执行代码时，它会将遇到的微任务排入一个特殊的队列，称为 "微任务队列"。每当 JavaScript 引擎完成宏任务的执行时，它就会处理微任务队列中的所有微任务。

典型的微任务示例包括：

• Promise.then() 的回调函数
• MutationObserver 的回调函数
• queueMicrotask() 函数

宏任务：后发制人，稍后再执行

宏任务则是 JavaScript 代码中较大的任务，执行优先级低于微任务。它们被排入 "宏任务队列" 中。JavaScript 引擎在处理完当前执行栈中的所有同步代码后，才会执行宏任务队列中的任务。

常见的宏任务示例包括：

• setTimeout() 的回调函数
• setInterval() 的回调函数
• DOM 事件处理程序（如 click、load）

执行顺序：错综复杂，井然有序

JavaScript 引擎的执行机制遵循以下规则：

• 首先，引擎执行主线程中的所有同步代码。
• 然后，引擎处理微任务队列中的所有微任务。
• 最后，引擎执行宏任务队列中的所有宏任务。

这种执行顺序确保了微任务总是在宏任务之前执行。这对于某些场景非常重要，例如：

• 确保用户界面更新在 DOM 操作之前执行（微任务）
• 保证异步回调函数在 DOM 事件处理程序之后执行（宏任务）

案例分析：加深理解

让我们通过一个示例来加深对微任务和宏任务的理解：

console.log("同步代码 1"); // 同步代码
setTimeout(() => {
  console.log("宏任务"); // 宏任务
}, 0);
Promise.resolve().then(() => {
  console.log("微任务"); // 微任务
});
console.log("同步代码 2"); // 同步代码

在这个示例中，代码的执行顺序为：

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

结语：把握精髓，驾驭 JavaScript

了解微任务和宏任务的概念对于理解 JavaScript 的执行机制至关重要。通过区分它们的优先级和执行顺序，你可以编写出更加健壮、可预测的 JavaScript 代码。掌握这些知识，你将更自信地驾驭 JavaScript 的异步编程世界，从容应对面试中的挑战。

---