作者：卡特

轉發連結：https://mp.weixin.qq.com/s/7g6hajYAvPBUQvGnPR3aag

前言

前一段小編也詳細講過關於JavaScript 的運行機制：「硬核JS」一次搞懂JS運行機制，純文字化的理論，對於初學者來說很難去理解它。這次小編一起重溫並且圖形化+案例細說。

1. 單線程的JavaScript

js是單線程的，基於事件循環，非阻塞IO的。特點：處理I／O型的應用，不適合CPU運算密集型的應用。說明：事件循環中使用一個事件隊列，在每個時間點上，系統只會處理一個事件，即使電腦有多個CPU核心，也無法同時並行的處理多個事件。因此，node.js在I／O型的應用中，給每一個輸入輸出定義一個回調函數，node.js會自動將其加入到事件輪詢的處理隊列里，當I／O操作完成後，這個回調函數會被觸發，系統會繼續處理其他的請求。

然而單線程不應該是自上而下按照順序執行的嗎？
下面的代碼輸出順序就被打亂了

function fn(){
    console.log('start');
    setTimeout(()=>{
        console.log('setTimeout');
    },0);
    console.log('end');
}

fn() // 輸出 start end setTimeout

2. JavaScript中的同步異步

js的同步異步是如何實現的?js中包含諸多創建異步的函數如:seTimeout，setInterval，dom事件，ajax，Promise，process.nextTick等函數

因為單線程，所以代碼自上而下執行，所有代碼被放到執行棧中執行；
遇到異步函數將回調函數添加到一個任務隊列裡面；
當執行棧中的代碼執行完以後，會去循環任務隊列里的函數;
將任務隊列里的函數放到執行棧中執行;
如此往復，稱為事件循環;

這樣分析，上一段的代碼就得到了合理的解釋；
再來看一下這段代碼；

function fn() {
    setTimeout(()=>{
        console.log('a');
    },0);
    new Promise((resolve)=>{
        console.log('b');
        resolve();
    }).then(()=>{
        console.log('c')
    });
}
fn() // b c a

3. 宏任務和微任務

兩任務在同步異步中處於什麼地位？兩個任務分別處於任務隊列中的宏隊列與微隊列中;宏隊列與微隊列組成了任務隊列;任務隊列將任務放入執行棧中執行

宏任務：

宏隊列，macrotask，也叫tasks。異步任務的回調會依次進入macro task queue，等待後續被調用，這些異步任務包括：

setTimeout
setInterval
setImmediate (Node獨有)
requestAnimationFrame (瀏覽器獨有)
I/O
UI rendering (瀏覽器獨有)

微任務：

微隊列，microtask，也叫jobs。異步任務的回調會依次進入micro task queue，等待後續被調用，這些異步任務包括：

process.nextTick (Node獨有)
Promise
Object.observe
MutationObserver

執行全局Script同步代碼，這些同步代碼有一些是同步語句，有一些是異步語句（比如setTimeout等）；

全局Script代碼執行完畢後，執行棧Stack會清空；

從微隊列中取出位於隊首的回調任務，放入執行棧Stack中執行，執行完後微隊列長度減1；

繼續循環取出位於微隊列的任務，放入執行棧Stack中執行，以此類推，直到直到把微任務執行完畢。注意，如果在執行微任務的過程中，又產生了微任務，那麼會加入到微隊列的末尾，也會在這個周期被調用執行；

微隊列中的所有微任務都執行完畢，此時微隊列為空隊列，執行棧Stack也為空；

取出宏隊列中的任務，放入執行棧Stack中執行；

執行完畢後，執行棧Stack為空；

重複第3-7個步驟；

以上才是一個完整的事件循環

來一個稍微複雜點的代碼

function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3);
        });
    },0);
    
    new Promise((resolve, reject) => {
        console.log(4);
        resolve(5);
    }).then(data => {
        console.log(data);
    });
    
    setTimeout(() => {
        console.log(6);
    },0);
    
    console.log(7);
}
fn(); //

