JS引擎的執行機制

首先,請牢記2點:

(1) JS是單線程語言

(2) JS的Event Loop是JS的執行機制。深刻了解JS的執行,就等於深刻了解JS裏的event loop

1.靈魂三問 : JS爲何是單線程的? 爲何須要異步? 單線程又是如何實現異步的呢?

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

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

(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 是同步任務,放到主線程裏

當 一、 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

按照這種分類方式: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秒後執行了