好程式設計師web前端分享JS引擎的執行機制，一、JS是單執行緒語言。JS的EventLoop是JS的執行機制。深入瞭解JS的執行，就等於深入瞭解JS裡的eventloop。

 

1、靈魂三問：JS為什麼是單執行緒的?為什麼需要非同步?單執行緒又是如何實現非同步的呢?

 

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

 

(1)JS為什麼是單執行緒的?

 

JS最初被設計用在瀏覽器中，那麼想象一下，如果瀏覽器中的JS是多執行緒的。

 

　　場景描述：

 

　　那麼現在有2個程序，process1process2，由於是多程序的JS，所以他們對同一個dom，同時進行操作。process1刪除了該dom，而process2編輯了該dom，同時下達2個矛盾的命令，瀏覽器究竟該如何執行呢?

 

　　這樣想，JS為什麼被設計成單執行緒應該就容易理解了吧。

 

(2)JS為什麼需要非同步?

 

　　如果JS中不存在非同步，只能自上而下執行，如果上一行解析時間很長，那麼下面的程式碼就會被阻塞。對於使用者而言，阻塞就意味著"卡死"，這樣就導致了很差的使用者體驗。

 

　　所以，JS中存在非同步執行。

 

(3)JS單執行緒又是如何實現非同步的呢?

 

　　既然JS是單執行緒的，只能在一條執行緒上執行，又是如何實現的非同步呢?

 

　　是通過的事件迴圈(eventloop)，理解了eventloop機制，就理解了JS的執行機制。

 

2、JS中的eventloop(1)

 

　　例1,觀察它的執行順序

 

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

 

　　執行結果是：132

 

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

 

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

 

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

 

　　首先判斷JS是同步還是非同步，同步就進入主程序，非同步就進入eventtable

 

　　非同步任務在eventtable中註冊函式，當滿足觸發條件後，被推入eventqueue

 

　　同步任務進入主執行緒後一直執行，直到主執行緒空閒時，才會去eventqueue中檢視是否有可執行的非同步任務，如果有就推入主程序中

 

　　以上三步迴圈執行，這就是eventloop。

 

　　所以上面的例子，你是否可以描述它的執行順序了呢?

 

console.log(1)是同步任務，放入主執行緒裡

 

setTimeout()是非同步任務，被放入eventtable，0秒之後被推入eventqueue裡

 

console.log(3是同步任務，放到主執行緒裡

 

　　當1、3在控制條被列印後，主執行緒去eventqueue(事件佇列)裡檢視是否有可執行的函式，執行setTimeout裡的函式。

 

3、JS中的eventloop(2)

 

　　所以，上面關於eventloop就是我對JS執行機制的理解，直到我遇到了下面這段程式碼。

 

　　例2：

 

setTimeout(function(){console.log('定時器開始啦')});

 

newPromise(function(resolve){console.log('馬上執行for迴圈啦');

 

for(vari=0;i<10000;i++){i==99&&resolve();

 

}}).then(function(){console.log('執行then函式啦')});console.log('程式碼執行結束');

 

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

 

setTimeout是非同步任務，被放到eventtable

 

newPromise是同步任務，被放到主程序裡，直接執行列印console.log('馬上執行for迴圈啦')

 

.then裡的函式是非同步任務，被放到eventtable

 

console.log('程式碼執行結束')是同步程式碼，被放到主程序裡，直接執行

 

　　所以，結果是：馬上執行for迴圈啦---程式碼執行結束---定時器開始啦---執行then函式啦嗎?

 

　　親自執行後，結果居然不是這樣，而是：馬上執行for迴圈啦---程式碼執行結束---執行then函式啦---定時器開始啦

 

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

 

　　而準確的劃分方式是：

 

macro-task(巨集任務)：包括整體程式碼script，setTimeout，setInterval

 

micro-task(微任務)：Promise，process.nextTick

 

JS引擎的執行機制

 

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

 

　　執行一個巨集任務，過程中如果遇到微任務，就將其放到微任務的“事件佇列”裡

 

　　當前巨集任務執行完成後，會檢視微任務的“事件佇列”，並將裡面全部的微任務依次執行完

 

　　重複以上2步驟，結合eventloop(1)eventloop(2)，就是更為準確的JS執行機制了

 

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

 

　　首先執行script下的巨集任務，遇到setTimeout,將其放到巨集任務的“佇列”裡

 

　　遇到newPromise直接執行，列印"馬上執行for迴圈啦"

 

　　遇到then方法，是微任務，將其放到微任務的“佇列”裡。

 

　　列印"程式碼執行結束"

 

　　本輪巨集任務執行完畢，檢視本輪的微任務，發現有一個then方法裡的函式，列印"執行then函式啦"

 

　　到此,本輪的eventloop全部完成。

 

　　下一輪的迴圈裡，先執行一個巨集任務，發現巨集任務的“佇列”裡有一個setTimeout裡的函式,執行列印"定時器開始啦"

 

　　所以最後的執行順序是：馬上執行for迴圈啦---程式碼執行結束---執行then函式啦---定時器開始啦

 

4、談談setTimeout

 

　　這段setTimeout程式碼什麼意思?我們一般說:3秒後,會執行setTimeout裡的那個函式

 

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

 

　　但是這種說並不嚴謹，準確的解釋是：3秒後，setTimeout裡的函式被會推入eventqueue，而eventqueue(事件佇列)裡的任務，只有在主執行緒空