JavaScript 事件循環(huán)中微任務(wù)和宏任務(wù)有什么區(qū)別，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、江城網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為江城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

事件循環(huán)：微任務(wù)和宏任務(wù)

瀏覽器中 JavaScript 的執(zhí)行流程和 Node.js 中的流程都是基于 事件循環(huán) 的。

理解事件循環(huán)的工作方式對于代碼優(yōu)化很重要，有時對于正確的架構(gòu)也很重要。

在本章中，我們首先介紹有關(guān)事件循環(huán)工作方式的理論細(xì)節(jié)，然后介紹該知識的實(shí)際應(yīng)用。

事件循環(huán)

事件循環(huán) 的概念非常簡單。它是一個在 JavaScript 引擎等待任務(wù)，執(zhí)行任務(wù)和進(jìn)入休眠狀態(tài)等待更多任務(wù)這幾個狀態(tài)之間轉(zhuǎn)換的無限循環(huán)。

引擎的一般算法：

1.當(dāng)有任務(wù)時：

• 從最先進(jìn)入的任務(wù)開始執(zhí)行。

2.休眠直到出現(xiàn)任務(wù)，然后轉(zhuǎn)到第 1 步。

當(dāng)我們?yōu)g覽一個網(wǎng)頁時就是上述這種形式。JavaScript 引擎大多數(shù)時候不執(zhí)行任何操作，它僅在腳本/處理程序/事件激活時執(zhí)行。

任務(wù)示例：

• 當(dāng)外部腳本<script src="..."> 加載完成時，任務(wù)就是執(zhí)行它。

• 當(dāng)用戶移動鼠標(biāo)時，任務(wù)就是派生出 mousemove 事件和執(zhí)行處理程序。

• 當(dāng)安排的（scheduled）setTimeout 時間到達(dá)時，任務(wù)就是執(zhí)行其回調(diào)。

• &hellip;&hellip;諸如此類。

設(shè)置任務(wù) &mdash;&mdash; 引擎處理它們 &mdash;&mdash; 然后等待更多任務(wù)(即休眠，幾乎不消耗 CPU 資源)。

一個任務(wù)到來時，引擎可能正處于繁忙狀態(tài)，那么這個任務(wù)就會被排入隊列。

多個任務(wù)組成了一個隊列，即所謂的“宏任務(wù)隊列”(v8 術(shù)語)：

例如，當(dāng)引擎正在忙于執(zhí)行一段 script 時，用戶可能會移動鼠標(biāo)而產(chǎn)生 mousemove 事件，setTimeout  或許也剛好到期，以及其他任務(wù)，這些任務(wù)組成了一個隊列，如上圖所示。

隊列中的任務(wù)基于“先進(jìn)先出”的原則執(zhí)行。當(dāng)瀏覽器引擎執(zhí)行完 script 后，它會處理 mousemove 事件，然后處理 setTimeout  處理程序，依此類推。

到目前為止，很簡單，對吧?

兩個細(xì)節(jié)：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 引擎執(zhí)行任務(wù)時永遠(yuǎn)不會進(jìn)行渲染(render)。如果任務(wù)執(zhí)行需要很長一段時間也沒關(guān)系。僅在任務(wù)完成后才會繪制對 DOM 的更改。

3. 如果一項(xiàng)任務(wù)執(zhí)行花費(fèi)的時間過長，瀏覽器將無法執(zhí)行其他任務(wù)，例如處理用戶事件。因此，在一定時間后，瀏覽器會拋出一個如“頁面未響應(yīng)”之類的警報，建議你終止這個任務(wù)。這種情況常發(fā)生在有大量復(fù)雜的計算或?qū)е滤姥h(huán)的程序錯誤時。

以上是理論知識?，F(xiàn)在，讓我們來看看如何應(yīng)用這些知識。

用例 1：拆分 CPU 過載任務(wù)

假設(shè)我們有一個 CPU 過載任務(wù)。

例如，語法高亮(用來給本頁面中的示例代碼著色)是相當(dāng)耗費(fèi) CPU 資源的任務(wù)。為了高亮顯示代碼，它執(zhí)行分析，創(chuàng)建很多著了色的元素，然后將它們添加到文檔中  &mdash;&mdash; 對于文本量大的文檔來說，需要耗費(fèi)很長時間。

