Event Loop 是 JavaScript 的基礎概念，面試必問，平時也經(jīng)常談到，但是有沒有想過為什么會有 Event Loop，它為什么會這樣設計的呢?

今天我們就來探索下原因。

瀏覽器的 Event Loop

JavaScript 是用于實現(xiàn)網(wǎng)頁交互邏輯的，涉及到 dom 操作，如果多個線程同時操作需要做同步互斥的處理，為了簡化就設計成了單線程，但是如果單線程的話，遇到定時邏輯、網(wǎng)絡請求又會阻塞住。怎么辦呢?

可以加一層調(diào)度邏輯。把 JS 代碼封裝成一個個的任務，放在一個任務隊列中，主線程就不斷的取任務執(zhí)行就好了。

每次取任務執(zhí)行，都會創(chuàng)建新的調(diào)用棧。

其中，定時器、網(wǎng)絡請求其實都是在別的線程執(zhí)行的，執(zhí)行完了之后在任務隊列里放個任務，告訴主線程可以繼續(xù)往下執(zhí)行了。

因為這些異步任務是在別的線程執(zhí)行完，然后通過任務隊列通知下主線程，是一種事件機制，所以這個循環(huán)叫做 Event Loop。

這些在其他線程執(zhí)行的異步任務包括定時器(setTimeout、setInterval)，UI 渲染、網(wǎng)絡請求(XHR 或 fetch)。

但是，現(xiàn)在的 Event Loop 有個嚴重的問題，沒有優(yōu)先級的概念，只是按照先后順序來執(zhí)行，那如果有高優(yōu)先級的任務就得不到及時的執(zhí)行了。所以，得設計一套插隊機制。

那就搞一個高優(yōu)先級的任務隊列就好了，每執(zhí)行完一個普通任務，都去把所有高優(yōu)先級的任務給執(zhí)行完，之后再去執(zhí)行普通任務。

有了插隊機制之后，高優(yōu)任務就能得到及時的執(zhí)行。

這就是現(xiàn)在瀏覽器的 Event Loop。

其中普通任務叫做 MacroTask(宏任務)，高優(yōu)任務叫做 MicroTask(微任務)。

宏任務包括：setTimeout、setInterval、requestAnimationFrame、Ajax、fetch、script 標簽的代碼。

微任務包括：Promise.then、MutationObserver、Object.observe。

怎么理解宏微任務的劃分呢?

定時器、網(wǎng)絡請求這種都是在別的線程跑完之后通知主線程的普通異步邏輯，所以都是宏任務。

而高優(yōu)任務的這三種也很好理解，MutationObserver 和 Object.observe 都是監(jiān)聽某個對象的變化的，變化是很瞬時的事情，肯定要馬上響應，不然可能又變了，Promise 是組織異步流程的，異步結束調(diào)用 then 也是很高優(yōu)的。

這就是瀏覽器里的 Event Loop 的設計：設計 Loop 機制和 Task 隊列是為了支持異步，解決邏輯執(zhí)行阻塞主線程的問題，設計 MicroTask 隊列的插隊機制是為了解決高優(yōu)任務盡早執(zhí)行的問題。

但是后來，JS 的執(zhí)行環(huán)境不只是瀏覽器一種了，還有了 Node.js，它同樣也要解決這些問題，但是它設計出來的 Event Loop 更細致一些。

Node.js 的 Event loop

Node.js 是一個新的 JS 運行環(huán)境，它同樣要支持異步邏輯，包括定時器、IO、網(wǎng)絡請求，很明顯，也可以用 Event Loop 那一套來跑。

但是呢，瀏覽器那套 Event Loop 就是為瀏覽器設計的，對于做高性能服務器來說，那種設計還是有點粗糙了。

哪里粗糙呢?

瀏覽器的 Event Loop 只分了兩層優(yōu)先級，一層是宏任務，一層是微任務。但是宏任務之間沒有再劃分優(yōu)先級，微任務之間也沒有再劃分優(yōu)先級。

而 Node.js 任務宏任務之間也是有優(yōu)先級的，比如定時器 Timer 的邏輯就比 IO 的邏輯優(yōu)先級高，因為涉及到時間，越早越準確;而 close 資源的處理邏輯優(yōu)先級就很低，因為不 close 最多多占點內(nèi)存等資源，影響不大。

