• 宏任務(wù)（macro-task）

  
  
  macro-task.png

• 微任務(wù)（micro-task）

  
  
  micro-task.png

同步任務(wù)與異步任務(wù)

eventloop.png

• 同步任務(wù)進(jìn)入主線程，異步任務(wù)進(jìn)入Event Table并注冊(cè)函數(shù)
• 當(dāng)指定的事情完成時(shí)，Event Table會(huì)將這個(gè)函數(shù)移入Event Queue。
• 主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去Event Queue讀取對(duì)應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行。
• 上述過(guò)程會(huì)不斷重復(fù)，也就是常說(shuō)的Event Loop(事件循環(huán))。
• js引擎存在monitoring process進(jìn)程，會(huì)持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會(huì)去Event Queue那里檢查是否有等待被調(diào)用的函數(shù)。

宏任務(wù)與微任務(wù)

宏任務(wù)與微任務(wù).png

微任務(wù)和宏任務(wù)皆為異步任務(wù)，但是微任務(wù)的優(yōu)先級(jí)高于宏任務(wù)。

例子1：

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

執(zhí)行結(jié)果為：script start, script end, promise1, promise2, setTimeout
因?yàn)镻romise是微任務(wù)，主線程會(huì)在同步任務(wù)做完后先清空微任務(wù)隊(duì)列，再執(zhí)行宏任務(wù)隊(duì)列的setTimeout

例子2：

Promise.resolve().then(()=>{
  console.log('Promise1')  
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
})

setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')    
  })
},0)

執(zhí)行結(jié)果為：Promise1，setTimeout1，Promise2，setTimeout2

step1：
同步任務(wù)執(zhí)行完畢，會(huì)去清空微任務(wù)，輸出Promise1，同時(shí)生成宏任務(wù) setTimeout1，setTimeout2
step2：
去宏任務(wù)隊(duì)列查看，此時(shí)隊(duì)列最前面是 setTimeout1 ，所以執(zhí)行setTimeout1，同時(shí)生成微任務(wù)Promise2
step3：
宏任務(wù)結(jié)束后再去查看微任務(wù)隊(duì)列，執(zhí)行Promise2
step4：
微任務(wù)結(jié)束后再執(zhí)行最后一個(gè)宏任務(wù)setTimeout2