好程序員web前端分享JS引擎的執行機制

　　好程序員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的執行機制是：

 

　　執行一個宏任務，過程當中若是遇到微任務，就將其放到微任務的「事件隊列」裏

 

　　當前宏任務執行完成後，會查看微任務的「事件隊列」，並將裏面所有的微任務依次執行完

 

　　重複以上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秒後執行了。