微观探秘：微任务与宏任务的现实运作机制

在 JavaScript 中，微任务和宏任务是两个不同的任务队列，它们决定了代码的执行顺序。微任务队列优先级更高，会在宏任务队列之前执行。

为了更清晰地理解它们的工作机制，让我们通过一个实际例子来观察它们的执行顺序：

console.log('script start');

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

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

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

console.log('script end');

在这个例子中，我们有以下几个任务：

• console.log('script start')：这是一个宏任务，因为它直接在主线程上执行。
• setTimeout(() => { console.log('setTimeout') }, 0)：这是一个宏任务，因为它是通过 setTimeout 函数创建的。
• Promise.resolve().then(() => { console.log('promise1') })：这是一个微任务，因为它是在 Promise 对象上调用 then 方法创建的。
• Promise.resolve().then(() => { console.log('promise2') })：这是一个微任务，因为它也是在 Promise 对象上调用 then 方法创建的。
• console.log('script end')：这是一个宏任务，因为它直接在主线程上执行。

让我们一步一步地分析它们的执行顺序：

1. 首先，宏任务 console.log('script start') 被执行，它输出 "script start"。
2. 接下来，微任务 Promise.resolve().then(() => { console.log('promise1') }) 被执行，它输出 "promise1"。
3. 然后，微任务 Promise.resolve().then(() => { console.log('promise2') }) 被执行，它输出 "promise2"。
4. 宏任务 setTimeout(() => { console.log('setTimeout') }, 0) 被执行，它输出 "setTimeout"。
5. 最后，宏任务 console.log('script end') 被执行，它输出 "script end"。

正如你所见，微任务在宏任务之前执行。即使 setTimeout 的延时设置为 0，它也必须等到所有微任务执行完毕后才能执行。这是因为微任务队列的优先级更高，它会先于宏任务队列执行。

理解微任务和宏任务的工作机制非常重要，这将帮助你更好地理解 JavaScript 的执行机制，从而编写出更健壮、更高效的代码。