事件循環(huán)：macrotask與microtask

JS的執(zhí)行機(jī)制如圖：

JS的執(zhí)行機(jī)制

分析一道執(zhí)行順序的例子

console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
}

• 第一次事件循環(huán)流程：

1. 進(jìn)入主線程，console.log(1)
2. setTimeout異步執(zhí)行，將其回調(diào)函數(shù)放入Event Queue中，記為setTimeout1
3. process.nextTick()，將其回調(diào)函數(shù)存入微任務(wù)隊(duì)列中，記為process1
4. Promise，new Promise()會(huì)立即執(zhí)行console.log(7)，then被存入微任務(wù)隊(duì)列中m
5. setTimeout，其回調(diào)函數(shù)存入宏任務(wù)事件隊(duì)列中，記為setTimeout2

第一輪事件循環(huán)輸出結(jié)果1，7，6，8

• 第二輪事件循環(huán)從setTimeout1開(kāi)始

1. console.log(2)
2. process.nextTick() 存入微任務(wù)中，記為process2.
   3 new Promise()立即執(zhí)行輸出4，then也存入到微任務(wù)隊(duì)列中，記為promise2

第二輪事件循環(huán)結(jié)束，第二輪輸出2，4，3，5
第三輪事件循環(huán)開(kāi)始，只剩setTimeout2了，類似于setTimeout1執(zhí)行，結(jié)果輸出為9，11，10，12
整段代碼，共進(jìn)行了三次事件循環(huán)，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。