摘要：事件觸發線程主要負責將準備好的事件交給引擎線程執行。進程瀏覽器渲染進程瀏覽器內核，主要負責頁面的渲染執行以及事件的循環。第二輪循環結束。

將自己讀到的比較好的文章分享出來，大家互相學習，各位大佬有好的文章也可以留個鏈接互相學習，萬分感謝！

關于線程與進程的關系可以用下面的圖進行說明：

進程好比圖中的工廠，有多帶帶的專屬自己的工廠資源。

線程好比圖中的工人，多個工人在一個工廠中協作工作，工廠與工人是 1:n的關系。

多個工廠之間獨立存在。

而官方的說法是：

進程是 CPU資源分配的最小單位。

線程是 CPU調度的最小單位。

從更直觀的例子來看，可以打開任務管理器查看，第一個 tab便是進程列表，每一個進程占有的 CPU資源和內存資源的比例很直觀的展示出來。

初學計算機語言的時候，無論是 C、C++還是 JAVA，都是支持多線程，偏偏 JavaScript是單線程，不支持多線程，這也跟 JavaScript的作用有關，都知道 JavaScript是主要運行在瀏覽器的腳本語言，最終操作的是頁面的 DOM結構，當兩個 JavaScript腳本同時修改頁面的同一個 DOM節點時，瀏覽器該執行哪個呢？所以當時設計 JavaScript時，便要求當前修改操作完成后方可進行下一步修改操作。

同樣我們打開瀏覽器的任務管理器，以下圖為例：

瀏覽器的每一個 tab頁都是一個進程，有對應的內存占用空間、 CPU使用量以及進程ID。 新打開一個 tab頁時，都會新建一個進程，所以就有一個 tab頁對應一個進程的說法，但是這種說法又是錯誤的，因為瀏覽器有自己的優化機制，當我們打開多個空白的 tab頁時，瀏覽器會將這多個空白頁的進程合并為一個，從而減少了進程的數量個數。

瀏覽器內核中有多個進程在同步工作，今天涉及到的瀏覽器的進程主要包括以下進程：

Browser 進程

主進程，主要負責頁面管理以及管理其他進程的創建和銷毀等，常駐的線程有：

GUI渲染線程
JS引擎線程
事件觸發線程
定時器觸發線程
HTTP請求線程

GUI渲染線程

主要負責頁面的渲染，解析HTML、CSS，構建DOM樹，布局和繪制等。
當界面需要重繪或者由于某種操作引發回流時，將執行該線程。
該線程與JS引擎線程互斥，當執行JS引擎線程時，GUI渲染會被掛起，當任務隊列空閑時，JS引擎才會去執行GUI渲染。

JS引擎線程

該線程當然是主要負責處理 JavaScript腳本，執行代碼。
也是主要負責執行準備好待執行的事件，即定時器計數結束，或者異步請求成功并正確返回時，將依次進入任務隊列，等待 JS引擎線程的執行。
當然，該線程與 GUI渲染線程互斥，當 JS引擎線程執行 JavaScript腳本時間過長，將導致頁面渲染的阻塞。

事件觸發線程

主要負責將準備好的事件交給 JS引擎線程執行。
比如 setTimeout定時器計數結束， ajax等異步請求成功并觸發回調函數，或者用戶觸發點擊事件時，該線程會將整裝待發的事件依次加入到任務隊列的隊尾，等待 JS引擎線程的執行。

定時器觸發線程

顧名思義，負責執行異步定時器一類的函數的線程，如： setTimeout，setInterval。
主線程依次執行代碼時，遇到定時器，會將定時器交給該線程處理，當計數完畢后，事件觸發線程會將計數完畢后的事件加入到任務隊列的尾部，等待JS引擎線程執行。

HTTP請求線程

顧名思義，負責執行異步請求一類的函數的線程，如： Promise，anxios，ajax等。
主線程依次執行代碼時，遇到異步請求，會將函數交給該線程處理，當監聽到狀態碼變更，如果有回調函數，事件觸發線程會將回調函數加入到任務隊列的尾部，等待JS引擎線程執行。

多個線程之間配合工作，各司其職。

Render 進程

瀏覽器渲染進程（瀏覽器內核），主要負責頁面的渲染、JS執行以及事件的循環。

同步任務 即可以立即執行的任務，例如 console.log() 打印一條日志、聲明一個變量或者執行一次加法操作等。

異步任務 相反不會立即執行的事件任務。異步任務包括宏任務和微任務(后面會進行解釋~)。

常見的異步操作：

Ajax

DOM的事件操作

setTimeout

Promise的then方法

Node的讀取文件

下圖給出了同步任務與異步任務的執行流程：

棧 就像是一個容器，任務都是在棧中執行。

主線程 就像是操作員，負責執行棧中的任務。

任務隊列 就像是等待被加工的物品。

異步任務完成注冊后會將回調函數加入任務隊列等待主線程執行。

執行棧中的同步任務執行完畢后，會查看并讀取任務隊列中的事件函數，于是任務隊列的函數結束等待狀態，進入執行棧，開始執行。

那么任務到底是如何入棧和出棧的呢？可以用一小段代碼進行解釋。

以下面的代碼為例：

    console.log(1);
    function fn1(){
        console.log(2);
    }
    function fn2(){
        console.log(3);
        fn1();
    }
    setTimeout(function(){
        console.log(4);
    }, 2000);
    fn2();
    console.log(5);

所以上面代碼運行的結果為：1,3,2,5,4。

