一文看懂瀏覽器事件循環
實際上瀏覽器的事件循環標準是由 HTML 標準規定的，具體來講就是由whatwg規定的，具體內容能夠參考event-loops in browser。而NodeJS中事件循環其實也略有不一樣，具體能夠參考event-loops in nodejsjavascript
咱們在講解事件模型的時候，屢次提到了事件循環。 事件指的是其所處理的對象就是事件自己，每個瀏覽器都至少有一個事件循環，一個事件循環至少有一個任務隊列。循環指的是其永遠處於一個「無限循環」中。不斷將註冊的回調函數推入到執行棧。html
那麼事件循環到底是用來作什麼的？瀏覽器的事件循環和NodeJS的事件循環有什麼不一樣？讓咱們從零開始，一步一步探究背後的緣由。前端
爲何要有事件循環
JS引擎
要回答這個問題，咱們先來看一個簡單的例子：java
function c() {}
function b() {
c();
}
function a() {
b();
}
a();
以上一段簡單的JS代碼，到底是怎麼被瀏覽器執行的？node
首先，瀏覽器想要執行JS腳本，須要一個「東西」，將JS腳本（本質上是一個純文本），變成一段機器能夠理解並執行的計算機指令。這個「東西」就是JS引擎，它實際上會將JS腳本進行編譯和執行，整個過程很是複雜，這裏再也不過多介紹，感興趣能夠期待下個人V8章節，如無特殊說明，如下都拿V8來舉例子。程序員
有兩個很是核心的構成，執行棧和堆。執行棧中存放正在執行的代碼，堆中存放變量的值，一般是不規則的。web
當V8執行到a()這一行代碼的時候，a會被壓入棧頂。算法
在a的內部，咱們碰到了b()，這個時候b被壓入棧頂。編程
在b的內部，咱們又碰到了c()，這個時候c被壓入棧頂。api
c執行完畢以後，會從棧頂移除。
函數返回到b，b也執行完了，b也從棧頂移除。
一樣a也會被移除。
整個過程用動畫來表示就是這樣的：
(在線觀看)
這個時候咱們尚未涉及到堆內存和執行上下文棧，一切還比較簡單，這些內容咱們放到後面來說。
DOM 和 WEB API
如今咱們有了能夠執行JS的引擎，可是咱們的目標是構建用戶界面，而傳統的前端用戶界面是基於DOM構建的，所以咱們須要引入DOM。DOM是文檔對象模型，其提供了一系列JS能夠直接調用的接口，理論上其能夠提供其餘語言的接口，而不只僅是JS。 並且除了DOM接口能夠給JS調用，瀏覽器還提供了一些WEB API。 DOM也好，WEB API也好，本質上和JS沒有什麼關係，徹底不一回事。JS對應的ECMA規範，V8用來實現ECMA規範，其餘的它無論。 這也是JS引擎和JS執行環境的區別，V8是JS引擎，用來執行JS代碼，瀏覽器和Node是JS執行環境，其提供一些JS能夠調用的API即JS bindings。
因爲瀏覽器的存在，如今JS能夠操做DOM和WEB API了，看起來是能夠構建用戶界面啦。 有一點須要提早講清楚，V8只有棧和堆，其餘諸如事件循環，DOM，WEB API它一律不知。緣由前面其實已經講過了，由於V8只負責JS代碼的編譯執行，你給V8一段JS代碼，它就從頭至尾一口氣執行下去，中間不會中止。
另外這裏我還要繼續提一下，JS執行棧和渲染線程是相互阻塞的。爲何呢？ 本質上由於JS太靈活了，它能夠去獲取DOM中的諸如座標等信息。 若是二者同時執行，就有可能發生衝突，好比我先獲取了某一個DOM節點的x座標，下一時刻座標變了。 JS又用這個「舊的」座標進行計算而後賦值給DOM，衝突便發生了。 解決衝突的方式有兩種：
- 限制JS的能力，你只能在某些時候使用某些API。 這種作法極其複雜，還會帶來不少使用不便。
- JS和渲染線程不一樣時執行就行了，一種方法就是如今普遍採用的
相互阻塞。 實際上這也是目前瀏覽器普遍採用的方式。
單線程 or 多線程 or 異步
前面提到了你給V8一段JS代碼，它就從頭至尾一口氣執行下去，中間不會中止。 爲何不中止，能夠設計成可中止麼，就好像C語言同樣？
假設咱們須要獲取用戶信息，獲取用戶的文章，獲取用的朋友。
單線程無異步
因爲是單線程無異步，所以咱們三個接口須要採用同步方式。
fetchUserInfoSync().then(doSomethingA); // 1s fetchMyArcticlesSync().then(doSomethingB);// 3s fetchMyFriendsSync().then(doSomethingC);// 2s
因爲上面三個請求都是同步執行的，所以上面的代碼會先執行fetchUserInfoSync，一秒以後執行fetchMyArcticlesSync，再過三秒執行fetchMyFriendsSync。 最可怕的是咱們剛纔說了JS執行棧和渲染線程是相互阻塞的。 所以用戶就在這期間根本沒法操做，界面沒法響應，這顯然是沒法接受的。
多線程無異步
因爲是多線程無異步，雖然咱們三個接口仍然須要採用同步方式，可是咱們能夠將代碼分別在多個線程執行，好比咱們將這段代碼放在三個線程中執行。
線程一：
fetchUserInfoSync().then(doSomethingA); // 1s
線程二：
fetchMyArcticlesSync().then(doSomethingB); // 3s
線程三：
fetchMyFriendsSync().then(doSomethingC); // 2s
因爲三塊代碼同時執行，所以總的時間最理想的狀況下取決與最慢的時間，也就是3s，這一點和使用異步的方式是同樣的（固然前提是請求之間無依賴）。爲何要說最理想呢？因爲三個線程均可以對DOM和堆內存進行訪問，所以頗有可能會衝突，衝突的緣由和我上面提到的JS線程和渲染線程的衝突的緣由沒有什麼本質不一樣。所以最理想狀況沒有任何衝突的話是3s，可是若是有衝突，咱們就須要藉助於諸如鎖來解決，這樣時間就有可能高於3s了。 相應地編程模型也會更復雜，處理過鎖的程序員應該會感同身受。
單線程 + 異步
若是仍是使用單線程，改爲異步是否是會好點？問題的是關鍵是如何實現異步呢？這就是咱們要講的主題 - 事件循環。
事件循環到底是怎麼實現異步的？
咱們知道瀏覽器中JS線程只有一個，若是沒有事件循環，就會形成一個問題。 即若是JS發起了一個異步IO請求，在等待結果返回的這個時間段，後面的代碼都會被阻塞。 咱們知道JS主線程和渲染進程是相互阻塞的，所以這就會形成瀏覽器假死。 如何解決這個問題？ 一個有效的辦法就是咱們這節要講的事件循環。
其實事件循環就是用來作調度的，瀏覽器和NodeJS中的事件循壞就好像操做系統的調度器同樣。操做系統的調度器決定什麼時候將什麼資源分配給誰。對於有線程模型的計算機，那麼操做系統執行代碼的最小單位就是線程，資源分配的最小單位就是進程，代碼執行的過程由操做系統進行調度，整個調度過程很是複雜。 咱們知道如今不少電腦都是多核的，爲了讓多個core同時發揮做用，即沒有一個core是特別閒置的，也沒有一個core是特別累的。操做系統的調度器會進行某一種神祕算法，從而保證每個core均可以分配到任務。 這也就是咱們使用NodeJS作集羣的時候，Worker節點數量一般設置爲core的數量的緣由，調度器會盡可能將每個Worker平均分配到每個core，固然這個過程並非肯定的，即不必定調度器是這麼分配的，可是不少時候都會這樣。
瞭解了操做系統調度器的原理，咱們不妨繼續回頭看一下事件循環。 事件循環本質上也是作調度的，只不過調度的對象變成了JS的執行。事件循環決定了V8何時執行什麼代碼。V8只是負責JS代碼的解析和執行，其餘它一律不知。瀏覽器或者NodeJS中觸發事件以後，到事件的監聽函數被V8執行這個時間段的全部工做都是事件循環在起做用。
咱們來小結一下：
- 對於V8來講，它有：
- 調用棧（call stack）
這裏的單線程指的是隻有一個call stack。只有一個call stack 意味着同一時間只能執行一段代碼。
- 堆（heap）
- 對於瀏覽器運行環境來講：
- WEB API
- DOM API
- 任務隊列
事件來觸發事件循環進行流動
以以下代碼爲例：
function c() {}
function b() {
c();
}
function a() {
setTimeout(b, 2000)
}
a();
執行過程是這樣的：
(在線觀看)
所以事件循環之因此能夠實現異步，是由於碰到異步執行的代碼「好比fetch，setTimeout」，瀏覽器會將用戶註冊的回調函數存起來，而後繼續執行後面的代碼。等到將來某一個時刻，「異步任務」完成了，會觸發一個事件，瀏覽器會將「任務的詳細信息」做爲參數傳遞給以前用戶綁定的回調函數。具體來講，就是將用戶綁定的回調函數推入瀏覽器的執行棧。
但並非說隨便推入的，只有瀏覽器將固然要執行的JS腳本「一口氣」執行完，要」換氣「的時候纔會去檢查有沒有要被處理的「消息」。
若是於則將對應消息綁定的回調函數推入棧。固然若是沒有綁定事件，這個事件消息實際上會被丟棄，不被處理。好比用戶觸發了一個click事件，可是用戶沒有綁定click事件的監聽函數，那麼實際上這個事件會被丟棄掉。
咱們來看一下加入用戶交互以後是什麼樣的，拿點擊事件來講：
$.on('button', 'click', function onClick() {
setTimeout(function timer() {
console.log('You clicked the button!');
}, 2000);
});
console.log("Hi!");
setTimeout(function timeout() {
console.log("Click the button!");
}, 5000);
console.log("Welcome to loupe.");
上述代碼每次點擊按鈕，都會發送一個事件，因爲咱們綁定了一個監聽函數。所以每次點擊，都會有一個點擊事件的消息產生，瀏覽器會在「空閒的時候」對應將用戶綁定的事件處理函數推入棧中執行。
僞代碼:
while (true) {
if (queue.length > 0) {
queue.processNextMessage()
}
}
動畫演示：
(在線觀看)
加入宏任務&微任務
咱們來看一個更復制的例子感覺一下。
console.log(1)
setTimeout(() => {
console.log(2)
}, 0)
Promise.resolve().then(() => {
return console.log(3)
}).then(() => {
console.log(4)
})
console.log(5)
上面的代碼會輸出：一、五、三、四、2。 若是你想要很是嚴謹的解釋能夠參考 whatwg 對其進行的描述 -event-loop-processing-model。
下面我會對其進行一個簡單的解釋。
- 瀏覽器首先執行宏任務，也就是咱們script（僅僅執行一次）
- 完成以後檢查是否存在微任務，而後不停執行，直到清空隊列
- 執行宏任務
其中：
宏任務主要包含：setTimeout、setInterval、setImmediate、I/O、UI交互事件
微任務主要包含：Promise、process.nextTick、MutaionObserver 等
有了這個知識，咱們不可貴出上面代碼的輸出結果。
由此咱們能夠看出，宏任務&微任務只是實現異步過程當中，咱們對於信號的處理順序不一樣而已。若是咱們不加區分，所有放到一個隊列，就不會有宏任務&微任務。這種人爲劃分優先級的過程，在某些時候很是有用。
加入執行上下文棧
說到執行上下文，就不得不提到瀏覽器執行JS函數實際上是分兩個過程的。一個是建立階段Creation Phase,一個是執行階段Execution Phase。
同執行棧同樣，瀏覽器每遇到一個函數，也會將當前函數的執行上下文棧推入棧頂。
舉個例子：
function a(num) {
function b(num) {
function c(num) {
const n = 3
console.log(num + n)
}
c(num);
}
b(num);
}
a(1);
遇到上面的代碼。 首先會將a的壓入執行棧，咱們開始進行建立階段Creation Phase， 將a的執行上下文壓入棧。而後初始化a的執行上下文，分別是VO，ScopeChain（VO chain）和 This。 從這裏咱們也能夠看出，this實際上是動態決定的。VO指的是variables, functions 和 arguments。 而且執行上下文棧也會同步隨着執行棧的銷燬而銷燬。
僞代碼表示：
const EC = {
'scopeChain': { },
'variableObject': { },
'this': { }
}
咱們來重點看一下ScopeChain(VO chain)。如上圖的執行上下文大概長這個樣子，僞代碼：
global.VO = {
a: pointer to a(),
scopeChain: [global.VO]
}
a.VO = {
b: pointer to b(),
arguments: {
0: 1
},
scopeChain: [a.VO, global.VO]
}
b.VO = {
c: pointer to c(),
arguments: {
0: 1
},
scopeChain: [b.VO, a.VO, global.VO]
}
c.VO = {
arguments: {
0: 1
},
n: 3
scopeChain: [c.VO, b.VO, a.VO, global.VO]
}
引擎查找變量的時候，會先從VOC開始找，找不到會繼續去VOB...，直到GlobalVO，若是GlobalVO也找不到會返回Referrence Error，整個過程相似原型鏈的查找。
值得一提的是，JS是詞法做用域，也就是靜態做用域。換句話說就是做用域取決於代碼定義的位置，而不是執行的位置，這也就是閉包產生的本質緣由。 若是上面的代碼改形成下面的：
function c() {}
function b() {}
function a() {}
a()
b()
c()
或者這種：
function c() {}
function b() {
c();
}
function a() {
b();
}
a();
其執行上下文棧雖然都是同樣的，可是其對應的scopeChain則徹底不一樣，由於函數定義的位置發生了變化。拿上面的代碼片斷來講,c.VO會變成這樣：
c.VO = {
scopeChain: [c.VO, global.VO]
}
也就是說其再也沒法獲取到a和b中的VO了。
總結
經過這篇文章，但願你對單線程，多線程，異步，事件循環，事件驅動等知識點有了更深的理解和感悟。除了這些大的層面，咱們還從執行棧，執行上下文棧角度講解了咱們代碼是如何被瀏覽器運行的，咱們順便還解釋了做用域和閉包產生的本質緣由。
最後我總結了一個瀏覽器運行代碼的總體原理圖，但願對你有幫助：
下一節瀏覽器的事件循環和NodeJS的事件循環有什麼不一樣, 敬請期待～
參考
- Node.js event loop - logrocket
- event-loop - nodejs.org
- what-is-the-execution-context-in-javascript
- Event Loop in JS - youtube
關注我
以爲不錯點個贊👍，歡迎 加羣 互相學習。個人我的博客：https://lucifer.ren/blog/
也歡迎關注個人我的公衆號，原創好貨持續更新！
- 1. 瀏覽器事件循環
- 2. 瀏覽器事件循環機制
- 3. 瀏覽器中的事件循環
- 4. JS瀏覽器事件循環機制
- 5. javascript事件循環(瀏覽器/node)
- 6. 瀏覽器事件循環原理
- 7. 瀏覽器的事件循環
- 8. 一文看懂瀏覽器存儲
- 9. 瀏覽器和Node不一樣的事件循環（Event Loop）
- 10. nodejs-第二章-第一節-瀏覽器事件循環
- 更多相關文章...
- • XSLT 瀏覽器 - XSLT 教程
- • Opera 瀏覽器 - 瀏覽器信息
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
- 1. 瀏覽器事件循環
- 2. 瀏覽器事件循環機制
- 3. 瀏覽器中的事件循環
- 4. JS瀏覽器事件循環機制
- 5. javascript事件循環(瀏覽器/node)
- 6. 瀏覽器事件循環原理
- 7. 瀏覽器的事件循環
- 8. 一文看懂瀏覽器存儲
- 9. 瀏覽器和Node不一樣的事件循環（Event Loop）
- 10. nodejs-第二章-第一節-瀏覽器事件循環