avaScript 的 Event Loop（事件循環(huán)）是 JavaScript 運行時環(huán)境（如瀏覽器和 Node.js）的核心機制之一，它使得 JavaScript 能夠處理異步操作而不會阻塞程序的執(zhí)行。了解 Event Loop 對于理解 JavaScript 的非阻塞行為和編寫高效的異步代碼至關(guān)重要。

1. JavaScript 是單線程的

首先，重要的是要理解 JavaScript 是一種單線程的語言。這意味著 JavaScript 在同一時間內(nèi)只能執(zhí)行一個任務(wù)。然而，JavaScript 需要能夠處理各種異步操作（如 AJAX 請求、文件讀取、用戶交互等），這些操作可能會花費很長時間完成。為了解決這個問題，JavaScript 采用了 Event Loop 和 Callback Queues（回調(diào)隊列）。

2. 調(diào)用棧（Call Stack）

調(diào)用棧是 JavaScript 代碼執(zhí)行時的數(shù)據(jù)結(jié)構(gòu)，用于存儲函數(shù)調(diào)用和返回地址。每當(dāng)一個函數(shù)被調(diào)用時，它就會被推入調(diào)用棧，并在函數(shù)執(zhí)行完畢后從棧中彈出。如果調(diào)用棧滿了（即達到了最大調(diào)用深度），則會發(fā)生棧溢出錯誤。

3. 堆（Heap）

堆是用于存儲對象、數(shù)組等引用類型的內(nèi)存區(qū)域。與調(diào)用棧不同，堆是動態(tài)分配的，并且其大小不是固定的。

4. Web APIs

Web APIs 是瀏覽器提供的一組與瀏覽器功能交互的接口，如 DOM 操作、網(wǎng)絡(luò)請求等。這些 API 通常是異步的，并且它們有自己的線程或進程來處理請求。

5. 任務(wù)隊列（Task Queue）和微任務(wù)隊列（Microtask Queue）

當(dāng)異步操作完成時（如 AJAX 請求、setTimeout、Promise 解決等），相應(yīng)的回調(diào)函數(shù)會被放入任務(wù)隊列（或稱為宏任務(wù)隊列）或微任務(wù)隊列中。任務(wù)隊列中的任務(wù)在當(dāng)前的執(zhí)行棧清空后才會被執(zhí)行，而微任務(wù)隊列中的任務(wù)會在當(dāng)前執(zhí)行棧清空后、但下一個宏任務(wù)執(zhí)行前立即執(zhí)行。

6. Event Loop 的工作原理

Event Loop 的工作流程可以概括為以下幾個步驟：

1. 檢查調(diào)用棧：如果調(diào)用棧為空，則繼續(xù)；如果調(diào)用棧不為空，則等待直到調(diào)用棧為空。
2. 執(zhí)行微任務(wù)隊列：一旦調(diào)用棧為空，Event Loop 就會查看微任務(wù)隊列是否有任務(wù)。如果有，它會依次執(zhí)行微任務(wù)隊列中的所有任務(wù)，然后再回到第一步。
3. 執(zhí)行宏任務(wù)隊列：在所有微任務(wù)都執(zhí)行完畢后，Event Loop 會從宏任務(wù)隊列中取出一個任務(wù)放入調(diào)用棧執(zhí)行。這個過程會不斷重復(fù)。

7. 常見的宏任務(wù)和微任務(wù)

• 宏任務(wù)（Macrotasks）：包括 script（整體代碼）、setTimeout、setInterval、setImmediate（Node.js 環(huán)境）、I/O、UI rendering 等。
• 微任務(wù)（Microtasks）：包括 Promise.then、Promise.catch、Promise.finally、MutationObserver、process.nextTick（Node.js 環(huán)境）等。

實例 1：setTimeout 和 Promise

console.log('1');  
  
setTimeout(() => {  
  console.log('setTimeout 宏任務(wù)隊列');  
}, 0);  
  
new Promise((resolve) => {  
  console.log('Promise 立即執(zhí)行');  
  resolve();  
}).then(() => {  
  console.log('then 微任務(wù)隊列');  
});  
  
console.log('2');

//輸出順序
1  
Promise 立即執(zhí)行 
2  
then  微任務(wù)隊列
setTimeout 宏任務(wù)隊列

解釋：

