[JS開發者應懂的33個概念]1. 事件循環

JS事件循環理解

在Github上看到一個關於JavaScript開發者應懂的33個概念，個人認爲裏面的內容還是挺常見的，因此打算根據其目錄對JavaScript進行一次知識點的梳理。
附上其GitHub地址：
https://github.com/stephentian/33-js-concepts

本文目錄如下：

關於JavaScript

JS是一門單線程語言，它有一個調用棧（Call Stack）—— 後進先出，當函數執行時，函數會先進入到調用棧當中；JS會根據調用棧的次序，一步步往下執行代碼，直到調用棧清空。舉個簡單的例子：

function first() {
    console.log('first')
    second()
}

function second() {
    console.log('second')
}

first()
console.log('Hi JavaScript')

此時，JS的調用棧情況如下：

程序開始，調用棧爲空，程序自上而下開始執行，當遇到函數時，則會將其放進調用棧並進入函數內繼續執行，若在函數內部遇到其他函數，也會進行同樣的操作，只到函數執行完成後，則會退出調用棧，繼續執行當前函數直到結束。

而我們需要一個環境可以運行JS代碼，這時候就需要JS引擎，JS引擎有很多，當前我們聽的最多的就是Google開發的V8引擎了，下面是一個實現了JavaScript引擎的流行項目列表：

• V8  —  開源，由 Google 開發，用 C ++ 編寫
• Rhino  —  由 Mozilla 基金會管理，開源，完全用 Java 開發
• SpiderMonkey  —  是第一個支持 Netscape Navigator 的 JavaScript 引擎，目前正供 Firefox 使用
• JavaScriptCore  —  開源，由蘋果公司爲 Safari 開發
• KJS  —  KDE 的引擎，最初由 Harri Porten 爲 KDE 項目中的 Konqueror 網頁瀏覽器開發
• Chakra (JScript9)  —  Internet Explorer
• Chakra (JavaScript)  —  Microsoft Edge
• Nashorn, 作爲 OpenJDK 的一部分，由 Oracle Java 語言和工具組編寫
• JerryScript  — 物聯網的輕量級引擎

JavaScript引擎

它主要由兩部分組成：

• 內存堆：這是內存分配的地方
• 調用棧：這是你的代碼執行時的地方

平常我們運行的JS代碼就是運行在JS引擎當中，它其中的運行環境如下圖所示：

因此，JS在引擎下執行並不像上述例子這麼簡單，代碼自上而下執行就完事了。JS在瀏覽下的引擎執行，瀏覽器本身還會提供很多引擎之外的Web API，最終產生了事件循環、任務隊列這些概念。

事件循環

• JS的任務分爲兩類：同步任務和異步任務

• 同步任務都在主線程上執行，形成一個執行棧

• 主線程以外，事件觸發線程管理着一個任務隊列，只要異步任務有了結果就會往任務隊列中添加

• 當執行棧的同步任務執行完成後，系統就會依次讀取任務隊列中的事件到執行棧中執行

其中，這裏的任務隊列還分爲宏任務（macrotask）和微任務（microtask）

宏任務包括：

整體代碼script，setTimeout，setInterval

微任務包括：

Promise，process.nextTick

總結

簡單總結事件循環的執行順序：

1. 程序開始首先在調用棧中開始執行同步任務（個人理解：宏任務當中也包括了同步任務，所以可以理解爲程序開始首先執行宏任務）。
2. 當執行過程中遇到了異步任務，此時就會將其放入任務隊列（此時區分宏任務和微任務環境）當中，等待調用棧進入空閒狀態。
3. 當調用棧執行完成當前宏任務後，就會將進入微任務的事件依次執行，直到微任務列表清空再次開啓新一輪的宏任務。
4. 如此循環直到所有事件執行完畢

####舉例

下面例子幫助理解：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

我們來看這個例子的執行過程：

• 首先，程序開始執行整體script代碼（此時可以看作一個宏任務環境），代碼從上到下依次執行。

• 遇到console.log(‘1’)，輸出1，```new Promise``屬於同步任務，其then屬於異步任務

• 然後，代碼依次遇到setTimeout、process.nextTick、new Promise.then、setTimeout，我們依次對它們進行‘分類’：

  這裏的宏任務是兩個setTimeout

  微任務依次是process.nextTick、promise.then操作

  因此，第一輪宏任務結束下來輸出：1 7 6 8

• 接下來是新的一輪宏任務，既第一次出現的setTimeout，分析思路仍然和上述一樣，依次對其’分類’，結果就會一目瞭然。

這裏只是針對JS的事件循環進行了分析，也只是JS執行機制的一部分，但從JS執行機制的角度出發，會發現還有很多地方還是懵懵懂懂的，但因爲知識儲備不紮實，仍然有很多地方無法理解，仍需要進一步學習。

參考資料

本文參考了多篇文章，參考資料如下：

1. 從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

   http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html

   （這篇文章分析的很好，對JS運行機制涉及的知識點都進行了分析、梳理，看完可以有一個整體的認知）

2. 這一次，徹底弄懂 JavaScript 執行機制

   https://juejin.im/post/59e85eebf265da430d571f89#heading-4

   （這篇文章主要講解了JS的事件循環，例子是從這裏摘取的，同時也在這裏學習瞭如何分析整個事件循環的過程）

3. [譯] JavaScript 如何工作：對引擎、運行時、調用堆棧的概述

   https://juejin.im/post/5a05b4576fb9a04519690d42#heading-2

   （這篇文章主要了解JS的一些常識性知識，之前一直不清楚JS引擎是怎麼一回事）

4. 深入理解js事件循環機制（瀏覽器篇）

   http://lynnelv.github.io/js-event-loop-browser