異步任務分為宏任務和微任務，宏任務隊列可以有多個，微任務隊列只有一個。

宏任務和微任務的執行方式在瀏覽器和 Node 中有差異。

script(全局任務)， setTimeout， setInterval， setImmediate， I/O， UI rendering

process.nextTick， Promise.then()， Object.observe， MutationObserver

在微任務中 process.nextTick 優先級高于Promise

當一個異步任務入棧時，主線程判斷該任務為異步任務，并把該任務交給異步處理模塊處理，當異步處理模塊處理完打到觸發條件時，根據任務的類型，將回調函數壓入任務隊列。

如果是宏任務，則新增一個宏任務隊列，任務隊列中的宏任務可以有多個來源。

如果是微任務，則直接壓入微任務隊列。

所以上圖的任務隊列可以繼續細化一下：

那么當棧為空時，宏任務和微任務的執行機制又是什么呢？

到這里，除了上面的問題，我們已經把事件循環的最基本的處理方式搞清楚了，但具體到異步任務中的宏任務和微任務，還沒有弄明白。我們可以先順一遍執行機制：

從全局任務 script開始，任務依次進入棧中，被主線程執行，執行完后出棧。

遇到異步任務，交給異步處理模塊處理，對應的異步處理線程處理異步任務需要的操作，例如定時器的計數和異步請求監聽狀態的變更。

當異步任務達到可執行狀態時，事件觸發線程將回調函數加入任務隊列，等待棧為空時，依次進入棧中執行。

到這問題就來了，當異步任務進入棧執行時，是宏任務還是微任務呢？

由于執行代碼入口都是全局任務 script，而全局任務屬于宏任務，所以當棧為空，同步任務任務執行完畢時，會先執行微任務隊列里的任務。

微任務隊列里的任務全部執行完畢后，會讀取宏任務隊列中拍最前的任務。

執行宏任務的過程中，遇到微任務，依次加入微任務隊列。

棧空后，再次讀取微任務隊列里的任務，依次類推。

回到最開始的那段代碼，現在我們可以一步一步的看一下執行順序。

console.log(1);
setTimeout(function(){
    console.log(2);
}, 0);
setTimeout(function(){
    console.log(3)
},2000)
console.log(4);

從全局任務入口，首先打印日志 1，

遇到宏任務 setTimeout，交給異步處理模塊，我們暫且先記為 setTimeout1，

再次遇到宏任務 setTimeout，交給異步處理模塊，我們暫且先記為 setTimeout2，

順序執行，打印日志 4，

此時同步任務已執行完畢，讀取宏任務隊列的任務，先執行 setTimeout1的回調函數，因為定時器的等待時間為 0秒，所以會直接輸出 2，但是 W3C在 HTML標準中規定，規定要求 setTimeout中低于 4ms的時間間隔算為 4ms，

由于瀏覽器在執行以上三步時，并未耗時很久，所以當宏任務 setTimeout1執行完時， setTimeout2的等待時間并未結束，所以在 2秒后打印日志 3，實際上并未等待2秒。

下面我們可以再看一個實例：

    setTimeout(function(){
        console.log(1);
        Promise.resolve().then(function(){
            console.log(2)
        })
    },0)

    setTimeout(function(){
        console.log(3)
    },0)
    Promise.resolve().then(function(){
        console.log(4)
    });
    console.log(5)

當代碼中遇到了異步請求的事件，又該如何執行，根據上面總結的執行機制，又該得到什么樣的結果？

第一輪循環

同樣從全局任務入口，遇到宏任務 setTimeout，交給異步處理模塊，我們暫且先記為 setTimeout1，由于等待時間為 0，直接加入宏任務隊列。

再次遇到宏任務 setTimeout，交給異步處理模塊，我們暫且先記為 setTimeout2，同樣直接加入宏任務隊列。

遇到微任務 then()，加入微任務隊列。

最后遇到打印語句，直接打印日志 5。

第一輪循環結束后，可以畫出下圖：

第二輪循環

棧空后，先執行微任務隊列中的 then()方法，輸出 4，此時微任務隊列為空。

讀取宏任務隊列的最靠前的任務 setTimeout1。

先直接執行打印語句，打印日志 1，又遇到微任務 then()，加入微任務隊列。第二輪循環結束。

第三輪循環

先執行微任務隊列中的 then()方法，輸出 2，此時微任務隊列為空。

繼續讀取宏任務隊列的最靠前的任務 setTimeout2。

直接執行打印語句，打印日志 3。第三輪循環結束，執行完畢。

最后我們是我們的boss，歡迎大家在評論區留言寫出自己心中的那個正確答案。

console.log(1);

setTimeout(function(){
    console.log(2);
    new Promise(function(resolve, reject){
        console.log(3);
        resolve();
    }).then(function(){
        console.log(4);
    })
})

new Promise(function(resolve, reject){
    console.log(5);
    resolve();
}).then(function(){
    console.log(6);
})

setTimeout(function(){
    console.log(7)
})

setTimeout(function(){
    console.log(8);
    new Promise(function(resolve, reject){
        console.log(9);
        resolve();
    }).then(function(){
        console.log(10);
    })
})

new Promise(function(resolve){
    console.log(11);
    resolve();
}).then(function(){
    console.log(12)
})

console.log(13)

github地址：https://github.com/ABCDdouyaer/a_article_per_day/tree/master/0001
原文鏈接：https://mp.weixin.qq.com/s/9_hZX_xWSr3Gd1X_2_WOsA