优先级队列：微任务如何抢占宏任务的执行

好的，没问题！各位掘金的俊男靓女们，晚上好！我是你们的老朋友，人送外号“代码段子手”的程序员老王。今儿咱不聊996，也不谈秃头危机，咱们来聊点更刺激的——微任务如何抢占宏任务的执行！

准备好了吗？系好安全带，咱们发车啦！🚀

开场白：一场关于优先级的“宫斗剧”

各位有没有看过宫斗剧？后宫佳丽三千，为了争夺皇上的恩宠，那可是机关算尽，步步惊心。咱们的JavaScript世界里，也上演着一出精彩的“优先级宫斗剧”，主角就是宏任务（MacroTask）和微任务（MicroTask）。

宏任务，就像后宫里那些资历老、背景硬的“老牌贵妃”，比如setTimeout、setInterval、I/O、UI渲染等。它们资格老，但执行起来也慢吞吞的，经常“摆架子”，要等前面的事情都处理完了，才肯缓缓登场。

微任务，则像是那些年轻貌美、手段高明的“新晋嫔妃”，比如Promise.then、async/await、MutationObserver等。她们更“懂事”，更“高效”，一旦有机会，就想方设法地要抢在“老牌贵妃”前面，博得“皇上”（JavaScript引擎）的青睐。

那么问题来了，微任务是如何“抢班夺权”，在宏任务之前执行的呢？别急，且听我慢慢道来。

第一幕：什么是宏任务？什么是微任务？

要理解微任务如何抢占宏任务，首先得搞清楚，什么是宏任务？什么是微任务？

宏任务（MacroTask）： 可以理解为“大的任务”，每次执行栈清空后，引擎会从宏任务队列中取出一个任务执行。常见的宏任务包括：
- setTimeout
- setInterval
- setImmediate (Node.js)
- requestAnimationFrame
- I/O 操作 (例如文件读写)
- UI 渲染
微任务（MicroTask）： 可以理解为“小的任务”，它会在当前宏任务执行完成后，下一个宏任务执行前，尽可能快地执行。常见的微任务包括：
- Promise.then/catch/finally
- async/await (实际上是Promise的语法糖)
- MutationObserver (用于监听DOM变化)
- process.nextTick (Node.js)

用一张表格来总结一下：

特性	宏任务 (MacroTask)	微任务 (MicroTask)
执行时机	每次事件循环的开始	当前宏任务执行后
优先级	低	高
常见类型	setTimeout, I/O	Promise, async/await

第二幕：事件循环（Event Loop）—— 舞台搭建

宏任务和微任务的“宫斗”舞台，就是我们熟悉的事件循环（Event Loop）。事件循环就像一个永动机，不停地从任务队列中取出任务执行，周而复始。

事件循环的流程大致如下：

执行栈清空： JavaScript引擎从上到下执行代码，当所有同步代码执行完毕后，执行栈被清空。
取出宏任务： 从宏任务队列中取出一个任务，放入执行栈中执行。
执行宏任务： 执行这个宏任务，期间可能会产生新的宏任务和微任务。
清空微任务队列： 当当前宏任务执行完毕后，检查微任务队列，将所有微任务依次取出并执行，直到微任务队列为空。
更新UI渲染： 浏览器可能会选择在此时进行UI渲染。
循环往复： 回到第2步，继续从宏任务队列中取下一个任务执行。

用一张图来更直观地表示：

graph LR
    A[执行栈清空] --> B(取出宏任务)
    B --> C(执行宏任务)
    C --> D{产生新的宏任务和微任务}
    D -- 是 --> E(清空微任务队列)
    D -- 否 --> F(判断是否更新UI渲染)
    E --> F(判断是否更新UI渲染)
    F -- 是 --> G(UI渲染)
    F -- 否 --> H(回到第2步)
    G --> H(回到第2步)
    H --> B

第三幕：微任务的“插队”策略

现在，我们终于来到了最关键的部分：微任务是如何“插队”的？

关键就在于事件循环的第4步：清空微任务队列。

当一个宏任务执行完毕后，不是立即去取下一个宏任务，而是先检查微任务队列，把所有微任务全部执行完毕，才会去取下一个宏任务。

这就给了微任务“插队”的机会！

举个例子：