于是就把宏任務隊列拆成了五個優(yōu)先級：Timers、Pending、Poll、Check、Close。

解釋一下這五種宏任務：

Timers Callback：涉及到時間，肯定越早執(zhí)行越準確，所以這個優(yōu)先級最高很容易理解。

Pending Callback：處理網(wǎng)絡、IO 等異常時的回調(diào)，有的 *niux 系統(tǒng)會等待發(fā)生錯誤的上報，所以得處理下。

Poll Callback：處理 IO 的 data，網(wǎng)絡的 connection，服務器主要處理的就是這個。

Check Callback：執(zhí)行 setImmediate 的回調(diào)，特點是剛執(zhí)行完 IO 之后就能回調(diào)這個。

Close Callback：關閉資源的回調(diào)，晚點執(zhí)行影響也不到，優(yōu)先級最低。

所以呢，Node.js 的 Event Loop 就是這樣跑的了：

還有一點不同要特別注意：

Node.js 的 Event Loop 并不是瀏覽器那種一次執(zhí)行一個宏任務，然后執(zhí)行所有的微任務，而是執(zhí)行完一定數(shù)量的 Timers 宏任務，再去執(zhí)行所有微任務，然后再執(zhí)行一定數(shù)量的 Pending 的宏任務，然后再去執(zhí)行所有微任務，剩余的 Poll、Check、Close 的宏任務也是這樣。

為什么這樣呢?

其實按照優(yōu)先級來看很容易理解：

假設瀏覽器里面的宏任務優(yōu)先級是 1，所以是按照先后順序依次執(zhí)行，也就是一個宏任務，所有的微任務，再一個宏任務，再所有的微任務。

而 Node.js 的 宏任務之間也是有優(yōu)先級的，所以 Node.js 的 Event Loop 每次都是把當前優(yōu)先級的所有宏任務跑完再去跑微任務，然后再跑下一個優(yōu)先級的宏任務。

也就是是一定數(shù)量的 Timers 宏任務，再所有微任務，再一定數(shù)量的 Pending Callback 宏任務，再所有微任務這樣。

為什么說是一定數(shù)量呢?

因為如果某個階段宏任務太多，下個階段就一直執(zhí)行不到了，所以有個上限的限制，剩余的下個 Event Loop 再繼續(xù)執(zhí)行。

除了宏任務有優(yōu)先級，微任務也劃分了優(yōu)先級，多了一個 process.nextTick 的高優(yōu)先級微任務，在所有的普通微任務之前來跑。

所以，Node.js 的 Event Loop 的完整流程就是這樣的：

• Timers 階段：執(zhí)行一定數(shù)量的定時器，也就是 setTimeout、setInterval 的 callback，太多的話留到下次執(zhí)行
• 微任務：執(zhí)行所有 nextTick 的微任務，再執(zhí)行其他的普通微任務
• Pending 階段：執(zhí)行一定數(shù)量的 IO 和網(wǎng)絡的異常回調(diào)，太多的話留到下次執(zhí)行
• 微任務：執(zhí)行所有 nextTick 的微任務，再執(zhí)行其他的普通微任務
• Idle/Prepare 階段：內(nèi)部用的一個階段
• 微任務：執(zhí)行所有 nextTick 的微任務，再執(zhí)行其他的普通微任務
• Poll 階段：執(zhí)行一定數(shù)量的文件的 data 回調(diào)、網(wǎng)絡的 connection 回調(diào)，太多的話留到下次執(zhí)行。如果沒有 IO 回調(diào)并且也沒有 timers、check 階段的回調(diào)要處理，就阻塞在這里等待 IO 事件
• 微任務：執(zhí)行所有 nextTick 的微任務，再執(zhí)行其他的普通微任務
• Check 階段：執(zhí)行一定數(shù)量的 setImmediate 的 callback，太多的話留到下次執(zhí)行。
• 微任務：執(zhí)行所有 nextTick 的微任務，再執(zhí)行其他的普通微任務
• Close 階段：執(zhí)行一定數(shù)量的 close 事件的 callback，太多的話留到下次執(zhí)行。
• 微任務：執(zhí)行所有 nextTick 的微任務，再執(zhí)行其他的普通微任務

