前端基礎進階（12）：深入核心，詳解事件迴圈機制

Event Loop

JavaScript的學習零散而龐雜，因此很多時候我們學到了一些東西，但是卻沒辦法感受到自己的進步，甚至過了不久，就把學到的東西給忘了。為了解決自己的這個困擾，在學習的過程中，我一直試圖在尋找一條核心的線索，只要我根據這條線索，我就能夠一點一點的進步。

前端基礎進階正是圍繞這條線索慢慢展開，而事件迴圈機制(Event Loop)，則是這條線索的最關鍵的知識點。所以，我就馬不停蹄的去深入的學習了事件迴圈機制，並總結出了這篇文章跟大家分享。

事件迴圈機制從整體上的告訴了我們所寫的JavaScript程式碼的執行順序。但是在我學習的過程中，找到的許多國內部落格文章對於它的講解淺嘗輒止，不得其法，很多文章在圖中畫個圈就表示迴圈了，看了之後也沒感覺明白了多少。但是他又如此重要，以致於當我們想要面試中高階崗位時，事件迴圈機制總是繞不開的話題。特別是ES6中正式加入了Promise物件之後，對於新標準中事件迴圈機制的理解就變得更加重要。這就很尷尬了。

最近有兩篇比較火的文章也表達了這個問題的重要性。

但是很遺憾的是，大神們告訴了大家這個知識點很重要，卻並沒有告訴大家為什麼會這樣。所以當我們在面試時遇到這樣的問題時，就算你知道了結果，面試官再進一步問一下，我們依然懵逼。

在學習事件迴圈機制之前，我預設你已經懂得了如下概念，如果仍然有疑問，可以回過頭去看看我以前的文章。

執行上下文(Execution context)
函式呼叫棧(call stack)
佇列資料結構(queue)
Promise(我會在下一篇文章專門總結Promise的詳細使用與自定義封裝)

因為chrome瀏覽器中新標準中的事件迴圈機制與nodejs幾乎一樣，因此此處就以整合nodejs一起來理解，其中會介紹到幾個nodejs有，但是瀏覽器中沒有的API，大家只需要瞭解就好，不一定非要知道她是如何使用。比如process.nextTick，setImmediate

OK，那我就先丟擲結論，然後以例子與圖示詳細給大家演示事件迴圈機制。

我們知道JavaScript的一大特點就是單執行緒，而這個執行緒中擁有唯一的一個事件迴圈。

當然新標準中的web worker涉及到了多執行緒，我對它瞭解也不多，這裡就不討論了。
JavaScript程式碼的執行過程中，除了依靠函式呼叫棧來搞定函式的執行順序外，還依靠任務佇列(task queue)來搞定另外一些程式碼的執行。

佇列資料結構

一個執行緒中，事件迴圈是唯一的，但是任務佇列可以擁有多個。
任務佇列又分為macro-task（巨集任務）與micro-task（微任務），在最新標準中，它們被分別稱為task與jobs。

macro-task大概包括：script(整體程式碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task大概包括: process.nextTick, Promise, Object.observe(已廢棄), MutationObserver(html5新特性)
setTimeout/Promise等我們稱之為任務源。而進入任務佇列的是他們指定的具體執行任務。
// setTimeout中的回撥函式才是進入任務佇列的任務 setTimeout(function() { console.log('xxxx'); })

1234 // setTimeout中的回撥函式才是進入任務佇列的任務setTimeout(function(){console.log('xxxx');})
來自不同任務源的任務會進入到不同的任務佇列。其中setTimeout與setInterval是同源的。
事件迴圈的順序，決定了JavaScript程式碼的執行順序。它從script(整體程式碼)開始第一次迴圈。之後全域性上下文進入函式呼叫棧。直到呼叫棧清空(只剩全域性)，然後執行所有的micro-task。當所有可執行的micro-task執行完畢之後。迴圈再次從macro-task開始，找到其中一個任務佇列執行完畢，然後再執行所有的micro-task，這樣一直迴圈下去。
其中每一個任務的執行，無論是macro-task還是micro-task，都是藉助函式呼叫棧來完成。

純文字表述確實有點乾澀，因此，這裡我們通過2個例子，來逐步理解事件迴圈的具體順序。

JavaScript

// demo01  出自於上面我引用文章的一個例子，我們來根據上面的結論，一步一步分析具體的執行過程。
// 為了方便理解，我以打印出來的字元作為當前的任務名稱
setTimeout(function() {
    console.log('timeout1');
})

new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})

