瀏覽器和Node.js是怎么樣設(shè)計EventLoop的

這篇文章主要介紹瀏覽器和Node.js是怎么樣設(shè)計EventLoop的，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

瀏覽器的 Event Loop

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

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

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

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

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

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

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

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

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

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

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

宏任務(wù)包括：setTimeout、setInterval、requestAnimationFrame、Ajax、fetch、script 標(biāo)簽的代碼。

微任務(wù)包括：Promise.then、MutationObserver、Object.observe。

怎么理解宏微任務(wù)的劃分呢？

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

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

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

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

Node.js 的 Event loop

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

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

哪里粗糙呢？

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

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

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

解釋一下這五種宏任務(wù)：

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

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

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

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

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

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

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

Node.js 的 Event Loop 并不是瀏覽器那種一次執(zhí)行一個宏任務(wù)，然后執(zhí)行所有的微任務(wù)，而是執(zhí)行完一定數(shù)量的 Timers 宏任務(wù)，再去執(zhí)行所有微任務(wù)，然后再執(zhí)行一定數(shù)量的 Pending 的宏任務(wù)，然后再去執(zhí)行所有微任務(wù)，剩余的 Poll、Check、Close 的宏任務(wù)也是這樣。（訂正：node 11 之前是這樣，node 11 之后改為了每個宏任務(wù)都執(zhí)行所有微任務(wù)了）

為什么這樣呢？

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

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

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

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

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

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

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

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

• Timers 階段：執(zhí)行一定數(shù)量的定時器，也就是 setTimeout、setInterval 的 callback，太多的話留到下次執(zhí)行

• 微任務(wù)：執(zhí)行所有 nextTick 的微任務(wù)，再執(zhí)行其他的普通微任務(wù)

• Pending 階段：執(zhí)行一定數(shù)量的 IO 和網(wǎng)絡(luò)的異常回調(diào)，太多的話留到下次執(zhí)行

• 微任務(wù)：執(zhí)行所有 nextTick 的微任務(wù)，再執(zhí)行其他的普通微任務(wù)

• Idle/Prepare 階段：內(nèi)部用的一個階段

• 微任務(wù)：執(zhí)行所有 nextTick 的微任務(wù)，再執(zhí)行其他的普通微任務(wù)

• Poll 階段：執(zhí)行一定數(shù)量的文件的 data 回調(diào)、網(wǎng)絡(luò)的 connection 回調(diào)，太多的話留到下次執(zhí)行。如果沒有 IO 回調(diào)并且也沒有 timers、check 階段的回調(diào)要處理，就阻塞在這里等待 IO 事件

• 微任務(wù)：執(zhí)行所有 nextTick 的微任務(wù)，再執(zhí)行其他的普通微任務(wù)

• Check 階段：執(zhí)行一定數(shù)量的 setImmediate 的 callback，太多的話留到下次執(zhí)行。

• 微任務(wù)：執(zhí)行所有 nextTick 的微任務(wù)，再執(zhí)行其他的普通微任務(wù)

• Close 階段：執(zhí)行一定數(shù)量的 close 事件的 callback，太多的話留到下次執(zhí)行。

• 微任務(wù)：執(zhí)行所有 nextTick 的微任務(wù)，再執(zhí)行其他的普通微任務(wù)

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

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

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

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

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

對比下瀏覽器的 Event Loop：

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

總結(jié)

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

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

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

Node.js 的 Event Loop 流程是執(zhí)行當(dāng)前階段的一定數(shù)量的宏任務(wù)（剩余的到下個循環(huán)執(zhí)行），然后執(zhí)行所有微任務(wù)，一共有 Timers、Pending、Idle/Prepare、Poll、Check、Close 6 個階段。（訂正：node 11 之前是這樣，node 11 之后改為了每個宏任務(wù)都執(zhí)行所有微任務(wù)了）

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

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

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

以上是“瀏覽器和Node.js是怎么樣設(shè)計EventLoop的”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！