比起瀏覽器里的 Event Loop，明顯復雜了很多，但是經(jīng)過我們之前的分析，也能夠理解：

Node.js 對宏任務做了優(yōu)先級劃分，從高到低分別是 Timers、Pending、Poll、Check、Close 這 5 種，也對微任務做了劃分，也就是 nextTick 的微任務和其他微任務。執(zhí)行流程是先執(zhí)行完當前優(yōu)先級的一定數(shù)量的宏任務(剩下的留到下次循環(huán))，然后執(zhí)行 process.nextTick 的微任務，再執(zhí)行普通微任務，之后再執(zhí)行下個優(yōu)先級的一定數(shù)量的宏任務。。這樣不斷循環(huán)。其中還有一個 Idle/Prepare 階段是給 Node.js 內(nèi)部邏輯用的，不需要關心。

改變了瀏覽器 Event Loop 里那種一次執(zhí)行一個宏任務的方式，可以讓高優(yōu)先級的宏任務更早的得到執(zhí)行，但是也設置了個上限，避免下個階段一直得不到執(zhí)行。

還有一個特別要注意的點，就是 poll 階段：如果執(zhí)行到 poll 階段，發(fā)現(xiàn) poll 隊列為空并且 timers 隊列、check 隊列都沒有任務要執(zhí)行，那么就阻塞的等在這里等 IO 事件，而不是空轉。 這點設計也是因為服務器主要是處理 IO 的，阻塞在這里可以更早的響應 IO。

完整的 Node.js 的 Event Loop 是這樣的：

對比下瀏覽器的 Event Loop：

兩個 JS 運行環(huán)境的 Event Loop 整體設計思路是差不多的，只不過 Node.js 的 Event Loop 對宏任務和微任務做了更細粒度的劃分，也很容易理解，畢竟 Node.js 面向的環(huán)境和瀏覽器不同，更重要的是服務端對性能的要求會更高。

總結

JavaScript 最早是用于寫網(wǎng)頁交互邏輯的，為了避免多線程同時修改 dom 的同步問題，設計成了單線程，又為了解決單線程的阻塞問題，加了一層調(diào)度邏輯，也就是 Loop 循環(huán)和 Task 隊列，把阻塞的邏輯放到其他線程跑，從而支持了異步。然后為了支持高優(yōu)先級的任務調(diào)度，又引入了微任務隊列，這就是瀏覽器的 Event Loop 機制：每次執(zhí)行一個宏任務，然后執(zhí)行所有微任務。

Node.js 也是一個 JS 運行環(huán)境，想支持異步同樣要用 Event Loop，只不過服務端環(huán)境更復雜，對性能要求更高，所以 Node.js 對宏微任務都做了更細粒度的優(yōu)先級劃分：

Node.js 里劃分了 5 種宏任務，分別是 Timers、Pending、Poll、Check、Close。又劃分了 2 種微任務，分別是 process.nextTick 的微任務和其他的微任務。

Node.js 的 Event Loop 流程是執(zhí)行當前階段的一定數(shù)量的宏任務(剩余的到下個循環(huán)執(zhí)行)，然后執(zhí)行所有微任務，一共有 Timers、Pending、Idle/Prepare、Poll、Check、Close 6 個階段。

其中 Idle/Prepare 階段是 Node.js 內(nèi)部用的，不用關心。

特別要注意的是 Poll 階段，如果執(zhí)行到這里，poll 隊列為空并且 timers、check 隊列也為空，就一直阻塞在這里等待 IO，直到 timers、check 隊列有回調(diào)再繼續(xù) loop 。

Event Loop 是 JS 為了支持異步和任務優(yōu)先級而設計的一套調(diào)度邏輯，針對瀏覽器、Node.js 等不同環(huán)境有不同的設計(主要是任務優(yōu)先級的劃分粒度不同)，Node.js 面對的環(huán)境更復雜、對性能要求更高，所以 Event Loop 設計的更復雜一些。