詳解JavaScript中的Event Loop（事件循環）機制

前言

咱們都知道，javascript從誕生之日起就是一門單線程的非阻塞的腳本語言。這是由其最初的用途來決定的：與瀏覽器交互。

單線程意味着，javascript代碼在執行的任什麼時候候，都只有一個主線程來處理全部的任務。

而非阻塞則是當代碼須要進行一項異步任務（沒法馬上返回結果，須要花必定時間才能返回的任務，如I/O事件）的時候，主線程會掛起（pending）這個任務，而後在異步任務返回結果的時候再根據必定規則去執行相應的回調。

單線程是必要的，也是javascript這門語言的基石，緣由之一在其最初也是最主要的執行環境——瀏覽器中，咱們須要進行各類各樣的dom操做。試想一下 若是javascript是多線程的，那麼當兩個線程同時對dom進行一項操做，例如一個向其添加事件，而另外一個刪除了這個dom，此時該如何處理呢？所以，爲了保證不會 發生相似於這個例子中的情景，javascript選擇只用一個主線程來執行代碼，這樣就保證了程序執行的一致性。

固然，現現在人們也意識到，單線程在保證了執行順序的同時也限制了javascript的效率，所以開發出了web worker技術。這項技術號稱讓javascript成爲一門多線程語言。

然而，使用web worker技術開的多線程有着諸多限制，例如：全部新線程都受主線程的徹底控制，不能獨立執行。這意味着這些「線程」 實際上應屬於主線程的子線程。另外，這些子線程並無執行I/O操做的權限，只能爲主線程分擔一些諸如計算等任務。因此嚴格來說這些線程並無完整的功能，也所以這項技術並不是改變了javascript語言的單線程本質。

能夠預見，將來的javascript也會一直是一門單線程的語言。

話說回來，前面提到javascript的另外一個特色是「非阻塞」，那麼javascript引擎究竟是如何實現的這一點呢？答案就是今天這篇文章的主角——event loop（事件循環）。

注：雖然nodejs中的也存在與傳統瀏覽器環境下的類似的事件循環。然而二者間卻有着諸多不一樣，故把二者分開，單獨解釋。

正文

1.執行棧與事件隊列

當javascript代碼執行的時候會將不一樣的變量存於內存中的不一樣位置：堆（heap）和棧（stack）中來加以區分。其中，堆裏存放着一些對象。而棧中則存放着一些基礎類型變量以及對象的指針。 可是咱們這裏說的執行棧和上面這個棧的意義卻有些不一樣。

咱們知道，當咱們調用一個方法的時候，js會生成一個與這個方法對應的執行環境（context），又叫執行上下文。這個執行環境中存在着這個方法的私有做用域，上層做用域的指向，方法的參數，這個做用域中定義的變量以及這個做用域的this對象。 而當一系列方法被依次調用的時候，由於js是單線程的，同一時間只能執行一個方法，因而這些方法被排隊在一個單獨的地方。這個地方被稱爲執行棧。

當一個腳本第一次執行的時候，js引擎會解析這段代碼，並將其中的同步代碼按照執行順序加入執行棧中，而後從頭開始執行。若是當前執行的是一個方法，那麼js會向執行棧中添加這個方法的執行環境，而後進入這個執行環境繼續執行其中的代碼。當這個執行環境中的代碼 執行完畢並返回結果後，js會退出這個執行環境並把這個執行環境銷燬，回到上一個方法的執行環境。。這個過程反覆進行，直到執行棧中的代碼所有執行完畢。

下面這個圖片很是直觀的展現了這個過程，其中的global就是初次運行腳本時向執行棧中加入的代碼：

從圖片可知，一個方法執行會向執行棧中加入這個方法的執行環境，在這個執行環境中還能夠調用其餘方法，甚至是本身，其結果不過是在執行棧中再添加一個執行環境。這個過程能夠是無限進行下去的，除非發生了棧溢出，即超過了所能使用內存的最大值。

以上的過程說的都是同步代碼的執行。那麼當一個異步代碼（如發送ajax請求數據）執行後會如何呢？前文提過，js的另外一大特色是非阻塞，實現這一點的關鍵在於下面要說的這項機制——事件隊列（Task Queue）。

js引擎遇到一個異步事件後並不會一直等待其返回結果，而是會將這個事件掛起，繼續執行執行棧中的其餘任務。當一個異步事件返回結果後，js會將這個事件加入與當前執行棧不一樣的另外一個隊列，咱們稱之爲事件隊列。被放入事件隊列不會馬上執行其回調，而是等待當前執行棧中的全部任務都執行完畢， 主線程處於閒置狀態時，主線程會去查找事件隊列是否有任務。若是有，那麼主線程會從中取出排在第一位的事件，並把這個事件對應的回調放入執行棧中，而後執行其中的同步代碼...，如此反覆，這樣就造成了一個無限的循環。這就是這個過程被稱爲「事件循環（Event Loop）」的緣由。

這裏還有一張圖來展現這個過程：

圖中的stack表示咱們所說的執行棧，web apis則是表明一些異步事件，而callback queue即事件隊列。

2.macro task與micro task

以上的事件循環過程是一個宏觀的表述，實際上由於異步任務之間並不相同，所以他們的執行優先級也有區別。不一樣的異步任務被分爲兩類：微任務（micro task）和宏任務（macro task）。

如下事件屬於宏任務：

• setInterval()
• setTimeout()

如下事件屬於微任務

• new Promise()
• new MutaionObserver()

前面咱們介紹過，在一個事件循環中，異步事件返回結果後會被放到一個任務隊列中。然而，根據這個異步事件的類型，這個事件實際上會被對應的宏任務隊列或者微任務隊列中去。而且在當前執行棧爲空的時候，主線程會 查看微任務隊列是否有事件存在。若是不存在，那麼再去宏任務隊列中取出一個事件並把對應的回到加入當前執行棧；若是存在，則會依次執行隊列中事件對應的回調，直到微任務隊列爲空，而後去宏任務隊列中取出最前面的一個事件，把對應的回調加入當前執行棧...如此反覆，進入循環。

咱們只需記住噹噹前執行棧執行完畢時會馬上先處理全部微任務隊列中的事件，而後再去宏任務隊列中取出一個事件。同一次事件循環中，微任務永遠在宏任務以前執行。

這樣就能解釋下面這段代碼的結果：

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})
複製代碼

結果爲：

• 2
• 3
• 1