當(dāng)引擎忙于語法高亮?xí)r，它就無法處理其他 DOM  相關(guān)的工作，例如處理用戶事件等。它甚至可能會導(dǎo)致瀏覽器“中斷(hiccup)”甚至“掛起(hang)”一段時間，這是不可接受的。

我們可以通過將大任務(wù)拆分成多個小任務(wù)來避免這個問題。高亮顯示前 100 行，然后使用 setTimeout(延時參數(shù)為 0)來安排(schedule)后  100 行的高亮顯示，依此類推。

為了演示這種方法，簡單起見，讓我們寫一個從 1 數(shù)到 1000000000 的函數(shù)，而不寫文本高亮。

如果你運(yùn)行下面這段代碼，你會看到引擎會“掛起”一段時間。對于服務(wù)端 JS  來說這顯而易見，并且如果你在瀏覽器中運(yùn)行它，嘗試點(diǎn)擊頁面上其他按鈕時，你會發(fā)現(xiàn)在計數(shù)結(jié)束之前不會處理其他事件。

let i = 0;  let start = Date.now();  function count() {    // 做一個繁重的任務(wù)   for (let j = 0; j < 1e9; j++) {     i++;   }    alert("Done in " + (Date.now() - start) + 'ms'); }  count();

瀏覽器甚至可能會顯示一個“腳本執(zhí)行時間過長”的警告。

讓我們使用嵌套的 setTimeout 調(diào)用來拆分這個任務(wù)：

let i = 0;  let start = Date.now();  function count() {    // 做繁重的任務(wù)的一部分 (*)   do {     i++;   } while (i % 1e6 != 0);    if (i == 1e9) {     alert("Done in " + (Date.now() - start) + 'ms');   } else {     setTimeout(count); // 安排（schedule）新的調(diào)用 (**)   }  }  count();

現(xiàn)在，瀏覽器界面在“計數(shù)”過程中可以正常使用。

單次執(zhí)行 count 會完成工作 (*) 的一部分，然后根據(jù)需要重新安排(schedule)自身的執(zhí)行 (**)：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 首先執(zhí)行計數(shù)：i=1...1000000。

3. 然后執(zhí)行計數(shù)：i=1000001..2000000。

4. &hellip;&hellip;以此類推。

現(xiàn)在，如果在引擎忙于執(zhí)行第一部分時出現(xiàn)了一個新的副任務(wù)(例如 onclick  事件)，則該任務(wù)會被排入隊列，然后在第一部分執(zhí)行結(jié)束時，并在下一部分開始執(zhí)行前，會執(zhí)行該副任務(wù)。周期性地在兩次 count 執(zhí)行期間返回事件循環(huán)，這為  JavaScript 引擎提供了足夠的“空氣”來執(zhí)行其他操作，以響應(yīng)其他的用戶行為。

值得注意的是這兩種變體 &mdash;&mdash; 是否使用了 setTimeout 對任務(wù)進(jìn)行拆分 &mdash;&mdash; 在執(zhí)行速度上是相當(dāng)?shù)?。在?zhí)行計數(shù)的總耗時上沒有多少差異。

為了使兩者耗時更接近，讓我們來做一個改進(jìn)。

我們將要把調(diào)度(scheduling)移動到 count() 的開頭：