流程重現

執行函數同步語句；

step1console.log(1);執行棧：[ console ]宏任務：[]微任務：[]列印結果：1
step2setTimeout(() => {
// 這個回調函數叫做callback1，setTimeout屬於宏任務，所以放到宏隊列中
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});執行棧：[ setTimeout ]宏任務：[ callback1 ]微任務：[]列印結果：1
step3new Promise((resolve, reject) => {
// 注意，這裡是同步執行的
console.log(4);
resolve(5)
}).then((data) => {
// 這個回調函數叫做callback2，promise屬於微任務，所以放到微隊列中
console.log(data);
});執行棧：[ promise ]宏任務：[ callback1 ]微任務：[ callback2 ]列印結果：14
step4setTimeout(() => {
// 這個回調函數叫做callback3，setTimeout屬於宏任務，所以放到宏隊列中
console.log(6);
})執行棧：[ setTimeout ]宏任務：[ callback1 , callback3 ]微任務：[ callback2 ]列印結果：14
step5console.log(7)執行棧：[ console ]宏任務：[ callback1 , callback3 ]微任務：[ callback2 ]列印結果：147

同步語句執行完畢，從微隊列中依次取出任務執行，直到微隊列為空

step6console.log(data) // 這裡data是Promise的成功參數為5執行棧：[ callback2 ]宏任務：[ callback1 , callback3 ]微任務：[]列印結果：1475

這裡微隊列中只有一個任務，執行完後開始從宏隊列中取任務執行

step7console.log(2);執行棧：[ callback1 ]宏任務：[ callback3 ]微任務：[]列印結果：14752但是執行callback1的時候遇到另一個Promise,Promise異步執行完畢以後在微隊列中又註冊了一個callback4函數
step8Promise.resolve().then(() => {
// 這個回調函數叫做callback4，promise屬於微任務，所以放到微隊列中
console.log(3);
});執行棧：[ Promise ]宏任務：[ callback3 ]微任務：[ callback4 ]列印結果：14752

取出一個宏任務macrotask執行完畢，然後再去微任務隊列microtask queue中依次取出執行

step9console.log(3)執行棧：[ callback4 ]宏任務：[ callback3 ]微任務：[]列印結果：147523

微隊列全部執行完，再去宏隊列中取第一個任務執行

step10console.log(3)執行棧：[ callback3 ]宏任務：[]微任務：[]列印結果：1475236

以上全部執行完畢，執行棧，宏隊列，微隊列均為空執行棧：[]宏任務：[]微任務：[]列印結果：1475236

再來一段複雜代碼

function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3)
        });
    });
    
    new Promise((resolve, reject) => {
        console.log(4)
        resolve(5)
    }).then((data) => {
        console.log(data);
        
        Promise.resolve().then(() => {
            console.log(6)
        }).then(() => {
            console.log(7)
            
            setTimeout(() => {
                console.log(8)
            }, 0);
        });
    })
    
    setTimeout(() => {
        console.log(9);
    })
    
    console.log(10);
}
fn();

4. NodeJS中的事件循環

NodeJS中的宏任務和微任務

NodeJS的Event Loop中，執行宏隊列的回調任務有6個階段，如下圖：

各個階段執行的任務如下：

timers階段：這個階段執行setTimeout和setInterval預定的callback
I/O callback階段：執行除了close事件的callbacks、被timers設定的callbacks、setImmediate()設定的callbacks這些之外的callbacks idle, prepare階段：僅node內部使用
poll階段：獲取新的I/O事件，適當的條件下node將阻塞在這裡
check階段：執行setImmediate()設定的callbacks
close callbacks階段：執行socket.on('close', ....)這些callbacks

NodeJS的宏隊列：

Timers Queue
IO Callbacks Queue
Check Queue
Close Callbacks Queue

