轉載
作者：?ziwei3749
https://segmentfault.com/a/1190000012806637
提起JS的執行機制，就不得不從JS這門語言本身的兩個個特性說起
單線程、異步
1、為什么是單線程
試想一下這樣的場景
現在有兩個進程，process1，process2，如果是多線程的話，那么他們可以同時對一個DOM進行操作
process1刪除了該dom，process2編輯了該dom，同時下達了兩個相互矛盾的命令，那么瀏覽器該如何執行呢？
這樣想，js被設計成單線程就很容易理解了吧。
2、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秒后執行了。