let i = 0;  let start = Date.now();  function count() {    // 將調(diào)度（scheduling）移動到開頭   if (i < 1e9 - 1e6) {     setTimeout(count); // 安排（schedule）新的調(diào)用   }    do {     i++;   } while (i % 1e6 != 0);    if (i == 1e9) {     alert("Done in " + (Date.now() - start) + 'ms');   }  }  count();

現(xiàn)在，當(dāng)我們開始調(diào)用 count() 時，會看到我們需要對 count() 進(jìn)行更多調(diào)用，我們就會在工作前立即安排(schedule)它。

如果你運(yùn)行它，你很容易注意到它花費(fèi)的時間明顯減少了。

為什么?

這很簡單：你應(yīng)該還記得，多個嵌套的 setTimeout 調(diào)用在瀏覽器中的最小延遲為 4ms。即使我們設(shè)置了 0，但還是  4ms(或者更久一些)。所以我們安排(schedule)得越早，運(yùn)行速度也就越快。

最后，我們將一個繁重的任務(wù)拆分成了幾部分，現(xiàn)在它不會阻塞用戶界面了。而且其總耗時并不會長很多。

用例 2：進(jìn)度指示

對瀏覽器腳本中的過載型任務(wù)進(jìn)行拆分的另一個好處是，我們可以顯示進(jìn)度指示。

正如前面所提到的，僅在當(dāng)前運(yùn)行的任務(wù)完成后，才會對 DOM 中的更改進(jìn)行繪制，無論這個任務(wù)運(yùn)行花費(fèi)了多長時間。

從一方面講，這非常好，因?yàn)槲覀兊暮瘮?shù)可能會創(chuàng)建很多元素，將它們一個接一個地插入到文檔中，并更改其樣式 &mdash;&mdash;  訪問者不會看到任何未完成的“中間態(tài)”內(nèi)容。很重要，對吧?

這是一個示例，對 i 的更改在該函數(shù)完成前不會顯示出來，所以我們將只會看到最后的值：

<div id="progress"></div>  <script>    function count() {     for (let i = 0; i < 1e6; i++) {       i++;       progress.innerHTML = i;     }   }    count(); </script>

&hellip;&hellip;但是我們也可能想在任務(wù)執(zhí)行期間展示一些東西，例如進(jìn)度條。

如果我們使用 setTimeout 將繁重的任務(wù)拆分成幾部分，那么變化就會被在它們之間繪制出來。

這看起來更好看：

<div id="progress"></div>  <script>   let i = 0;    function count() {      // 做繁重的任務(wù)的一部分 (*)     do {       i++;       progress.innerHTML = i;     } while (i % 1e3 != 0);      if (i < 1e7) {       setTimeout(count);     }    }    count(); </script>

現(xiàn)在 div 顯示了 i 的值的增長，這就是進(jìn)度條的一種。

用例 3：在事件之后做一些事情

在事件處理程序中，我們可能會決定推遲某些行為，直到事件冒泡并在所有級別上得到處理后。我們可以通過將該代碼包裝到零延遲的 setTimeout  中來做到這一點(diǎn)。

在 創(chuàng)建自定義事件[1] 一章中，我們看到過這樣一個例子：自定義事件 menu-open 被在 setTimeout  中分派(dispatched)，所以它在 click 事件被處理完成之后發(fā)生。

menu.onclick = function() {   // ...    // 創(chuàng)建一個具有被點(diǎn)擊的菜單項(xiàng)的數(shù)據(jù)的自定義事件   let customEvent = new CustomEvent("menu-open", {     bubbles: true   });    // 異步分派（dispatch）自定義事件   setTimeout(() => menu.dispatchEvent(customEvent)); };

宏任務(wù)和微任務(wù)

除了本章中所講的 宏任務(wù)(macrotask) 外，還有在 微任務(wù)隊列[2] 一章中提到的 微任務(wù)(microtask)。

微任務(wù)僅來自于我們的代碼。它們通常是由 promise 創(chuàng)建的：對 .then/catch/finally 處理程序的執(zhí)行會成為微任務(wù)。微任務(wù)也被用于  await 的“幕后”，因?yàn)樗?promise 處理的另一種形式。

還有一個特殊的函數(shù) queueMicrotask(func)，它對 func 進(jìn)行排隊，以在微任務(wù)隊列中執(zhí)行。

每個宏任務(wù)之后，引擎會立即執(zhí)行微任務(wù)隊列中的所有任務(wù)，然后再執(zhí)行其他的宏任務(wù)，或渲染，或進(jìn)行其他任何操作。

例如，看看下面這個示例：

setTimeout(() => alert("timeout"));  Promise.resolve()   .then(() => alert("promise"));  alert("code");

這里的執(zhí)行順序是怎樣的?

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. code 首先顯示，因?yàn)樗浅Ｒ?guī)的同步調(diào)用。

