JS JS引擎的執行機制

深入理解js引擎的執行機制：

1. js為什麼會是單執行緒的？為什麼需要非同步？單執行緒又是如何實現非同步的？

2. js中的event loop （1）

3. js中的event loop （2）

4. 談談settimeout

首先，(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(),0)
console.log(3)

執行結果是: 1 3 2

也就是說,settimeout裡的函式並沒有立即執行,而是延遲了一段時間,滿足一定條件後,才去執行的,這類**,我們叫非同步**。

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

描述按照這種分類方式:js的執行機制是

以上三步迴圈執行,這就是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());
new promise(function(resolve)
}).then(function());
console.log('**執行結束');

嘗試按照,上文我們剛學到的js執行機制去分析：

settimeout 是非同步任務,被放到event table new promise 是同步任務,被放到主線程裡,直接執行列印 console.log('馬上執行for迴圈啦') .then裡的函式是非同步任務,被放到event table console.log('**執行結束')是同步**,被放到主線程裡,直接執行

所以,結果是【馬上執行for迴圈啦 --- **執行結束 --- 定時器開始啦 --- 執行then函式啦】嗎?

親自執行後,結果居然不是這樣,而是【馬上執行for迴圈啦 --- **執行結束 --- 執行then函式啦 --- 定時器開始啦】

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

而準確的劃分方式是:

按照這種分類方式: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(),3000)

但是這種說並不嚴謹, 準確的解釋是: 3秒後, settimeout裡的函式被會推入event queue,而event queue(事件佇列)裡的任務, 只有在主線程空閒時才會執行。

所以只有滿足 (1)3秒後 (2)主線程空閒, 同時滿足時,才會3秒後執行該函式

如果主線程執行內容很多, 執行時間超過3秒,比如執行了10秒, 那麼這個函式只能10秒後執行了。

參考自：

JS JS引擎的執行機制

JS 引擎的執行機制

JS引擎的執行機制

關於js引擎的執行機制

JS JS引擎的執行機制

JS 引擎的執行機制

JS引擎的執行機制

關於js引擎的執行機制

相關推薦