总结js主线程宏任务微任务执行顺序

先知道js是如何运转执行的

JavaScript是单线程指的是同一时间只能干一件事情，只有前面的事情执行完，才能执行后面的事情。导致遇到耗时的任务时后面的代码无法执行。

在此之前啊 我们必须了解同步和异步

js 是可以执行同步和异步任务的，同步的任务众人皆知是按照顺序去执行的；而异步任务的执行，是有一个优先级的顺序的，包括了 宏任务（macrotasks） 和 微任务(microtasks)

宏任务包含

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务包含

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)

执行顺序 主线程 -->微任务–>宏任务

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

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

例如上面这段代码的执行顺序

console.log('01') //主线程 直接执行  出结果   01
Promise.resolve().  //主线程 直接执行
Promise.resolve().then(()=>{   //微任务挂起
  console.log('Promise1')  
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
})

setTimeout(()=>{  // 宏任务挂起
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')    
  })
},0)    


上面第一遍循环结束  开始第二遍循环

Promise.resolve().then(()=>{   //微任务执行
  console.log('Promise1')    //主线程 直接执行  出结果  Promise1
  setTimeout(()=>{    //宏任务挂起
    console.log('setTimeout2')
  },0)
})

setTimeout(()=>{  // 宏任务执行
  console.log('setTimeout1')  //主线程 直接执行  出结果  setTimeout1
  Promise.resolve().then(()=>{   //微任务挂起
    console.log('Promise2')    
  })
},0)   

上面第二遍循环结束  开始第三遍循环
因为微任务先执行  所以先执行
Promise.resolve().then(()=>{   //微任务执行
    console.log('Promise2')    //主线程 直接执行  出结果  Promise2
  })
  
  
 setTimeout(()=>{    //宏任务执行
    console.log('setTimeout2')  //主线程 直接执行  出结果  setTimeout2
  },0) 
  
  
  最终结果
  01
 Promise1
 setTimeout1
 Promise2
 setTimeout2
 

执行结果如图

下面的增加了async/await 后续补充

await 后面的回调内容 === 微任务

await相当于 后面的只能是 成功状态下的 promise.then