>[danger]對Js的事件循環的理解？ >[info]建議回答 * Js是單線程，但是瀏覽器是多線程。 * Js中采用了**事件循環**（Event Loop）來執行**異步任務**。 * 所以，**事件循環是一種異步編程模型**，事件循環會不斷地從**任務隊列**（Task Queue）中取出待處理的任務并執行，直到任務隊列為空為止。任務可以分為兩類：**宏任務**（Macro Task）和**微任務**（Micro Task）。 * **微任務會優先于宏任務執行** >[info]技術詳解 Js是單線程，但是瀏覽器是多線程。單線程是為了避免UI操作混亂，所有和UI操作相關的開發語言都應該是單線程。 JavaScript 是一門單線程的編程語言，它采用了**事件循環**（Event Loop）來執行**異步任務**。 ## 基本概念 - **事件循環是一種異步編程模型**，事件循環會不斷地從任務隊列（Task Queue）中取出待處理的任務并執行，直到任務隊列為空為止。任務可以分為兩類：宏任務（Macro Task）和微任務（Micro Task）。 - 宏任務包括了整體代碼塊、setTimeout、setInterval、setImmediate、I/O 操作等。當宏任務被添加到任務隊列時，事件循環會檢查當前是否有正在執行的宏任務，如果有，則繼續執行當前宏任務；如果沒有，則取出任務隊列中的第一個宏任務，并執行它。 - 微任務包括了 Promise.then、MutationObserver 等。當微任務被添加到任務隊列時，它們會優先于下一個宏任務執行。也就是說，當宏任務執行完畢后，如果存在微任務，則會立即執行所有的微任務，直到微任務隊列為空為止。然后再執行下一個宏任務。 ## 事件循環流程 JavaScript 的事件循環流程如下： 1. 執行全局主線程代碼，遇到宏任務時，將其放入宏任務隊列中。 2. 遇到微任務時，將其放入微任務隊列中。 3. 主線程代碼執行完畢后，先執行所有微任務，直到微任務隊列為空為止。 4. 取出宏任務隊列中的第一個任務，執行它，并重復步驟 2 和步驟 3，直到宏任務隊列為空為止。 ## 示例代碼 以下是一個示例代碼，展示了事件循環的執行過程： ~~~ 復制代碼console.log('1'); setTimeout(() => { console.log('2'); Promise.resolve().then(() => { console.log('3'); }); }); Promise.resolve().then(() => { console.log('4'); setTimeout(() => { console.log('5'); }, 0); }); console.log('6'); // 輸出結果： // 1 // 6 // 4 // 2 // 3 // 5 ~~~ 1. 首先，執行全局主線程代碼，輸出 `1` 和 `6`。然后，遇到微任務 `Promise.resolve().then(() => { console.log('4'); ... })`，將其放入微任務隊列中。 2. 接著，執行宏任務 `setTimeout(() => { console.log('2'); ... })`，將其放入宏任務隊列中，同時遇到微任務 `Promise.resolve().then(() => { console.log('3'); })`，將其放入微任務隊列中。此時，微任務隊列中有一個任務，宏任務隊列中有一個任務。因為存在微任務，所以執行所有微任務，即輸出 `4` 和 `3`。然后繼續執行宏任務隊列中的第一個任務，輸出 `2`，并將另一個宏任務 `setTimeout(() => { console.log('5'); }, 0)` 放入宏任務隊列中。 3. 最后，因為微任務隊列為空，事件循環結束。輸出結果為 `1, 6, 4, 2, 3, 5`。 >參考鏈接 - [腦圖：事件循環](https://naotu.baidu.com/file/5c774804acc0047a92171002cef27459?token=520c03781679fb20)