好程序員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執行機制的理解，直到我遇到了下面這段代碼。

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的執行機制是：

　　執行一個宏任務，過程中如果遇到微任務，就將其放到微任務的“事件隊列”里

　　當前宏任務執行完成后，會查看微任務的“事件隊列”，并將里面全部的微任務依次執行完

　　重復以上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(事件隊列)里的任務，只有在主線程空閑時才會執行。

　　所以只有滿足(1)3秒后(2)主線程空閑，同時滿足時，才會3秒后執行該函數

　　如果主線程執行內容很多，執行時間超過3秒，比如執行了10秒，那么這個函數只能10秒后執行了。

轉載于:https://juejin.im/post/5d00b9c551882554d6312178

總結

以上是生活随笔為你收集整理的好程序员web前端分享JS引擎的执行机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。