這4個都屬於宏隊列，但是在瀏覽器中，可以認為只有一個宏隊列，所有的宏任務都會被加到這一個宏隊列中，但是在NodeJS中，不同的宏任務會被放置在不同的宏隊列中

NodeJS的微隊列：

Next Tick Queue：是放置process.nextTick(callback)的回調任務的
Other Micro Queue：放置其他微任務，比如Promise等

在瀏覽器中，也可以認為只有一個微隊列，所有的微任務都會被加到這一個微隊列中，但是在NodeJS中，不同的微任務會被放置在不同的微隊列中

NodeJS中的事件循環過程

執行全局的同步代碼；
執行微任務先執行next tick queue所有任務，再執行other micro tasks queue中的所有任務；
開始執行宏任務，共6個階段，從第1個階段開始執行相應每一個階段宏隊列中的所有任務，注意，這裡是所有每個階段宏任務隊列的所有任務，在瀏覽器的Event Loop中是只取宏隊列的第一個任務出來執行，每一個階段的宏任務執行完畢後，開始執行微任務，回到步驟2；

Timers Queue -> 步驟2 ->I/O Queue -> 步驟2 ->Check Queue -> 步驟2 ->Close Callback Queue -> 步驟2 ->Timers Queue

再看兩張圖

代碼又來了

function fn(){

    console.log('start');

    setTimeout(() => {              // callback1
        console.log(111);
        
        setTimeout(() => {          // callback2
            console.log(222);
        }, 0);
        
        setImmediate(() => {        // callback3
            console.log(333);
        });
        
        process.nextTick(() => {    // callback4
            console.log(444);
        });
        
    }, 0);
    
    setImmediate(() => {            // callback5
        console.log(555);
        
        process.nextTick(() => {    // callback6
           console.log(666);
        });
    });
    
    setTimeout(() => {              // callback7
        console.log(777);
        
        process.nextTick(() => {    // callback8
            console.log(888);
        });
    }, 0);
    
    process.nextTick(() => {        // callback9
        console.log(999);
    });
    
    console.log('end');
}
fn();

//  before version 11.0.0  start end 999 111 777 444 888 555 333 666 222
//  after  version 11.0.0  start end 999 111 444 777 888 555 666 333 222

PS：版本不同導致運行結果不同

總結：

瀏覽器的Event Loop和NodeJS的Event Loop是不同的，實現機制也不一樣，不要混為一談。
NodeJS可以理解成有4個宏任務隊列和2個微任務隊列，但是執行宏任務時有6個階段。先執行全局Script代碼，執行完同步代碼調用棧清空後，先從微任務隊列Next Tick Queue中依次取出所有的任務放入調用棧中執行，再從微任務隊列Other Microtask Queue中依次取出所有的任務放入調用棧中執行。然後開始宏任務的6個階段，每個階段都將該宏任務隊列中的所有任務都取出來執行（注意，這裡和瀏覽器不一樣，瀏覽器只取一個），每個宏任務階段執行完畢後，開始執行微任務，再開始執行下一階段宏任務，以此構成事件循環。
MacroTask包括：setTimeout、setInterval、 setImmediate(Node)、requestAnimation(瀏覽器)、IO、UI rendering。
Microtask包括：process.nextTick(Node)、Promise、Object.observe、MutationObserver。
v11以前是上面說的那樣；v11以後將Node環境的事件循環和瀏覽器的統一了。
process.nextTick 上限是1000？
寫一個休眠函數達到阻塞目的

練習：

宏任務執行順序；
微任務執行順序；
宏任務微任務結合執行順序；

圖文細說JavaScript 的運行機制

前言

1. 單線程的JavaScript

2. JavaScript中的同步異步

3. 宏任務和微任務

宏任務：

微任務：

4. NodeJS中的事件循環

NodeJS中的宏任務和微任務

各個階段執行的任務如下：

NodeJS的宏隊列：

NodeJS的微隊列：

NodeJS中的事件循環過程

總結：

練習：

推薦JavaScript經典實例學習資料文章