JavaScript是單線程，但通過事件循環(huán)處理並發(fā)，該事件循環(huán)可以協(xié)調(diào)呼叫堆棧，回調(diào)隊列（任務隊列），Microtask隊列和Web API；當異步操作完成後，將其回調(diào)放置在任務隊列（例如Settiemout）或Microtask隊列（例如，Promise..then）中；事件循環(huán)在每個任務之前處理所有微型掩體，解釋了為什麼即使零延遲也要在Settimeout之前進行回調(diào)；這導致示例中的輸出順序1、4、3、2； MicroTask濫用可以阻止UI，因為渲染等待Microtask隊列清除； node.js添加了與process.nexttick（）的複雜性，該nexttick（）在其他微型箱之前運行，使其優(yōu)先級高於承諾。了解這些機制有助於避免正時錯誤和性能問題。

JavaScript的事件循環(huán)和並發(fā)模型是理解語言如何處理異步操作的基礎，即使它在單個線程上運行。儘管是單線程，但JavaScript可以執(zhí)行非阻滯I/O並隨著時間的推移處理多個任務 - 感謝其事件循環(huán)和運行時環(huán)境（例如node.js或瀏覽器）。讓我們清楚地分解它。

JavaScript如何處理單個線程並發(fā)

JavaScript以單個呼叫堆棧執(zhí)行代碼的核心 - 僅一次操作一次運行。但是，如果它是單線程，它如何設法處理諸如計時器，HTTP請求或用戶事件之類的異步任務，而無需凍結整個應用程序？

答案在於其並發(fā)模型，該模型依賴於：

• 呼叫堆棧
• 回調(diào)隊列（或任務隊列）
• 微型箱隊列
• 事件循環(huán)

這些組件借助Web API （瀏覽器）或C綁定（以Node.js為單位）來卸載異步操作。

例如：

 console.log（“ 1”）;

settimeout（（）=> {
  console.log（“ 2”）;
}，0）;

Promise.resolve（）。然後（（）=> {
  console.log（“ 3”）;
}）;

console.log（“ 4”）;

您可能希望輸出為1, 2, 3, 4 ，但實際上是：

 1
4
3
2

為什麼？由於事件循環(huán)如何優(yōu)先考慮不同類型的回調(diào)。

事件循環(huán)在行動中：任務與微型箱

當異步操作完成後，他們的回調(diào)將以不同的排隊方式放置：

• 任務隊列（回調(diào)隊列） ：持有setTimeout ， setInterval ，I/O，DOM Events等的回調(diào)。
• MicroTask隊列：持有Promise.then/catch/finally queueMicrotask和MutationObserver 。

事件循環(huán)按特定順序檢查這些隊列：

1. 運行所有同步代碼（調(diào)用堆棧）。
2. 堆棧為空後，（按順序）處理所有微型箱。
3. 然後，從任務隊列中選擇一個任務並運行它。
4. 重複。

這意味著即使在計時器之後添加它們， Microtasks始終在任何新任務之前運行。

回到我們之前的示例：

 console.log（“ 1”）; //同步
settimeout（（）=> console.log（“ 2”））; // 任務
promise.resolve（）。然後（（）=> console.log（“ 3”））; //微型箱
console.log（“ 4”）; //同步

執(zhí)行流：

• 日誌“ 1”
• setTimeout →轉到Web API，後來入選任務
• 承諾已解決→小件排隊
• 日誌“ 4”
• 呼叫堆?？铡录h(huán)檢查Microtask隊列→運行“ 3”
• 然後從任務隊列→運行“ 2”

因此： 1, 4, 3, 2

常見的陷阱和實際含義

了解微型和任務之間的差異有助於避免性能問題和邏輯錯誤。

1。濫用微掩埋可以阻止UI

由於Microtasks在下一個任務之前（以及渲染之前）運行，因此淹沒Microtask隊列可以延遲渲染和用戶交互。

讓計數(shù)= 0;
功能recurse（）{
  數(shù)數(shù) ;
  console.log（count）;
  promise.resolve（）。然後（recurse）;
}
recurse（）;

這會創(chuàng)建無限的微型封鎖 -瀏覽器無法呈現(xiàn)，響應點擊或運行計時器，直到耗盡了微型箱隊列為止。它有效地阻止了UI。

2。在異步代碼中訂單重要

混合setTimeout ， Promise和queueMicrotask可能會導致微妙的時機錯誤：

 settimeout（（）=> console.log（“ timeout”），0）;
queuemicrotask（（）=> console.log（“ micro1”））;
promise.resolve（）。然後（（）=> console.log（“ promise”））;
queuemicrotask（（）=> console.log（“ micro2”））;

輸出：

 micro1
承諾
micro2
暫停

無論何時安排，所有微型掩體都在超時回調(diào)之前執(zhí)行。

Node.js vs瀏覽器：輕微差異

儘管核心模型是相同的，但node.js有其他怪癖：

• process.nextTick() ：一個在其他微型掩體之前運行的特殊微型箱（甚至承諾）。

 promise.resolve（）。然後（（）=> console.log（“ promise”））;
process.nexttick（（）=> console.log（“ nextTick”））;

輸出node.js：

 NextTick
承諾

因此， nextTick優(yōu)先級高於承諾的Microtasks，請仔細使用它。

關鍵要點

• JavaScript是單線程，但使用事件循環(huán)來處理並發(fā)。
• 事件循環(huán)不斷檢查：
  • 調(diào)用堆棧（運行同步代碼）
  • Microtask隊列（運行全部）
  • 任務隊列（運行一個）
• 在任務（計時器，I/O）之前運行的Microtasks （承諾， queueMicrotask ）。
• 避免使用無限的微型循環(huán) - 它們阻止事件循環(huán)。
• 在node.js中， process.nextTick()優(yōu)先級高於承諾的微型釋放。

了解此模型有助於調(diào)試時正式問題，優(yōu)化性能並編寫更可預測的異步代碼。

基本上，事件循環(huán)不是魔術，而是一個循環(huán)，可以通過仔細管理何時運行的操作來保持應用程序的響應。

以上是掌握JavaScript事件循環(huán)和並發(fā)模型的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！