原文鏈接 [10 分鐘理解 JS 引擎的執行機制](https://mp.weixin.qq.com/s/8_GqWtndTxHoALhTngWglw) 首先，請牢記2點： * JS是單線程語言 * 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 是同步任務，放到主線程里 當 1、 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秒后執行了。