：宏任務(wù)與微任務(wù)執(zhí)行順序全解析)
1. 項(xiàng)目概述從“異步”到“有序”的底層邏輯如果你寫(xiě)過(guò)JavaScript尤其是處理過(guò)網(wǎng)絡(luò)請(qǐng)求、定時(shí)器或者事件監(jiān)聽(tīng)那你肯定對(duì)“異步”這個(gè)概念不陌生。我們常說(shuō)JS是單線(xiàn)程的但瀏覽器卻能同時(shí)做很多事這背后的功臣就是事件循環(huán)Event Loop。而“宏任務(wù)”和“微任務(wù)”正是事件循環(huán)這個(gè)精密調(diào)度系統(tǒng)中的兩個(gè)核心隊(duì)列它們決定了代碼的執(zhí)行順序。理解它們不是死記硬背面試題而是為了在實(shí)戰(zhàn)中當(dāng)你的setTimeout回調(diào)沒(méi)有按預(yù)期執(zhí)行或者Promise的then方法“搶跑”時(shí)你能一眼看穿問(wèn)題所在寫(xiě)出可預(yù)測(cè)、高性能的代碼。簡(jiǎn)單來(lái)說(shuō)你可以把事件循環(huán)想象成一個(gè)永不休息的餐廳服務(wù)員主線(xiàn)程。他的工作流程是從“宏任務(wù)”隊(duì)列比如客人點(diǎn)餐里取一個(gè)任務(wù)處理處理完后他會(huì)立刻檢查“微任務(wù)”隊(duì)列比如客人要求加杯水、換張紙巾這類(lèi)小需求并一口氣把所有微任務(wù)都處理完然后再去取下一個(gè)宏任務(wù)。這個(gè)“處理完一個(gè)宏任務(wù)就清空所有微任務(wù)”的規(guī)則是理解一切異步順序問(wèn)題的鑰匙。無(wú)論是Vue的nextTick還是Node.js的process.nextTick其底層原理都繞不開(kāi)這對(duì)概念。2. 核心概念深度解析宏任務(wù)與微任務(wù)的定義與來(lái)源2.1 宏任務(wù)由宿主環(huán)境發(fā)起的“大塊工作”宏任務(wù)MacroTask代表了瀏覽器或Node.js環(huán)境需要執(zhí)行的、離散的、獨(dú)立的工作單元。你可以把它理解為事件循環(huán)每次“輪回”中從任務(wù)隊(duì)列里取出的那個(gè)待辦事項(xiàng)。常見(jiàn)的宏任務(wù)來(lái)源包括腳本執(zhí)行一個(gè)script標(biāo)簽內(nèi)的整體代碼塊本身就是一個(gè)宏任務(wù)。用戶(hù)交互事件click,mousemove,keydown等事件的回調(diào)。定時(shí)器setTimeout,setInterval設(shè)定的回調(diào)。I/O操作網(wǎng)絡(luò)請(qǐng)求如fetch、XMLHttpRequest完成后的回調(diào)。渲染事件如requestAnimationFrame注意它在一些實(shí)現(xiàn)中處于渲染階段但通常也視為一種宏任務(wù)。MessageChannel等Web API。注意setTimeout(fn, 0)并不意味著立即執(zhí)行它只是告訴引擎“請(qǐng)?jiān)诖蠹s0毫秒后將fn作為一個(gè)新的宏任務(wù)放入隊(duì)列”。這意味著它必須等待當(dāng)前執(zhí)行棧清空并且當(dāng)前宏任務(wù)產(chǎn)生的所有微任務(wù)都執(zhí)行完畢后才會(huì)輪到它。2.2 微任務(wù)由JavaScript引擎發(fā)起的“緊急后續(xù)工作”微任務(wù)MicroTask是在當(dāng)前宏任務(wù)執(zhí)行結(jié)束后、下一個(gè)宏任務(wù)開(kāi)始前必須立即執(zhí)行完畢的“小任務(wù)”。它們擁有更高的優(yōu)先級(jí)用于處理一些需要盡快執(zhí)行的后續(xù)操作通常與“承諾”P(pán)romise和“觀察”MutationObserver相關(guān)。常見(jiàn)的微任務(wù)來(lái)源包括Promise回調(diào)Promise.then(),Promise.catch(),Promise.finally()中的回調(diào)函數(shù)。這是微任務(wù)最主要的來(lái)源。async/awaitawait表達(dá)式后面的代碼實(shí)際上會(huì)被引擎轉(zhuǎn)換為Promise.then()的鏈?zhǔn)秸{(diào)用因此也屬于微任務(wù)。MutationObserver監(jiān)聽(tīng)DOM變化的回調(diào)。queueMicrotask()HTML5標(biāo)準(zhǔn)提供的、顯式將函數(shù)加入微任務(wù)隊(duì)列的API。process.nextTick()這是Node.js環(huán)境中的一個(gè)特例它的優(yōu)先級(jí)甚至比普通的微任務(wù)還要高。為什么需要微任務(wù)設(shè)想一個(gè)場(chǎng)景你監(jiān)聽(tīng)了一個(gè)按鈕的點(diǎn)擊宏任務(wù)在回調(diào)里你發(fā)起了一個(gè)fetch請(qǐng)求并處理它的Promise。如果沒(méi)有微任務(wù)機(jī)制Promise的回調(diào)會(huì)被當(dāng)作下一個(gè)宏任務(wù)這可能導(dǎo)致基于請(qǐng)求結(jié)果更新DOM的操作被延遲到很久之后用戶(hù)感知上會(huì)有“卡頓”。微任務(wù)機(jī)制確保了在當(dāng)前交互上下文宏任務(wù)結(jié)束后所有相關(guān)的后續(xù)狀態(tài)更新能立即、連續(xù)地發(fā)生從而提供更流暢的用戶(hù)體驗(yàn)。3. 事件循環(huán)機(jī)制的全流程拆解理解了宏任務(wù)和微任務(wù)的定義我們來(lái)看它們是如何在事件循環(huán)這個(gè)舞臺(tái)上協(xié)同工作的。事件循環(huán)是一個(gè)持續(xù)運(yùn)行的循環(huán)其模型可以簡(jiǎn)化為以下步驟執(zhí)行一個(gè)宏任務(wù)從宏任務(wù)隊(duì)列常被稱(chēng)為“任務(wù)隊(duì)列”或“回調(diào)隊(duì)列”中取出最老的一個(gè)任務(wù)推入調(diào)用棧Call Stack開(kāi)始執(zhí)行。這個(gè)任務(wù)可能是一段腳本、一個(gè)事件回調(diào)或一個(gè)定時(shí)器回調(diào)。執(zhí)行棧清空該宏任務(wù)的所有同步代碼會(huì)依次執(zhí)行形成執(zhí)行棧。微任務(wù)檢查點(diǎn)當(dāng)這個(gè)宏任務(wù)的同步代碼全部執(zhí)行完畢執(zhí)行棧為空時(shí)事件循環(huán)并不會(huì)立即去取下一個(gè)宏任務(wù)。它會(huì)進(jìn)入微任務(wù)檢查點(diǎn)。清空微任務(wù)隊(duì)列引擎會(huì)依次執(zhí)行微任務(wù)隊(duì)列中的所有任務(wù)直到隊(duì)列被清空。關(guān)鍵點(diǎn)在于在執(zhí)行一個(gè)微任務(wù)的過(guò)程中如果又產(chǎn)生了新的微任務(wù)例如在一個(gè)then回調(diào)里又返回了一個(gè)新的Promise這些新產(chǎn)生的微任務(wù)也會(huì)被加入到當(dāng)前隊(duì)列的末尾并在本次循環(huán)中被一并執(zhí)行。這個(gè)過(guò)程會(huì)一直持續(xù)到微任務(wù)隊(duì)列完全為空。渲染更新如需要在瀏覽器環(huán)境中清空微任務(wù)隊(duì)列后可能會(huì)進(jìn)行頁(yè)面的重排Reflow與重繪Repaint。requestAnimationFrame回調(diào)通常在這個(gè)階段之前執(zhí)行。循環(huán)往復(fù)完成以上步驟后事件循環(huán)會(huì)回到第1步從宏任務(wù)隊(duì)列中取出下一個(gè)任務(wù)開(kāi)始新的“輪回”。這個(gè)流程可以用一個(gè)簡(jiǎn)單的偽代碼表示while (eventLoop.waitForTask()) { // 1. 取一個(gè)宏任務(wù) const macroTask eventLoop.getNextMacroTask(); execute(macroTask); // 執(zhí)行宏任務(wù)同步代碼 // 2. 清空微任務(wù)隊(duì)列 let microTask; while (microTask eventLoop.getNextMicroTask()) { execute(microTask); } // 3. 瀏覽器中渲染 if (isRepaintTime()) { updateRendering(); } }4. 經(jīng)典代碼執(zhí)行順序分析與實(shí)戰(zhàn)理論說(shuō)再多不如看代碼。我們通過(guò)幾個(gè)逐漸復(fù)雜的例子來(lái)固化你對(duì)執(zhí)行順序的理解。4.1 基礎(chǔ)示例宏任務(wù) vs 微任務(wù)console.log(script start); // 1. 同步代碼立即執(zhí)行 setTimeout(function() { console.log(setTimeout); // 4. 宏任務(wù)最后執(zhí)行 }, 0); Promise.resolve().then(function() { console.log(promise1); // 3. 微任務(wù)在同步代碼后立即執(zhí)行 }).then(function() { console.log(promise2); // 微任務(wù)鏈中的下一個(gè) }); console.log(script end); // 2. 同步代碼立即執(zhí)行輸出順序script start-script end-promise1-promise2-setTimeout執(zhí)行過(guò)程解析整個(gè)腳本本身是一個(gè)宏任務(wù)。先執(zhí)行所有同步代碼輸出script start和script end。同步代碼執(zhí)行完畢執(zhí)行棧清空。開(kāi)始處理微任務(wù)隊(duì)列。微任務(wù)隊(duì)列中有一個(gè)由Promise.resolve().then(...)產(chǎn)生的任務(wù)。執(zhí)行它輸出promise1。執(zhí)行第一個(gè)then回調(diào)時(shí)又返回了一個(gè)新的Promise隱式返回undefined的fulfilled Promise其then回調(diào)輸出promise2作為一個(gè)新的微任務(wù)被加入到當(dāng)前微任務(wù)隊(duì)列的末尾。事件循環(huán)繼續(xù)檢查微任務(wù)隊(duì)列發(fā)現(xiàn)新任務(wù)執(zhí)行并輸出promise2。此時(shí)微任務(wù)隊(duì)列清空。開(kāi)始下一個(gè)事件循環(huán)的宏任務(wù)階段取出setTimeout的回調(diào)并執(zhí)行輸出setTimeout。4.2 進(jìn)階示例微任務(wù)的“插隊(duì)”與連續(xù)執(zhí)行document.addEventListener(click, () { console.log(click 1); Promise.resolve().then(() console.log(promise from click 1)); setTimeout(() console.log(timeout from click 1), 0); }); document.addEventListener(click, () { console.log(click 2); Promise.resolve().then(() console.log(promise from click 2)); setTimeout(() console.log(timeout from click 2), 0); }); // 模擬用戶(hù)點(diǎn)擊一次 document.body.click();輸出順序click 1-click 2-promise from click 1-promise from click 2-timeout from click 1-timeout from click 2執(zhí)行過(guò)程解析document.body.click()是同步代碼它會(huì)同步地觸發(fā)所有綁定的事件處理函數(shù)。因此先輸出click 1再輸出click 2。注意這兩個(gè)click事件的回調(diào)是在同一個(gè)宏任務(wù)即執(zhí)行click()的這個(gè)腳本任務(wù)中連續(xù)執(zhí)行的而不是兩個(gè)獨(dú)立的宏任務(wù)。當(dāng)前宏任務(wù)腳本執(zhí)行的同步代碼全部完成。開(kāi)始清空微任務(wù)隊(duì)列。微任務(wù)隊(duì)列中現(xiàn)在有兩個(gè)任務(wù)promise from click 1和promise from click 2按加入順序。依次執(zhí)行輸出。微任務(wù)隊(duì)列清空。進(jìn)入下一個(gè)事件循環(huán)從宏任務(wù)隊(duì)列中取出第一個(gè)setTimeout回調(diào)執(zhí)行輸出timeout from click 1。執(zhí)行該宏任務(wù)后微任務(wù)隊(duì)列為空本例中未產(chǎn)生新微任務(wù)。再進(jìn)入下一個(gè)事件循環(huán)取出第二個(gè)setTimeout回調(diào)執(zhí)行輸出timeout from click 2。這個(gè)例子清晰地展示了用戶(hù)交互事件回調(diào)如果被同步觸發(fā)它們屬于同一個(gè)宏任務(wù)其產(chǎn)生的微任務(wù)會(huì)在所有同源宏任務(wù)的同步代碼之后、下一個(gè)宏任務(wù)之前被批量處理。4.3 復(fù)雜示例async/await 的實(shí)質(zhì)async/await是語(yǔ)法糖其本質(zhì)是Promise和生成器的結(jié)合。await表達(dá)式會(huì)暫停async函數(shù)的執(zhí)行等待其后的表達(dá)式通常是一個(gè)Promise解決settled然后恢復(fù)執(zhí)行。關(guān)鍵點(diǎn)在于await后面的代碼相當(dāng)于被包裝到了Promise.then()的回調(diào)里因此屬于微任務(wù)。async function async1() { console.log(async1 start); // 2. 同步代碼 await async2(); // await 暫停async2執(zhí)行 console.log(async1 end); // 6. 微任務(wù)在async2的Promise解決后執(zhí)行 } async function async2() { console.log(async2); // 3. 同步代碼 // async函數(shù)默認(rèn)返回一個(gè)Promise這里相當(dāng)于返回 Promise.resolve(undefined) } console.log(script start); // 1. 同步代碼 setTimeout(function() { console.log(setTimeout); // 8. 宏任務(wù)最后執(zhí)行 }, 0); async1(); new Promise(function(resolve) { console.log(promise1); // 4. 同步代碼executor是同步執(zhí)行的 resolve(); }).then(function() { console.log(promise2); // 7. 微任務(wù) }); console.log(script end); // 5. 同步代碼輸出順序script start-async1 start-async2-promise1-script end-async1 end-promise2-setTimeout執(zhí)行過(guò)程解析同步代碼依次執(zhí)行輸出script start。調(diào)用async1()執(zhí)行其內(nèi)部同步代碼輸出async1 start。執(zhí)行await async2()調(diào)用async2()函數(shù)輸出async2。async2函數(shù)返回一個(gè)已解決的Promise。此時(shí)await會(huì)讓出線(xiàn)程async1函數(shù)中await之后的代碼console.log(async1 end)被作為一個(gè)微任務(wù)放入隊(duì)列。繼續(xù)執(zhí)行外部同步代碼遇到new Promise其執(zhí)行器executor函數(shù)是同步執(zhí)行的因此輸出promise1并調(diào)用resolve()。resolve()調(diào)用后其.then()回調(diào)被作為另一個(gè)微任務(wù)放入隊(duì)列。繼續(xù)執(zhí)行同步代碼輸出script end。至此當(dāng)前宏任務(wù)的所有同步代碼執(zhí)行完畢。開(kāi)始清空微任務(wù)隊(duì)列。隊(duì)列中有兩個(gè)微任務(wù)第一個(gè)是async1中await后面的代碼輸出async1 end第二個(gè)是Promise的then回調(diào)輸出promise2。微任務(wù)隊(duì)列清空。進(jìn)入下一個(gè)事件循環(huán)執(zhí)行setTimeout回調(diào)輸出setTimeout。實(shí)操心得很多同學(xué)會(huì)混淆new Promise(executor)中的executor函數(shù)和.then()回調(diào)。記住executor是同步執(zhí)行的用于初始化Promise的狀態(tài)而.then()/catch()/finally()的回調(diào)才是異步的微任務(wù)。await可以被看作是一個(gè)“語(yǔ)法上的暫停點(diǎn)”其后的代碼就是微任務(wù)。5. 在框架與工程中的應(yīng)用與避坑指南理解了原理我們來(lái)看看在真實(shí)項(xiàng)目特別是現(xiàn)代前端框架中如何應(yīng)用并規(guī)避常見(jiàn)問(wèn)題。5.1 Vue.js 的 nextTick 原理Vue的nextTick是一個(gè)非常重要的API用于在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。它的實(shí)現(xiàn)就巧妙地利用了微任務(wù)和宏任務(wù)的優(yōu)先級(jí)。Vue 2.x 內(nèi)部會(huì)嘗試按以下順序選擇nextTick的實(shí)現(xiàn)首選微任務(wù)如果環(huán)境支持Promise則用Promise.then()。降級(jí)方案如果不支持Promise則嘗試MutationObserver也是微任務(wù)。宏任務(wù)兜底如果都不支持最后回退到setImmediate或setTimeout(fn, 0)宏任務(wù)。為什么優(yōu)先使用微任務(wù)因?yàn)閂ue的DOM更新是異步的。當(dāng)你修改響應(yīng)式數(shù)據(jù)后Vue并不會(huì)立即更新DOM而是將這些更新操作推入一個(gè)隊(duì)列。在同一個(gè)事件循環(huán)中無(wú)論你修改了多少次數(shù)據(jù)組件都只會(huì)在下一個(gè)nextTick時(shí)更新一次。使用微任務(wù)如Promise.then作為nextTick的載體可以確保DOM更新在所有同步數(shù)據(jù)變更之后、下一個(gè)宏任務(wù)如用戶(hù)交互、網(wǎng)絡(luò)回調(diào)之前完成。這樣你在nextTick回調(diào)中就能獲取到更新后的DOM同時(shí)避免了不必要的渲染中間態(tài)提升了性能和用戶(hù)體驗(yàn)。示例與避坑// 假設(shè)有一個(gè)響應(yīng)式數(shù)據(jù) this.msg Hello this.msg Changed; console.log(this.$el.textContent); // 可能還是 HelloDOM未更新 this.$nextTick(() { console.log(this.$el.textContent); // 這里是 ChangedDOM已更新 });5.2 在Node.js中的差異Node.js的事件循環(huán)階段比瀏覽器更復(fù)雜分為timers、pending callbacks、idle, prepare、poll、check、close callbacks等多個(gè)階段。但宏任務(wù)和微任務(wù)的核心思想不變。需要特別注意的是process.nextTick()它不屬于任何事件循環(huán)階段而是在當(dāng)前操作完成后、事件循環(huán)繼續(xù)之前立即執(zhí)行。它的優(yōu)先級(jí)高于由Promise產(chǎn)生的微任務(wù)。Promise.resolve().then(() console.log(Promise)); process.nextTick(() console.log(nextTick)); console.log(同步代碼); // 輸出同步代碼 - nextTick - Promise在Node.js中編寫(xiě)高性能服務(wù)時(shí)濫用process.nextTick可能導(dǎo)致I/O饑餓因?yàn)闀?huì)一直執(zhí)行nextTick隊(duì)列而無(wú)法進(jìn)入事件循環(huán)的下一個(gè)階段。通常對(duì)于立即的異步回調(diào)使用setImmediate屬于check階段的宏任務(wù)是更合適的選擇。5.3 常見(jiàn)性能陷阱與編碼最佳實(shí)踐避免在微任務(wù)中執(zhí)行耗時(shí)操作微任務(wù)隊(duì)列會(huì)在當(dāng)前宏任務(wù)結(jié)束后被一次性清空。如果一個(gè)微任務(wù)執(zhí)行時(shí)間過(guò)長(zhǎng)例如進(jìn)行復(fù)雜的計(jì)算或同步的密集循環(huán)會(huì)阻塞頁(yè)面渲染和后續(xù)宏任務(wù)的執(zhí)行導(dǎo)致頁(yè)面“卡死”。對(duì)于耗時(shí)操作應(yīng)使用setTimeout或Web Worker將其拆分為獨(dú)立的宏任務(wù)或放到其他線(xiàn)程。警惕微任務(wù)無(wú)限遞歸在微任務(wù)中產(chǎn)生新的微任務(wù)并且沒(méi)有終止條件會(huì)導(dǎo)致事件循環(huán)一直停留在微任務(wù)檢查點(diǎn)永遠(yuǎn)無(wú)法進(jìn)入下一個(gè)宏任務(wù)和渲染階段造成頁(yè)面無(wú)響應(yīng)。// 危險(xiǎn)示例 function infiniteMicrotask() { Promise.resolve().then(infiniteMicrotask); } infiniteMicrotask(); // 從此瀏覽器將卡死在此處合理拆分任務(wù)對(duì)于需要處理大量數(shù)據(jù)的循環(huán)可以考慮使用類(lèi)似“分時(shí)”的技術(shù)用setTimeout或requestAnimationFrame將任務(wù)拆分成多個(gè)小宏任務(wù)執(zhí)行給瀏覽器留出渲染和響應(yīng)用戶(hù)輸入的時(shí)間。function processLargeArray(array, callback) { let chunkSize 100; let index 0; function doChunk() { let chunk array.slice(index, index chunkSize); // 處理chunk... index chunkSize; if (index array.length) { // 使用宏任務(wù)拆分讓出控制權(quán) setTimeout(doChunk, 0); // 或者使用 requestAnimationFrame 更平滑 // requestAnimationFrame(doChunk); } else { callback(); } } doChunk(); }理解I/O回調(diào)的時(shí)機(jī)網(wǎng)絡(luò)請(qǐng)求fetch/axios的回調(diào)、文件讀取回調(diào)等是宏任務(wù)。如果你在一個(gè)微任務(wù)如Promise鏈中發(fā)起多個(gè)并行請(qǐng)求它們的回調(diào)會(huì)作為獨(dú)立的宏任務(wù)按完成順序進(jìn)入隊(duì)列你無(wú)法精確控制它們的執(zhí)行順序。6. 調(diào)試技巧與問(wèn)題排查實(shí)錄在實(shí)際開(kāi)發(fā)中遇到異步順序問(wèn)題如何調(diào)試死記硬背執(zhí)行順序是不夠的你需要工具和方法。6.1 利用瀏覽器開(kāi)發(fā)者工具現(xiàn)代瀏覽器的“Sources”面板或“Performance”面板是分析事件循環(huán)的利器。斷點(diǎn)調(diào)試在關(guān)鍵的console.log、setTimeout回調(diào)或Promise.then回調(diào)處打上斷點(diǎn)查看調(diào)用棧Call Stack。調(diào)用棧能清晰展示代碼的執(zhí)行路徑幫助你理解當(dāng)前處于哪個(gè)任務(wù)的上下文中。Performance面板錄制錄制一段用戶(hù)操作在“Main”線(xiàn)程的可視化圖表中你可以看到一個(gè)個(gè)任務(wù)塊Task。將鼠標(biāo)懸停上去可以看到是哪個(gè)函數(shù)發(fā)起的任務(wù)如setTimeout,click,Promise等以及任務(wù)的耗時(shí)。微任務(wù)通常不會(huì)單獨(dú)顯示為一個(gè)長(zhǎng)條但它們會(huì)在一個(gè)宏任務(wù)塊內(nèi)部執(zhí)行。6.2 典型問(wèn)題排查清單當(dāng)你發(fā)現(xiàn)代碼執(zhí)行順序不符合預(yù)期時(shí)可以按以下清單自查現(xiàn)象可能原因排查方向setTimeout(fn, 0)沒(méi)有立即執(zhí)行對(duì)“0毫秒”的誤解當(dāng)前宏任務(wù)或微任務(wù)耗時(shí)過(guò)長(zhǎng)檢查setTimeout前的同步代碼和微任務(wù)是否有死循環(huán)或大量計(jì)算。使用performance.now()測(cè)量實(shí)際延遲。Promise鏈中某個(gè).then沒(méi)有執(zhí)行Promise狀態(tài)未改變既未resolve也未reject前一個(gè).then拋出了未捕獲的錯(cuò)誤檢查Promise鏈的源頭是否調(diào)用了resolve/reject。為Promise鏈末尾添加.catch()捕獲全局錯(cuò)誤。DOM更新后立即獲取DOM屬性得到舊值Vue/React等框架的異步更新機(jī)制使用框架提供的nextTickVue或useEffectReact鉤子在更新周期后獲取DOM。頁(yè)面響應(yīng)緩慢感覺(jué)“卡頓”單個(gè)宏任務(wù)或微任務(wù)執(zhí)行時(shí)間過(guò)長(zhǎng)微任務(wù)遞歸爆炸使用Performance面板定位耗時(shí)任務(wù)。檢查是否有在微任務(wù)中進(jìn)行大量同步計(jì)算或DOM操作。Node.js服務(wù)端回調(diào)順序混亂混淆了process.nextTick和setImmediate明確nextTick在當(dāng)前階段立即執(zhí)行setImmediate在事件循環(huán)的check階段執(zhí)行。6.3 一個(gè)真實(shí)的排查案例場(chǎng)景一個(gè)Vue組件中在按鈕點(diǎn)擊事件里先修改了數(shù)據(jù)然后馬上用$refs去調(diào)用一個(gè)子組件的方法但有時(shí)方法調(diào)用失敗提示子組件方法不存在。初步分析這很可能是因?yàn)閿?shù)據(jù)修改觸發(fā)了Vue的異步重新渲染而用$refs訪(fǎng)問(wèn)子組件實(shí)例是同步的。在重新渲染完成前舊的子組件實(shí)例可能已被銷(xiāo)毀新的實(shí)例還未掛載導(dǎo)致$refs訪(fǎng)問(wèn)不到正確實(shí)例。解決方案使用this.$nextTick確保操作在DOM更新之后執(zhí)行。methods: { handleClick() { this.showNewComponent true; // 觸發(fā)異步渲染 this.$nextTick(() { // 此時(shí)新的子組件已掛載 this.$refs.newChild.someMethod(); }); } }深層原理this.$nextTick(callback)將callback推入微任務(wù)隊(duì)列。Vue的渲染更新Watcher的更新也被安排為微任務(wù)。由于微任務(wù)隊(duì)列是先進(jìn)先出FIFO的所以當(dāng)你在數(shù)據(jù)變更后立即調(diào)用$nextTick你的回調(diào)會(huì)被排在整個(gè)組件渲染更新微任務(wù)之后從而保證了訪(fǎng)問(wèn)到的是最新的DOM和組件實(shí)例。理解宏任務(wù)與微任務(wù)最終目的是為了寫(xiě)出更可靠、性能更好的異步代碼。它不是什么高深的魔法而是JavaScript并發(fā)模型的基石。下次當(dāng)你對(duì)代碼執(zhí)行順序感到困惑時(shí)不妨在紙上畫(huà)一畫(huà)事件循環(huán)的流程圖同步棧、宏任務(wù)隊(duì)列、微任務(wù)隊(duì)列。把代碼塊對(duì)號(hào)入座一切都會(huì)變得清晰起來(lái)。記住這個(gè)黃金法則同步代碼永遠(yuǎn)最先執(zhí)行然后清空所有微任務(wù)最后再取下一個(gè)宏任務(wù)。掌握了這個(gè)法則你就掌握了JavaScript異步世界的秩序。 JavaScript事件循環(huán)：宏任務(wù)與微任務(wù)執(zhí)行順序全解析
1. 項(xiàng)目概述從“異步”到“有序”的底層邏輯如果你寫(xiě)過(guò)JavaScript尤其是處理過(guò)網(wǎng)絡(luò)請(qǐng)求、定時(shí)器或者事件監(jiān)聽(tīng)那你肯定對(duì)“異步”這個(gè)概念不陌生。我們常說(shuō)JS是單線(xiàn)程的但瀏覽器卻能同時(shí)做很多事這背后的功臣就是事件循環(huán)Event Loop。而“宏任務(wù)”和“微任務(wù)”正是事件循環(huán)這個(gè)精密調(diào)度系統(tǒng)中的兩個(gè)核心隊(duì)列它們決定了代碼的執(zhí)行順序。理解它們不是死記硬背面試題而是為了在實(shí)戰(zhàn)中當(dāng)你的setTimeout回調(diào)沒(méi)有按預(yù)期執(zhí)行或者Promise的then方法“搶跑”時(shí)你能一眼看穿問(wèn)題所在寫(xiě)出可預(yù)測(cè)、高性能的代碼。簡(jiǎn)單來(lái)說(shuō)你可以把事件循環(huán)想象成一個(gè)永不休息的餐廳服務(wù)員主線(xiàn)程。他的工作流程是從“宏任務(wù)”隊(duì)列比如客人點(diǎn)餐里取一個(gè)任務(wù)處理處理完后他會(huì)立刻檢查“微任務(wù)”隊(duì)列比如客人要求加杯水、換張紙巾這類(lèi)小需求并一口氣把所有微任務(wù)都處理完然后再去取下一個(gè)宏任務(wù)。這個(gè)“處理完一個(gè)宏任務(wù)就清空所有微任務(wù)”的規(guī)則是理解一切異步順序問(wèn)題的鑰匙。無(wú)論是Vue的nextTick還是Node.js的process.nextTick其底層原理都繞不開(kāi)這對(duì)概念。2. 核心概念深度解析宏任務(wù)與微任務(wù)的定義與來(lái)源2.1 宏任務(wù)由宿主環(huán)境發(fā)起的“大塊工作”宏任務(wù)MacroTask代表了瀏覽器或Node.js環(huán)境需要執(zhí)行的、離散的、獨(dú)立的工作單元。你可以把它理解為事件循環(huán)每次“輪回”中從任務(wù)隊(duì)列里取出的那個(gè)待辦事項(xiàng)。常見(jiàn)的宏任務(wù)來(lái)源包括腳本執(zhí)行一個(gè)script標(biāo)簽內(nèi)的整體代碼塊本身就是一個(gè)宏任務(wù)。用戶(hù)交互事件click,mousemove,keydown等事件的回調(diào)。定時(shí)器setTimeout,setInterval設(shè)定的回調(diào)。I/O操作網(wǎng)絡(luò)請(qǐng)求如fetch、XMLHttpRequest完成后的回調(diào)。渲染事件如requestAnimationFrame注意它在一些實(shí)現(xiàn)中處于渲染階段但通常也視為一種宏任務(wù)。MessageChannel等Web API。注意setTimeout(fn, 0)并不意味著立即執(zhí)行它只是告訴引擎“請(qǐng)?jiān)诖蠹s0毫秒后將fn作為一個(gè)新的宏任務(wù)放入隊(duì)列”。這意味著它必須等待當(dāng)前執(zhí)行棧清空并且當(dāng)前宏任務(wù)產(chǎn)生的所有微任務(wù)都執(zhí)行完畢后才會(huì)輪到它。2.2 微任務(wù)由JavaScript引擎發(fā)起的“緊急后續(xù)工作”微任務(wù)MicroTask是在當(dāng)前宏任務(wù)執(zhí)行結(jié)束后、下一個(gè)宏任務(wù)開(kāi)始前必須立即執(zhí)行完畢的“小任務(wù)”。它們擁有更高的優(yōu)先級(jí)用于處理一些需要盡快執(zhí)行的后續(xù)操作通常與“承諾”P(pán)romise和“觀察”MutationObserver相關(guān)。常見(jiàn)的微任務(wù)來(lái)源包括Promise回調(diào)Promise.then(),Promise.catch(),Promise.finally()中的回調(diào)函數(shù)。這是微任務(wù)最主要的來(lái)源。async/awaitawait表達(dá)式后面的代碼實(shí)際上會(huì)被引擎轉(zhuǎn)換為Promise.then()的鏈?zhǔn)秸{(diào)用因此也屬于微任務(wù)。MutationObserver監(jiān)聽(tīng)DOM變化的回調(diào)。queueMicrotask()HTML5標(biāo)準(zhǔn)提供的、顯式將函數(shù)加入微任務(wù)隊(duì)列的API。process.nextTick()這是Node.js環(huán)境中的一個(gè)特例它的優(yōu)先級(jí)甚至比普通的微任務(wù)還要高。為什么需要微任務(wù)設(shè)想一個(gè)場(chǎng)景你監(jiān)聽(tīng)了一個(gè)按鈕的點(diǎn)擊宏任務(wù)在回調(diào)里你發(fā)起了一個(gè)fetch請(qǐng)求并處理它的Promise。如果沒(méi)有微任務(wù)機(jī)制Promise的回調(diào)會(huì)被當(dāng)作下一個(gè)宏任務(wù)這可能導(dǎo)致基于請(qǐng)求結(jié)果更新DOM的操作被延遲到很久之后用戶(hù)感知上會(huì)有“卡頓”。微任務(wù)機(jī)制確保了在當(dāng)前交互上下文宏任務(wù)結(jié)束后所有相關(guān)的后續(xù)狀態(tài)更新能立即、連續(xù)地發(fā)生從而提供更流暢的用戶(hù)體驗(yàn)。3. 事件循環(huán)機(jī)制的全流程拆解理解了宏任務(wù)和微任務(wù)的定義我們來(lái)看它們是如何在事件循環(huán)這個(gè)舞臺(tái)上協(xié)同工作的。事件循環(huán)是一個(gè)持續(xù)運(yùn)行的循環(huán)其模型可以簡(jiǎn)化為以下步驟執(zhí)行一個(gè)宏任務(wù)從宏任務(wù)隊(duì)列常被稱(chēng)為“任務(wù)隊(duì)列”或“回調(diào)隊(duì)列”中取出最老的一個(gè)任務(wù)推入調(diào)用棧Call Stack開(kāi)始執(zhí)行。這個(gè)任務(wù)可能是一段腳本、一個(gè)事件回調(diào)或一個(gè)定時(shí)器回調(diào)。執(zhí)行棧清空該宏任務(wù)的所有同步代碼會(huì)依次執(zhí)行形成執(zhí)行棧。微任務(wù)檢查點(diǎn)當(dāng)這個(gè)宏任務(wù)的同步代碼全部執(zhí)行完畢執(zhí)行棧為空時(shí)事件循環(huán)并不會(huì)立即去取下一個(gè)宏任務(wù)。它會(huì)進(jìn)入微任務(wù)檢查點(diǎn)。清空微任務(wù)隊(duì)列引擎會(huì)依次執(zhí)行微任務(wù)隊(duì)列中的所有任務(wù)直到隊(duì)列被清空。關(guān)鍵點(diǎn)在于在執(zhí)行一個(gè)微任務(wù)的過(guò)程中如果又產(chǎn)生了新的微任務(wù)例如在一個(gè)then回調(diào)里又返回了一個(gè)新的Promise這些新產(chǎn)生的微任務(wù)也會(huì)被加入到當(dāng)前隊(duì)列的末尾并在本次循環(huán)中被一并執(zhí)行。這個(gè)過(guò)程會(huì)一直持續(xù)到微任務(wù)隊(duì)列完全為空。渲染更新如需要在瀏覽器環(huán)境中清空微任務(wù)隊(duì)列后可能會(huì)進(jìn)行頁(yè)面的重排Reflow與重繪Repaint。requestAnimationFrame回調(diào)通常在這個(gè)階段之前執(zhí)行。循環(huán)往復(fù)完成以上步驟后事件循環(huán)會(huì)回到第1步從宏任務(wù)隊(duì)列中取出下一個(gè)任務(wù)開(kāi)始新的“輪回”。這個(gè)流程可以用一個(gè)簡(jiǎn)單的偽代碼表示while (eventLoop.waitForTask()) { // 1. 取一個(gè)宏任務(wù) const macroTask eventLoop.getNextMacroTask(); execute(macroTask); // 執(zhí)行宏任務(wù)同步代碼 // 2. 清空微任務(wù)隊(duì)列 let microTask; while (microTask eventLoop.getNextMicroTask()) { execute(microTask); } // 3. 瀏覽器中渲染 if (isRepaintTime()) { updateRendering(); } }4. 經(jīng)典代碼執(zhí)行順序分析與實(shí)戰(zhàn)理論說(shuō)再多不如看代碼。我們通過(guò)幾個(gè)逐漸復(fù)雜的例子來(lái)固化你對(duì)執(zhí)行順序的理解。4.1 基礎(chǔ)示例宏任務(wù) vs 微任務(wù)console.log(script start); // 1. 同步代碼立即執(zhí)行 setTimeout(function() { console.log(setTimeout); // 4. 宏任務(wù)最后執(zhí)行 }, 0); Promise.resolve().then(function() { console.log(promise1); // 3. 微任務(wù)在同步代碼后立即執(zhí)行 }).then(function() { console.log(promise2); // 微任務(wù)鏈中的下一個(gè) }); console.log(script end); // 2. 同步代碼立即執(zhí)行輸出順序script start-script end-promise1-promise2-setTimeout執(zhí)行過(guò)程解析整個(gè)腳本本身是一個(gè)宏任務(wù)。先執(zhí)行所有同步代碼輸出script start和script end。同步代碼執(zhí)行完畢執(zhí)行棧清空。開(kāi)始處理微任務(wù)隊(duì)列。微任務(wù)隊(duì)列中有一個(gè)由Promise.resolve().then(...)產(chǎn)生的任務(wù)。執(zhí)行它輸出promise1。執(zhí)行第一個(gè)then回調(diào)時(shí)又返回了一個(gè)新的Promise隱式返回undefined的fulfilled Promise其then回調(diào)輸出promise2作為一個(gè)新的微任務(wù)被加入到當(dāng)前微任務(wù)隊(duì)列的末尾。事件循環(huán)繼續(xù)檢查微任務(wù)隊(duì)列發(fā)現(xiàn)新任務(wù)執(zhí)行并輸出promise2。此時(shí)微任務(wù)隊(duì)列清空。開(kāi)始下一個(gè)事件循環(huán)的宏任務(wù)階段取出setTimeout的回調(diào)并執(zhí)行輸出setTimeout。4.2 進(jìn)階示例微任務(wù)的“插隊(duì)”與連續(xù)執(zhí)行document.addEventListener(click, () { console.log(click 1); Promise.resolve().then(() console.log(promise from click 1)); setTimeout(() console.log(timeout from click 1), 0); }); document.addEventListener(click, () { console.log(click 2); Promise.resolve().then(() console.log(promise from click 2)); setTimeout(() console.log(timeout from click 2), 0); }); // 模擬用戶(hù)點(diǎn)擊一次 document.body.click();輸出順序click 1-click 2-promise from click 1-promise from click 2-timeout from click 1-timeout from click 2執(zhí)行過(guò)程解析document.body.click()是同步代碼它會(huì)同步地觸發(fā)所有綁定的事件處理函數(shù)。因此先輸出click 1再輸出click 2。注意這兩個(gè)click事件的回調(diào)是在同一個(gè)宏任務(wù)即執(zhí)行click()的這個(gè)腳本任務(wù)中連續(xù)執(zhí)行的而不是兩個(gè)獨(dú)立的宏任務(wù)。當(dāng)前宏任務(wù)腳本執(zhí)行的同步代碼全部完成。開(kāi)始清空微任務(wù)隊(duì)列。微任務(wù)隊(duì)列中現(xiàn)在有兩個(gè)任務(wù)promise from click 1和promise from click 2按加入順序。依次執(zhí)行輸出。微任務(wù)隊(duì)列清空。進(jìn)入下一個(gè)事件循環(huán)從宏任務(wù)隊(duì)列中取出第一個(gè)setTimeout回調(diào)執(zhí)行輸出timeout from click 1。執(zhí)行該宏任務(wù)后微任務(wù)隊(duì)列為空本例中未產(chǎn)生新微任務(wù)。再進(jìn)入下一個(gè)事件循環(huán)取出第二個(gè)setTimeout回調(diào)執(zhí)行輸出timeout from click 2。這個(gè)例子清晰地展示了用戶(hù)交互事件回調(diào)如果被同步觸發(fā)它們屬于同一個(gè)宏任務(wù)其產(chǎn)生的微任務(wù)會(huì)在所有同源宏任務(wù)的同步代碼之后、下一個(gè)宏任務(wù)之前被批量處理。4.3 復(fù)雜示例async/await 的實(shí)質(zhì)async/await是語(yǔ)法糖其本質(zhì)是Promise和生成器的結(jié)合。await表達(dá)式會(huì)暫停async函數(shù)的執(zhí)行等待其后的表達(dá)式通常是一個(gè)Promise解決settled然后恢復(fù)執(zhí)行。關(guān)鍵點(diǎn)在于await后面的代碼相當(dāng)于被包裝到了Promise.then()的回調(diào)里因此屬于微任務(wù)。async function async1() { console.log(async1 start); // 2. 同步代碼 await async2(); // await 暫停async2執(zhí)行 console.log(async1 end); // 6. 微任務(wù)在async2的Promise解決后執(zhí)行 } async function async2() { console.log(async2); // 3. 同步代碼 // async函數(shù)默認(rèn)返回一個(gè)Promise這里相當(dāng)于返回 Promise.resolve(undefined) } console.log(script start); // 1. 同步代碼 setTimeout(function() { console.log(setTimeout); // 8. 宏任務(wù)最后執(zhí)行 }, 0); async1(); new Promise(function(resolve) { console.log(promise1); // 4. 同步代碼executor是同步執(zhí)行的 resolve(); }).then(function() { console.log(promise2); // 7. 微任務(wù) }); console.log(script end); // 5. 同步代碼輸出順序script start-async1 start-async2-promise1-script end-async1 end-promise2-setTimeout執(zhí)行過(guò)程解析同步代碼依次執(zhí)行輸出script start。調(diào)用async1()執(zhí)行其內(nèi)部同步代碼輸出async1 start。執(zhí)行await async2()調(diào)用async2()函數(shù)輸出async2。async2函數(shù)返回一個(gè)已解決的Promise。此時(shí)await會(huì)讓出線(xiàn)程async1函數(shù)中await之后的代碼console.log(async1 end)被作為一個(gè)微任務(wù)放入隊(duì)列。繼續(xù)執(zhí)行外部同步代碼遇到new Promise其執(zhí)行器executor函數(shù)是同步執(zhí)行的因此輸出promise1并調(diào)用resolve()。resolve()調(diào)用后其.then()回調(diào)被作為另一個(gè)微任務(wù)放入隊(duì)列。繼續(xù)執(zhí)行同步代碼輸出script end。至此當(dāng)前宏任務(wù)的所有同步代碼執(zhí)行完畢。開(kāi)始清空微任務(wù)隊(duì)列。隊(duì)列中有兩個(gè)微任務(wù)第一個(gè)是async1中await后面的代碼輸出async1 end第二個(gè)是Promise的then回調(diào)輸出promise2。微任務(wù)隊(duì)列清空。進(jìn)入下一個(gè)事件循環(huán)執(zhí)行setTimeout回調(diào)輸出setTimeout。實(shí)操心得很多同學(xué)會(huì)混淆new Promise(executor)中的executor函數(shù)和.then()回調(diào)。記住executor是同步執(zhí)行的用于初始化Promise的狀態(tài)而.then()/catch()/finally()的回調(diào)才是異步的微任務(wù)。await可以被看作是一個(gè)“語(yǔ)法上的暫停點(diǎn)”其后的代碼就是微任務(wù)。5. 在框架與工程中的應(yīng)用與避坑指南理解了原理我們來(lái)看看在真實(shí)項(xiàng)目特別是現(xiàn)代前端框架中如何應(yīng)用并規(guī)避常見(jiàn)問(wèn)題。5.1 Vue.js 的 nextTick 原理Vue的nextTick是一個(gè)非常重要的API用于在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。它的實(shí)現(xiàn)就巧妙地利用了微任務(wù)和宏任務(wù)的優(yōu)先級(jí)。Vue 2.x 內(nèi)部會(huì)嘗試按以下順序選擇nextTick的實(shí)現(xiàn)首選微任務(wù)如果環(huán)境支持Promise則用Promise.then()。降級(jí)方案如果不支持Promise則嘗試MutationObserver也是微任務(wù)。宏任務(wù)兜底如果都不支持最后回退到setImmediate或setTimeout(fn, 0)宏任務(wù)。為什么優(yōu)先使用微任務(wù)因?yàn)閂ue的DOM更新是異步的。當(dāng)你修改響應(yīng)式數(shù)據(jù)后Vue并不會(huì)立即更新DOM而是將這些更新操作推入一個(gè)隊(duì)列。在同一個(gè)事件循環(huán)中無(wú)論你修改了多少次數(shù)據(jù)組件都只會(huì)在下一個(gè)nextTick時(shí)更新一次。使用微任務(wù)如Promise.then作為nextTick的載體可以確保DOM更新在所有同步數(shù)據(jù)變更之后、下一個(gè)宏任務(wù)如用戶(hù)交互、網(wǎng)絡(luò)回調(diào)之前完成。這樣你在nextTick回調(diào)中就能獲取到更新后的DOM同時(shí)避免了不必要的渲染中間態(tài)提升了性能和用戶(hù)體驗(yàn)。示例與避坑// 假設(shè)有一個(gè)響應(yīng)式數(shù)據(jù) this.msg Hello this.msg Changed; console.log(this.$el.textContent); // 可能還是 HelloDOM未更新 this.$nextTick(() { console.log(this.$el.textContent); // 這里是 ChangedDOM已更新 });5.2 在Node.js中的差異Node.js的事件循環(huán)階段比瀏覽器更復(fù)雜分為timers、pending callbacks、idle, prepare、poll、check、close callbacks等多個(gè)階段。但宏任務(wù)和微任務(wù)的核心思想不變。需要特別注意的是process.nextTick()它不屬于任何事件循環(huán)階段而是在當(dāng)前操作完成后、事件循環(huán)繼續(xù)之前立即執(zhí)行。它的優(yōu)先級(jí)高于由Promise產(chǎn)生的微任務(wù)。Promise.resolve().then(() console.log(Promise)); process.nextTick(() console.log(nextTick)); console.log(同步代碼); // 輸出同步代碼 - nextTick - Promise在Node.js中編寫(xiě)高性能服務(wù)時(shí)濫用process.nextTick可能導(dǎo)致I/O饑餓因?yàn)闀?huì)一直執(zhí)行nextTick隊(duì)列而無(wú)法進(jìn)入事件循環(huán)的下一個(gè)階段。通常對(duì)于立即的異步回調(diào)使用setImmediate屬于check階段的宏任務(wù)是更合適的選擇。5.3 常見(jiàn)性能陷阱與編碼最佳實(shí)踐避免在微任務(wù)中執(zhí)行耗時(shí)操作微任務(wù)隊(duì)列會(huì)在當(dāng)前宏任務(wù)結(jié)束后被一次性清空。如果一個(gè)微任務(wù)執(zhí)行時(shí)間過(guò)長(zhǎng)例如進(jìn)行復(fù)雜的計(jì)算或同步的密集循環(huán)會(huì)阻塞頁(yè)面渲染和后續(xù)宏任務(wù)的執(zhí)行導(dǎo)致頁(yè)面“卡死”。對(duì)于耗時(shí)操作應(yīng)使用setTimeout或Web Worker將其拆分為獨(dú)立的宏任務(wù)或放到其他線(xiàn)程。警惕微任務(wù)無(wú)限遞歸在微任務(wù)中產(chǎn)生新的微任務(wù)并且沒(méi)有終止條件會(huì)導(dǎo)致事件循環(huán)一直停留在微任務(wù)檢查點(diǎn)永遠(yuǎn)無(wú)法進(jìn)入下一個(gè)宏任務(wù)和渲染階段造成頁(yè)面無(wú)響應(yīng)。// 危險(xiǎn)示例 function infiniteMicrotask() { Promise.resolve().then(infiniteMicrotask); } infiniteMicrotask(); // 從此瀏覽器將卡死在此處合理拆分任務(wù)對(duì)于需要處理大量數(shù)據(jù)的循環(huán)可以考慮使用類(lèi)似“分時(shí)”的技術(shù)用setTimeout或requestAnimationFrame將任務(wù)拆分成多個(gè)小宏任務(wù)執(zhí)行給瀏覽器留出渲染和響應(yīng)用戶(hù)輸入的時(shí)間。function processLargeArray(array, callback) { let chunkSize 100; let index 0; function doChunk() { let chunk array.slice(index, index chunkSize); // 處理chunk... index chunkSize; if (index array.length) { // 使用宏任務(wù)拆分讓出控制權(quán) setTimeout(doChunk, 0); // 或者使用 requestAnimationFrame 更平滑 // requestAnimationFrame(doChunk); } else { callback(); } } doChunk(); }理解I/O回調(diào)的時(shí)機(jī)網(wǎng)絡(luò)請(qǐng)求fetch/axios的回調(diào)、文件讀取回調(diào)等是宏任務(wù)。如果你在一個(gè)微任務(wù)如Promise鏈中發(fā)起多個(gè)并行請(qǐng)求它們的回調(diào)會(huì)作為獨(dú)立的宏任務(wù)按完成順序進(jìn)入隊(duì)列你無(wú)法精確控制它們的執(zhí)行順序。6. 調(diào)試技巧與問(wèn)題排查實(shí)錄在實(shí)際開(kāi)發(fā)中遇到異步順序問(wèn)題如何調(diào)試死記硬背執(zhí)行順序是不夠的你需要工具和方法。6.1 利用瀏覽器開(kāi)發(fā)者工具現(xiàn)代瀏覽器的“Sources”面板或“Performance”面板是分析事件循環(huán)的利器。斷點(diǎn)調(diào)試在關(guān)鍵的console.log、setTimeout回調(diào)或Promise.then回調(diào)處打上斷點(diǎn)查看調(diào)用棧Call Stack。調(diào)用棧能清晰展示代碼的執(zhí)行路徑幫助你理解當(dāng)前處于哪個(gè)任務(wù)的上下文中。Performance面板錄制錄制一段用戶(hù)操作在“Main”線(xiàn)程的可視化圖表中你可以看到一個(gè)個(gè)任務(wù)塊Task。將鼠標(biāo)懸停上去可以看到是哪個(gè)函數(shù)發(fā)起的任務(wù)如setTimeout,click,Promise等以及任務(wù)的耗時(shí)。微任務(wù)通常不會(huì)單獨(dú)顯示為一個(gè)長(zhǎng)條但它們會(huì)在一個(gè)宏任務(wù)塊內(nèi)部執(zhí)行。6.2 典型問(wèn)題排查清單當(dāng)你發(fā)現(xiàn)代碼執(zhí)行順序不符合預(yù)期時(shí)可以按以下清單自查現(xiàn)象可能原因排查方向setTimeout(fn, 0)沒(méi)有立即執(zhí)行對(duì)“0毫秒”的誤解當(dāng)前宏任務(wù)或微任務(wù)耗時(shí)過(guò)長(zhǎng)檢查setTimeout前的同步代碼和微任務(wù)是否有死循環(huán)或大量計(jì)算。使用performance.now()測(cè)量實(shí)際延遲。Promise鏈中某個(gè).then沒(méi)有執(zhí)行Promise狀態(tài)未改變既未resolve也未reject前一個(gè).then拋出了未捕獲的錯(cuò)誤檢查Promise鏈的源頭是否調(diào)用了resolve/reject。為Promise鏈末尾添加.catch()捕獲全局錯(cuò)誤。DOM更新后立即獲取DOM屬性得到舊值Vue/React等框架的異步更新機(jī)制使用框架提供的nextTickVue或useEffectReact鉤子在更新周期后獲取DOM。頁(yè)面響應(yīng)緩慢感覺(jué)“卡頓”單個(gè)宏任務(wù)或微任務(wù)執(zhí)行時(shí)間過(guò)長(zhǎng)微任務(wù)遞歸爆炸使用Performance面板定位耗時(shí)任務(wù)。檢查是否有在微任務(wù)中進(jìn)行大量同步計(jì)算或DOM操作。Node.js服務(wù)端回調(diào)順序混亂混淆了process.nextTick和setImmediate明確nextTick在當(dāng)前階段立即執(zhí)行setImmediate在事件循環(huán)的check階段執(zhí)行。6.3 一個(gè)真實(shí)的排查案例場(chǎng)景一個(gè)Vue組件中在按鈕點(diǎn)擊事件里先修改了數(shù)據(jù)然后馬上用$refs去調(diào)用一個(gè)子組件的方法但有時(shí)方法調(diào)用失敗提示子組件方法不存在。初步分析這很可能是因?yàn)閿?shù)據(jù)修改觸發(fā)了Vue的異步重新渲染而用$refs訪(fǎng)問(wèn)子組件實(shí)例是同步的。在重新渲染完成前舊的子組件實(shí)例可能已被銷(xiāo)毀新的實(shí)例還未掛載導(dǎo)致$refs訪(fǎng)問(wèn)不到正確實(shí)例。解決方案使用this.$nextTick確保操作在DOM更新之后執(zhí)行。methods: { handleClick() { this.showNewComponent true; // 觸發(fā)異步渲染 this.$nextTick(() { // 此時(shí)新的子組件已掛載 this.$refs.newChild.someMethod(); }); } }深層原理this.$nextTick(callback)將callback推入微任務(wù)隊(duì)列。Vue的渲染更新Watcher的更新也被安排為微任務(wù)。由于微任務(wù)隊(duì)列是先進(jìn)先出FIFO的所以當(dāng)你在數(shù)據(jù)變更后立即調(diào)用$nextTick你的回調(diào)會(huì)被排在整個(gè)組件渲染更新微任務(wù)之后從而保證了訪(fǎng)問(wèn)到的是最新的DOM和組件實(shí)例。理解宏任務(wù)與微任務(wù)最終目的是為了寫(xiě)出更可靠、性能更好的異步代碼。它不是什么高深的魔法而是JavaScript并發(fā)模型的基石。下次當(dāng)你對(duì)代碼執(zhí)行順序感到困惑時(shí)不妨在紙上畫(huà)一畫(huà)事件循環(huán)的流程圖同步棧、宏任務(wù)隊(duì)列、微任務(wù)隊(duì)列。把代碼塊對(duì)號(hào)入座一切都會(huì)變得清晰起來(lái)。記住這個(gè)黃金法則同步代碼永遠(yuǎn)最先執(zhí)行然后清空所有微任務(wù)最后再取下一個(gè)宏任務(wù)。掌握了這個(gè)法則你就掌握了JavaScript異步世界的秩序。