console.log('global1');

1234567891011121314151617

// demo01 出自於上面我引用文章的一個例子，我們來根據上面的結論，一步一步分析具體的執行過程。// 為了方便理解，我以打印出來的字元作為當前的任務名稱setTimeout(function(){console.log('timeout1');})newPromise(function(resolve){console.log('promise1');for(vari=0;i<1000;i++){i==99&&resolve();}console.log('promise2');}).then(function(){console.log('then1');})console.log('global1');

首先，事件迴圈從巨集任務佇列開始，這個時候，巨集任務佇列中，只有一個script(整體程式碼)任務。每一個任務的執行順序，都依靠函式呼叫棧來搞定，而當遇到任務源時，則會先分發任務到對應的佇列中去，所以，上面例子的第一步執行如下圖所示。

首先script任務開始執行，全域性上下文入棧

第二步：script任務執行時首先遇到了setTimeout，setTimeout為一個巨集任務源，那麼他的作用就是將任務分發到它對應的佇列中。

setTimeout(function() {
    console.log('timeout1');
})

123	setTimeout(function(){console.log('timeout1');})

巨集任務timeout1進入setTimeout佇列

第三步：script執行時遇到Promise例項。Promise建構函式中的第一個引數，是在new的時候執行，因此不會進入任何其他的佇列，而是直接在當前任務直接執行了，而後續的.then則會被分發到micro-task的Promise佇列中去。

因此，建構函式執行時，裡面的引數進入函式呼叫棧執行。for迴圈不會進入任何佇列，因此程式碼會依次執行，所以這裡的promise1和promise2會依次輸出。

promise1入棧執行，這時promise1被最先輸出

resolve在for迴圈中入棧執行

建構函式執行完畢的過程中，resolve執行完畢出棧，promise2輸出，promise1頁出棧，then執行時，Promise任務then1進入對應佇列

script任務繼續往下執行，最後只有一句輸出了globa1，然後，全域性任務就執行完畢了。

第四步：第一個巨集任務script執行完畢之後，就開始執行所有的可執行的微任務。這個時候，微任務中，只有Promise佇列中的一個任務then1，因此直接執行就行了，執行結果輸出then1，當然，他的執行，也是進入函式呼叫棧中執行的。

執行所有的微任務

第五步：當所有的micro-tast執行完畢之後，表示第一輪的迴圈就結束了。這個時候就得開始第二輪的迴圈。第二輪迴圈仍然從巨集任務macro-task開始。

微任務被清空

這個時候，我們發現巨集任務中，只有在setTimeout佇列中還要一個timeout1的任務等待執行。因此就直接執行即可。

timeout1入棧執行

這個時候巨集任務佇列與微任務佇列中都沒有任務了，所以程式碼就不會再輸出其他東西了。

那麼上面這個例子的輸出結果就顯而易見。大家可以自行嘗試體會。

這個例子比較簡答，涉及到的佇列任務並不多，因此讀懂了它還不能全面的瞭解到事件迴圈機制的全貌。所以我下面弄了一個複製一點的例子，再給大家解析一番，相信讀懂之後，事件迴圈這個問題，再面試中再次被問到就難不倒大家了。