3. promise 第二個出現(xiàn)，因?yàn)?then 會通過微任務(wù)隊列，并在當(dāng)前代碼之后執(zhí)行。

4. timeout 最后顯示，因?yàn)樗且粋€宏任務(wù)。

更詳細(xì)的事件循環(huán)圖示如下(順序是從上到下，即：首先是腳本，然后是微任務(wù)，渲染等)：

微任務(wù)會在執(zhí)行任何其他事件處理，或渲染，或執(zhí)行任何其他宏任務(wù)之前完成。

這很重要，因?yàn)樗_保了微任務(wù)之間的應(yīng)用程序環(huán)境基本相同(沒有鼠標(biāo)坐標(biāo)更改，沒有新的網(wǎng)絡(luò)數(shù)據(jù)等)。

如果我們想要異步執(zhí)行(在當(dāng)前代碼之后)一個函數(shù)，但是要在更改被渲染或新事件被處理之前執(zhí)行，那么我們可以使用 queueMicrotask  來對其進(jìn)行安排(schedule)。

這是一個與前面那個例子類似的，帶有“計數(shù)進(jìn)度條”的示例，但是它使用了 queueMicrotask而不是  setTimeout。你可以看到它在最后才渲染。就像寫的是同步代碼一樣：

<div id="progress"></div>  <script>   let i = 0;    function count() {      // 做繁重的任務(wù)的一部分 (*)     do {       i++;       progress.innerHTML = i;     } while (i % 1e3 != 0);      if (i < 1e6) {       queueMicrotask(count);     }    }    count(); </script>

總結(jié)

更詳細(xì)的事件循環(huán)算法(盡管與 規(guī)范[3] 相比仍然是簡化過的)：

1.從 宏任務(wù) 隊列(例如 "script")中出隊(dequeue)并執(zhí)行最早的任務(wù)。

2.執(zhí)行所有 微任務(wù)：

• 出隊(dequeue)并執(zhí)行最早的微任務(wù)。

• 當(dāng)微任務(wù)隊列非空時：

3.執(zhí)行渲染，如果有。

4.如果宏任務(wù)隊列為空，則休眠直到出現(xiàn)宏任務(wù)。

5.轉(zhuǎn)到步驟 1。

安排(schedule)一個新的 宏任務(wù)：

• 使用零延遲的 setTimeout(f)。

它可被用于將繁重的計算任務(wù)拆分成多個部分，以使瀏覽器能夠?qū)τ脩羰录鞒龇磻?yīng)，并在任務(wù)的各部分之間顯示任務(wù)進(jìn)度。

此外，也被用于在事件處理程序中，將一個行為(action)安排(schedule)在事件被完全處理(冒泡完成)后。

安排一個新的 微任務(wù)：

• 使用 queueMicrotask(f)。

• promise 處理程序也會通過微任務(wù)隊列。

在微任務(wù)之間沒有 UI 或網(wǎng)絡(luò)事件的處理：它們一個立即接一個地執(zhí)行。

所以，我們可以使用 queueMicrotask 來在保持環(huán)境狀態(tài)一致的情況下，異步地執(zhí)行一個函數(shù)。

Web Workers:

對于不應(yīng)該阻塞事件循環(huán)的耗時長的繁重計算任務(wù)，我們可以使用 Web Workers[4]。

這是在另一個并行線程中運(yùn)行代碼的方式。

Web Workers 可以與主線程交換消息，但是它們具有自己的變量和事件循環(huán)。

Web Workers 沒有訪問 DOM 的權(quán)限，因此，它們對于同時使用多個 CPU 內(nèi)核的計算非常有用。

看完上述內(nèi)容，你們掌握 JavaScript 事件循環(huán)中微任務(wù)和宏任務(wù)有什么區(qū)別的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁標(biāo)題：JavaScript事件循環(huán)中微任務(wù)和宏任務(wù)有什么區(qū)別
文章源于：http://vcdvsql.cn/article10/gghcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、用戶體驗(yàn)、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、定制網(wǎng)站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)