JS事件循环机制之宏任务/微任务

• 宏任务（macro-task）

  
  
  

  macro-task.png

• 微任务（micro-task）

  
  
  

  micro-task.png

同步任务与异步任务

eventloop.png

• 同步任务进入主线程，异步任务进入Event Table并注册函数
• 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
• 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
• 上述过程会不断重复，也就是常说的Event Loop(事件循环)。
• js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。

宏任务与微任务

宏任务与微任务.png

微任务和宏任务皆为异步任务，但是微任务的优先级高于宏任务。

例子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');

执行结果为：script start, script end, promise1, promise2, setTimeout
因为Promise是微任务，主线程会在同步任务做完后先清空微任务队列，再执行宏任务队列的setTimeout

例子2：

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

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

执行结果为：Promise1，setTimeout1，Promise2，setTimeout2

step1：
同步任务执行完毕，会去清空微任务，输出Promise1，同时生成宏任务 setTimeout1，setTimeout2
step2：
去宏任务队列查看，此时队列最前面是 setTimeout1 ，所以执行setTimeout1，同时生成微任务Promise2
step3：
宏任务结束后再去查看微任务队列，执行Promise2
step4：
微任务结束后再执行最后一个宏任务setTimeout2