10分鐘了解JS引擎的執行機制 event loop ---齊枭飛前端構架

首先,請牢記2點:

(1) JS是單線程語言

(2) JS的Event Loop是JS的執行機制。深入了解JS的執行,就等于深入了解JS裡的event loop

技術的出現,都跟現實世界裡的應用場景密切相關的。

同樣的,我們就結合現實場景,來回答這三個問題

(1) JS為什麼是單線程的?
           

JS最初被設計用在浏覽器中,那麼想象一下,如果浏覽器中的JS是多線程的。

場景描述:

那麼現在有2個程序,process1 process2,由于是多程序的JS,是以他們對同一個dom,同時進行操作

process1 删除了該dom,而process2 編輯了該dom,同時下達2個沖突的指令,浏覽器究竟該如何執行呢?
           

這樣想,JS為什麼被設計成單線程應該就容易了解了吧。

(2) JS為什麼需要異步?
           

場景描述:

如果JS中不存在異步,隻能自上而下執行,如果上一行解析時間很長,那麼下面的代碼就會被阻塞。
對于使用者而言,阻塞就意味着"卡死",這樣就導緻了很差的使用者體驗

           

是以,JS中存在異步執行。

(3) JS單線程又是如何實作異步的呢?
           

既然JS是單線程的,隻能在一條線程上執行,又是如何實作的異步呢?

是通過的事件循環(event loop),了解了event loop機制,就了解了JS的執行機制

2.JS中的event loop(1)

例1,觀察它的執行順序

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() 是異步任務,被放入event table, 0秒之後被推入event queue裡
console.log(3 是同步任務,放到主線程裡

當 1、 3在控制條被列印後,主線程去event queue(事件隊列)裡檢視是否有可執行的函數,執行setTimeout裡的函數
3.JS中的event loop(2)
是以,上面關于event loop就是我對JS執行機制的了解,直到我遇到了下面這段代碼

例2:

 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 是異步任務,被放到event table

new Promise 是同步任務,被放到主程序裡,直接執行列印 console.log('馬上執行for循環啦')

.then裡的函數是 異步任務,被放到event table

 console.log('代碼執行結束')是同步代碼,被放到主程序裡,直接執行
 
是以,結果是 【馬上執行for循環啦 --- 代碼執行結束 --- 定時器開始啦 --- 執行then函數啦】嗎?

親自執行後,結果居然不是這樣,而是【馬上執行for循環啦 --- 代碼執行結束 --- 執行then函數啦 --- 定時器開始啦】

那麼,難道是異步任務的執行順序,不是前後順序,而是另有規定? 事實上,按照異步和同步的劃分方式,并不準确。

而準确的劃分方式是:

macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval
micro-task(微任務)：Promise，process.nextTick
clipboard.png

按照這種分類方式:JS的執行機制是

執行一個宏任務,過程中如果遇到微任務,就将其放到微任務的【事件隊列】裡
目前宏任務執行完成後,會檢視微任務的【事件隊列】,并将裡面全部的微任務依次執行完
重複以上2步驟,結合event loop(1) event loop(2) ,就是更為準确的JS執行機制了。

嘗試按照剛學的執行機制,去分析例2:

首先執行script下的宏任務,遇到setTimeout,将其放到宏任務的【隊列】裡

遇到 new Promise直接執行,列印"馬上執行for循環啦"

遇到then方法,是微任務,将其放到微任務的【隊列裡】

列印 "代碼執行結束"

本輪宏任務執行完畢,檢視本輪的微任務,發現有一個then方法裡的函數, 列印"執行then函數啦"

到此,本輪的event loop 全部完成。


下一輪的循環裡,先執行一個宏任務,發現宏任務的【隊列】裡有一個 setTimeout裡的函數,執行列印"定時器開始啦"
是以最後的執行順序是【馬上執行for循環啦 --- 代碼執行結束 --- 執行then函數啦 --- 定時器開始啦】

4. 談談setTimeout
這段setTimeout代碼什麼意思? 我們一般說: 3秒後,會執行setTimeout裡的那個函數

 setTimeout(function(){
    console.log('執行了')
 },3000)    
但是這種說并不嚴謹,準确的解釋是: 3秒後,setTimeout裡的函數被會推入event queue,而event queue(事件隊列)裡的任務,隻有在主線程空閑時才會執行。

是以隻有滿足 (1)3秒後 (2)主線程空閑,同時滿足時,才會3秒後執行該函數

如果主線程執行内容很多,執行時間超過3秒,比如執行了10秒,那麼這個函數隻能10秒後執行了