console.log('Script start');

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

Promise.resolve().then(function() {
  console.log('Promise 1');
}).then(function() {
  console.log('Promise 2');
});

console.log('Script end');

这段代码的执行顺序是：

Script start
Script end
Promise 1
Promise 2
setTimeout

为什么setTimeout最后执行？

首先，执行栈执行同步代码，输出Script start和Script end。
遇到setTimeout，将其放入宏任务队列。
遇到Promise.resolve().then()，将其回调函数放入微任务队列。
同步代码执行完毕，执行栈清空。
事件循环开始，从宏任务队列中取出第一个任务（没有，因为setTimeout还在等待）。
检查微任务队列，发现有两个Promise的回调函数，依次执行，输出Promise 1和Promise 2。
微任务队列清空。
事件循环继续，从宏任务队列中取出setTimeout的回调函数执行，输出setTimeout。

看到了吗？Promise的回调函数（微任务）在setTimeout的回调函数（宏任务）之前执行了！这就是微任务“插队”的威力！

第四幕：async/await—— 微任务的“升级版”

async/await是ES2017引入的语法糖，它让异步代码看起来更像同步代码，极大地提高了代码的可读性。

但async/await的背后，仍然是Promise和微任务。

async function myAsyncFunction() {
  console.log('Async function start');
  await delay(1000); // 假设delay函数返回一个Promise
  console.log('Async function end');
}

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

console.log('Script start');
myAsyncFunction();
console.log('Script end');

这段代码的执行顺序是：

Script start
Async function start
Script end
Async function end (大约1秒后)

为什么Async function end在最后执行？

myAsyncFunction()被调用后，立即执行到await delay(1000)。
await会将delay(1000)返回的Promise进行处理，将delay函数放入宏任务队列，然后async函数暂停执行，将控制权交还给调用者。
同步代码继续执行，输出Script end。
1秒后，delay函数执行完毕，Promise变为resolved状态，async函数恢复执行，输出Async function end。

注意：await后面的代码，会被包装成一个微任务来执行！

第五幕：MutationObserver—— DOM变化的“监听者”

MutationObserver是一个强大的API，它可以监听DOM树的变化，并在变化发生时执行回调函数。

MutationObserver的回调函数也是一个微任务。

const observer = new MutationObserver(function(mutations) {
  console.log('DOM changed!');
});

const targetNode = document.getElementById('myElement');

observer.observe(targetNode, { attributes: true, childList: true, subtree: true });

targetNode.setAttribute('data-value', 'new value');

这段代码的执行顺序是：

DOM changed! (在setAttribute执行后，但在下一个宏任务之前)

MutationObserver的回调函数会在DOM变化后，立即放入微任务队列，等待执行。

总结：优先级决定命运

宏任务和微任务的“宫斗”故事，告诉我们一个深刻的道理：优先级决定命运！

微任务之所以能够抢占宏任务的执行，就是因为它的优先级更高。

执行栈 > 微任务队列 > 宏任务队列

理解了宏任务和微任务的执行机制，可以帮助我们更好地编写高效、流畅的JavaScript代码。

应用场景：避免阻塞UI

理解了微任务的执行机制，我们就能更好的避免长时间的计算阻塞UI线程，提高用户体验。

使用Promise或async/await处理异步操作，提高代码可读性和可维护性。
使用MutationObserver监听DOM变化，而不是使用轮询等低效的方式。
避免在微任务中执行耗时的操作，防止阻塞UI渲染。

彩蛋：面试题大放送

最后，给大家准备了几道经典的面试题，检验一下学习成果：

请解释一下什么是事件循环？
宏任务和微任务的区别是什么？
以下代码的输出顺序是什么？

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

Promise.resolve().then(function() {
  console.log('3');
}).then(function() {
  console.log('4');
});

console.log('5');

async/await的底层原理是什么？
MutationObserver有什么作用？

结束语：代码之路，永无止境

好了，今天的分享就到这里。希望大家通过这篇文章，对微任务如何抢占宏任务的执行有了更深入的理解。

记住，代码之路，永无止境。让我们一起努力，不断学习，不断进步，成为更优秀的程序员！💪

感谢大家的聆听！下次再见！ 👋

发表回复 取消回复

发表回复取消回复