1. 首先，執(zhí)行同步代碼，輸出 1。
2. 然后，setTimeout 被調(diào)用，但因為它是一個宏任務(wù)，所以它的回調(diào)函數(shù)被放入宏任務(wù)隊列中等待。
3. 接下來，new Promise 的構(gòu)造函數(shù)被調(diào)用，立即執(zhí)行并輸出 Promise。resolve() 被調(diào)用，但 .then() 中的回調(diào)函數(shù)是異步的，并且是一個微任務(wù)，所以它會被放入微任務(wù)隊列中。
4. 同步代碼繼續(xù)執(zhí)行，輸出 2。
5. 當(dāng)所有同步代碼執(zhí)行完畢后，Event Loop 開始處理微任務(wù)隊列。它找到 .then() 的回調(diào)函數(shù)并執(zhí)行，輸出 then。
6. 最后，當(dāng)微任務(wù)隊列為空時，Event Loop 轉(zhuǎn)到宏任務(wù)隊列，執(zhí)行 setTimeout 的回調(diào)函數(shù)，輸出 setTimeout。

實例 2：多個 Promise 和 setTimeout

console.log('1');  
  
setTimeout(() => {  
  console.log('setTimeout  宏任務(wù)隊列1');  
  new Promise((resolve) => {  
    console.log('Promise in setTimeout');  
    resolve();  
  }).then(() => {  
    console.log('then in setTimeout');  
  });  
  setTimeout(() => {  
    console.log('setTimeout 宏任務(wù)隊列2');  
  }, 0);  
}, 0);  
  
new Promise((resolve) => {  
  console.log('Promise 立即執(zhí)行1');  
  resolve();  
}).then(() => {  
  console.log('then 微任務(wù)隊列1');  
  new Promise((resolve) => {  
    console.log('Promise 立即執(zhí)行2');  
    resolve();  
  }).then(() => {  
    console.log('then 微任務(wù)隊列2');  
  });  
});  
  
console.log('2');

//輸出順序
1 
Promise 立即執(zhí)行1  
2  
then 微任務(wù)隊列1 
Promise 立即執(zhí)行2  
then 微任務(wù)隊列2
setTimeout  宏任務(wù)隊列1  
Promise in setTimeout  
then in setTimeout  
setTimeout  宏任務(wù)隊列2

解釋：

1. 同步代碼首先執(zhí)行，輸出 1、Promise 1 和 2。
2. .then() 中的回調(diào)函數(shù)作為微任務(wù)被加入微任務(wù)隊列。
3. 第一個 setTimeout 被調(diào)用，它的回調(diào)函數(shù)被加入宏任務(wù)隊列。
4. 當(dāng)所有同步代碼執(zhí)行完畢后，開始執(zhí)行微任務(wù)隊列中的任務(wù)。首先輸出then 微任務(wù)隊列1，然后執(zhí)行 Promise 立即執(zhí)行2 和 then 微任務(wù)隊列2。
5. 微任務(wù)隊列為空后，執(zhí)行宏任務(wù)隊列中的第一個任務(wù)（即第一個 setTimeout 的回調(diào)函數(shù)），輸出相關(guān)日志。
6. 第二個 setTimeout 的回調(diào)函數(shù)也被加入宏任務(wù)隊列，并在當(dāng)前宏任務(wù)執(zhí)行完畢后執(zhí)行。

實例 3：async/await 與 Promise

const async1= async () => {
   console.log('async1 1');  
   await async2();  
   console.log('async1 2');  
}
   
const async2= async () => {
   console.log('async2');  
}
  
console.log('1');  
setTimeout(() => {  
  console.log('setTimeout 宏任務(wù)隊列');  
}, 0);  
  
async1();  
  
new Promise((resolve) => {  
  console.log('promise 立即執(zhí)行');  
  resolve();  
}).then(() => {  
  console.log('then 微任務(wù)隊列');  
});  
  
console.log('2');

//輸出順序
1
async1 1
async2  
promise 立即執(zhí)行
2
async1 2
then 微任務(wù)隊列
setTimeout 宏任務(wù)隊列

解釋：

1. 同步代碼首先執(zhí)行，輸出1。
2. async1() 被調(diào)用，輸出async1 1。
3. await async2() 暫停 async1() 的執(zhí)行，async2() 被調(diào)用并輸出 async2。因為 async2() 沒有返回 Promise 或沒有等待的異步操作，所以 await 后面的代碼在 async2() 執(zhí)行完畢后繼續(xù)執(zhí)行。
4. 同步代碼首先執(zhí)行，輸出promise 立即執(zhí)行和2。
5. 之后async2執(zhí)行完畢后，同步代碼輸出async1 2，
6. 當(dāng)所有同步代碼執(zhí)行完畢后，開始執(zhí)行微任務(wù)隊列中的任務(wù)then 微任務(wù)隊列
7. 最后執(zhí)行宏任務(wù)隊列，輸出setTimeout 宏任務(wù)隊列

結(jié)論

Event Loop 是 JavaScript 異步編程的基石，它使得 JavaScript 能夠在不阻塞主線程的情況下處理各種異步操作。通過理解 Event Loop 的工作原理，我們可以更加高效地編寫異步代碼，避免潛在的錯誤和性能問題。