// demo02
console.log('golb1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374

// demo02console.log('golb1');setTimeout(function(){console.log('timeout1');process.nextTick(function(){console.log('timeout1_nextTick');})newPromise(function(resolve){console.log('timeout1_promise');resolve();}).then(function(){console.log('timeout1_then')})})setImmediate(function(){console.log('immediate1');process.nextTick(function(){console.log('immediate1_nextTick');})newPromise(function(resolve){console.log('immediate1_promise');resolve();}).then(function(){console.log('immediate1_then')})})process.nextTick(function(){console.log('glob1_nextTick');})newPromise(function(resolve){console.log('glob1_promise');resolve();}).then(function(){console.log('glob1_then')})setTimeout(function(){console.log('timeout2');process.nextTick(function(){console.log('timeout2_nextTick');})newPromise(function(resolve){console.log('timeout2_promise');resolve();}).then(function(){console.log('timeout2_then')})})process.nextTick(function(){console.log('glob2_nextTick');})newPromise(function(resolve){console.log('glob2_promise');resolve();}).then(function(){console.log('glob2_then')})setImmediate(function(){console.log('immediate2');process.nextTick(function(){console.log('immediate2_nextTick');})newPromise(function(resolve){console.log('immediate2_promise');resolve();}).then(function(){console.log('immediate2_then')})})

這個例子看上去有點複雜，亂七八糟的程式碼一大堆，不過不用擔心，我們一步一步來分析一下。

第一步：巨集任務script首先執行。全域性入棧。glob1輸出。

script首先執行

第二步，執行過程遇到setTimeout。setTimeout作為任務分發器，將任務分發到對應的巨集任務佇列中。

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

123456789101112

setTimeout(function(){console.log('timeout1');process.nextTick(function(){console.log('timeout1_nextTick');})newPromise(function(resolve){console.log('timeout1_promise');resolve();}).then(function(){console.log('timeout1_then')})})

timeout1進入對應佇列

第三步：執行過程遇到setImmediate。setImmediate也是一個巨集任務分發器，將任務分發到對應的任務佇列中。setImmediate的任務佇列會在setTimeout佇列的後面執行。

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

123456789101112

setImmediate(function(){console.log('immediate1');process.nextTick(function(){console.log('immediate1_nextTick');})newPromise(function(resolve){console.log('immediate1_promise');resolve();}).then(function(){console.log('immediate1_then')})})

進入setImmediate佇列

第四步：執行遇到nextTick，process.nextTick是一個微任務分發器，它會將任務分發到對應的微任務佇列中去。

process.nextTick(function() {
    console.log('glob1_nextTick');
})

123	process.nextTick(function(){console.log('glob1_nextTick');})

nextTick

第五步：執行遇到Promise。Promise的then方法會將任務分發到對應的微任務佇列中，但是它建構函式中的方法會直接執行。因此，glob1_promise會第二個輸出。

new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

123456

前端基礎進階（12）：深入核心，詳解事件迴圈機制

前端基礎進階（12）：深入核心，詳解事件迴圈機制

前端基礎進階（十三）：透徹掌握Promise的使用，讀這篇就夠了(轉)

前端基礎進階（九）：圖例詳解那道setTimeout與迴圈閉包的經典面試題

【.NET執行緒--進階（一）】--執行緒方法詳解

年薪20萬Python工程師進階（7）：Python資源大全，讓你相見恨晚的Python庫 python

Android進階（二）：應用程序啟動過程

Android進階（一）： Launcher啟動過程

Android進階（三）：Application啟動過程(最詳細&最簡單)

Android進階（四）：Activity啟動過程(最詳細&最簡單)

Vue進階（九）：webstorm啟動vue專案配置

年薪20萬Python工程師進階（7）：Python資源大全，讓你相見恨晚的Python庫 python

java進階（一）：泛型

年薪20萬Python工程師進階（7）：Python資源大全，讓你相見恨晚的Python庫

python爬蟲進階（八）：分散式系統的高可用與高併發處理

大資料進階（二）：22個免費的資料視覺化和分析工具推薦

爬蟲工程師進階（八）：去重與入庫

CSS進階（12）—— position:absolute如此高深，我當真不懂（上）

python爬蟲進階（十）：日誌系統、守護執行緒以及驗證碼處理

Hibernate 進階（12）HQL常用語句彙總

Python爬蟲（入門+進階）學習筆記 3-1 爬蟲工程師進階（七）：HTTP請求分析

前端基礎進階（12）：深入核心，詳解事件迴圈機制

相關推薦