深入解讀js引擎的執行機制

最近在反省，很多知識都是隻會用，不理解底層的知識。所以在開發過程中遇到一些奇怪的比較難解決的bug，在思考的時候就會收到限制。所以，在這裡一點一點補充基礎知識吧。

在閱讀之前，請先記住兩點：

• js是單執行緒語言
• js的Event Loop是js的執行機制。深入理解js的執行，就等與深入理解js的Event Loop

好啦，下面進入正題

1. 靈魂三問：js為什麼是單執行緒的？為什麼需要非同步？單執行緒又是怎麼實現非同步的呢？

技術的出現，都跟現實世界裡的場景密切相關。同樣的，我們就結合現實場景，來回答這三個問題。

（1）js為什麼是單執行緒的？
        js是一種指令碼語言，指令碼語言是為了縮短傳統的編寫-編譯-連結-執行過程而建立的計算機程式語言，指令碼語言不需要編譯，可以直接用，由直譯器來負責解釋。
        js最初被設計用在瀏覽器中，那麼想象一下，如果瀏覽器中的js是多執行緒的。。。
場景描述：
        現在有兩個程序：process1和process2，由於是多執行緒的js，所以它們對同一個DOM同時進行操作process1刪除了該DOM，而process2編輯了該DOM，同時下達了兩個矛盾的命令，你這讓瀏覽器怎麼執行呢？
        這樣一想，是不是就理解了js為什麼被設計成單執行緒了吧~~~

（2）js為什麼是非同步的？
場景描述：
        如果js不存在非同步，只能自上而下執行，如果上一行執行時間很長，比如說沒有網了，那麼下面的程式碼就會被阻塞，對於使用者來說，阻塞就意味著“卡死”，這樣導致使用者體驗很差。由於這個“缺陷”，導致JavaScript的所有網路操作，瀏覽器事件，都必須是非同步執行。
        所以，js是存在非同步執行的，比如setTimeout、setInterval、ajax、promise

（3）單執行緒是怎麼實現非同步的？
場景描述：
        通過Event Loop（事件迴圈），所以說，理解了Event Loop機制，也就理解了js的執行機制啦。

2. js中的Event Loop第一課

舉個栗子：觀察下它的執行機制

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

毫無疑問：執行結果是1 3 2

也就是說：setTimeout裡的函式並沒有立即執行，而是延遲了一段時間，滿足一定條件後才去執行的，我們叫做非同步程式碼。

所以這裡我們首先知道了js裡的一種分類方式，就是將任務分為：同步任務和非同步任務。

按照這種分類方式：js的執行機制是

• 首先判斷js是同步的還是一步的，同步的就進入主程序，非同步的就進入event table（事件表）
• 非同步任務在Event table中註冊函式，當滿足觸發條件後，被推入event queue（事件佇列）
• 同步任務進入主執行緒後一直執行，直到主執行緒空閒時，才會去event queue中檢視是否有可執行的非同步任務，如果有就推入主程序中

以上三步迴圈執行，這就是Event Loop
所以上面的栗子，你是否可以描述它的執行順序了呢？

console.log(1)          //是同步任務，放進主程序裡
setTimeout(function(){  //是非同步任務，放進event table，0s之後被推入event queue裡
    console.log(2)
},0);
console.log(3)          //是同步任務，放進主程序裡
//當1、3在瀏覽器控制檯被列印後，主執行緒去event queue中檢視是否有可執行的函式，執行setTimeout裡的函式。

3. js中的Event Loop第二課

所以，上面關於Event Loop就是我對js執行機制的理解，是不是很簡單呢。。。。
慢著！看看下面的這段程式碼
又一個栗子：

setTimeout(function(){
    console.log("定時器開始啦~~~");
})
new Promise(function(resolve){
    console.log("馬上執行for迴圈啦");
    for(var i=0;i<10000;i++){
        i==99&&resolve();
    }
}).then(function(){
    console.log("執行then函式啦")
});
console.log("表演完畢！");

有沒有很熟悉，好像面試過程中經常碰見這種問題呀~~~
現在，我們按照上面學到的js執行機制去分析一下下

setTimeout(function(){                 //是非同步任務，被放進event table中
    console.log("定時器開始啦~~~");
})
new Promise(function(resolve){         //是同步任務，被放進主程序中，直接執行
    console.log("馬上執行for迴圈啦");
    for(var i=0;i<10000;i++){
        i==99&&resolve();
    }
}).then(function(){                    //是非同步任務，被放進event table中
    console.log("執行then函式啦")
});
console.log("表演完畢！");              //是同步任務，被放進主程序中，直接執行

執行結果是：【馬上執行for迴圈啦—-表演完畢！—-執行then函式啦—-定時器開始啦~~~】

那麼，難道是非同步任務的執行順序不是前後順序，而是另有規定？事實上，按照同步和非同步的劃分方式，並不準確。

所以這裡我們首先知道了js裡的一種分類方式，就是將任務分為：同步任務和非同步任務。

叨叨了半天，原來都是一些“假大空”的東西，搞什麼搞嘛，哼！！！

準確的劃分方式是：

• macro-task（巨集任務）：包括整體程式碼script、setTimeout、setInterval
• micro-task（微任務）：Promise、process.nextTick
  
  按照這種分類方式：js的執行機制就是
  

執行一個巨集任務，執行過程中如果遇到微任務，就將其放在微任務的event queue裡
當前巨集任務執行完成後，會檢視微任務的event queue，並將裡面的全部微任務依次執行完。
重複以上兩個步驟，結合Event Loop第一課和Event Loop第二課，就是更為準確的js執行機制了。
嘗試按照剛才學到的執行機制，去分析第二個栗子：

setTimeout(function(){              
    console.log("定時器開始啦~~~");
})
new Promise(function(resolve){     
    console.log("馬上執行for迴圈啦");
    for(var i=0;i<10000;i++){
        i==99&&resolve();
    }
}).then(function(){               
    console.log("執行then函式啦")    
});
console.log("表演完畢！");              
//首先執行script中的巨集任務;
//遇到setTimeout，放進巨集任務的event queue中;
//遇到new Promise直接執行，列印“馬上執行for迴圈啦”;
//遇到then方法,是微任務，被放進微任務的event queue
//執行列印“表演完畢！”，本輪巨集任務執行完畢;
//檢視本輪微任務，發現then方法裡的函式，執行列印“執行then函式啦”
//到此，本輪Event Loop全部完成
//下一輪迴圈裡，先執行一個巨集任務，發現巨集任務的event queue中有一個setTimeout中的函式，列印“定時器開始啦”

執行結果是：【馬上執行for迴圈啦—-表演完畢！—-執行then函式啦—-定時器開始啦~~~】

4.談談setTimeout

下面這段setTimeout程式碼是什麼意思？我們一般說：“3s後，會執行setTimeout裡的函式”

setTimeout(function(){
    console.log("執行了");
},3000)

但是這種說法並不嚴謹，準確的解釋是：
        3s後，setTimeout裡的函式會被推入到event queue中，而event queue（事件佇列）裡的任務，只有在主執行緒空閒時才會執行。
所以：只有在滿足

1. 3s後
2. 主執行緒空閒
   這兩個條件同時滿足，才會在3s後執行該函式。如果主執行緒執行內容很多，執行時間超過3s，比如執行了10s，那麼這個函式只有在10s後執行啦

到此，js引擎的執行機制解讀完啦，前端的水很深，慢慢摸著吧
感謝文章的提供者：ziwei3749