宏任务与微任务

• 所有同步任务都在主线程上执行,形成一个技术栈(execution context stack)。
• 主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"中放置一个事件。
• 一旦"执行栈"中所有同步任务执行完毕,系统就会读取"任务队列",查看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
• 主线程不断重复上面的第三步。
• js任务分为了两种,一种同步任务,一种异步任务。
• 异步任务又分 宏任务 和 微任务
  宏任务:setTimeout,setInterval,UI交互事件,I/O等
  微任务:Promise.then(),Object.observe等
• 运行机制:
  事件循环中,每执行一次循环操作称为tick,每一次tick的任务处理模型是比较复杂的
  ,只要简单理解为 同步--> 微任务 --> 宏任务 就可以了

console.log(1);//同步任务
new Promise((resolve, reject) => {
  console.log(2);//同步任务
  resolve(5);
  setTimeout(() => { //宏任务
    console.log(6); //宏任务的同步任务
  },2000);
}).then((res) => console.log(res))//微任务
.then(()=>console.log(7)) //微任务的微任务

new Promise((resolve, reject) => {
  console.log(3);//同步任务
  setTimeout(() => {//宏任务
    console.log(8);//同步任务
    resolve(9)
  },2000);
}).then((res) => console.log(res))//微任务
console.log(4)//第一层 同步任务

二、注意

Js引擎为了让microtask(微任务)尽快的输出，做了一些优化，连续的多个then(3个)如果没有reject或者resolve会交替执行then而不至于让一个堵太久完成用户无响应，不单单v8这样其他引擎也是这样，因为其实promuse内部状态已经结束了。这块在v8源码里有完整的体现

Promise.resolve().then(() => {
    console.log(0);//微任务的第1层
    return Promise.resolve(4);
}).then((res) => {
    console.log(res)微任务的第2层
})

Promise.resolve().then(() => {
    console.log(1);//微任务的第1层
}).then(() => {
    console.log(2);//微任务的第2层
}).then(() => {
    console.log(3);//微任务的第3层
//连续的多个then(3个)如果没有reject或者resolve会交替执行then,这里已经是第三个then了，接下来交替then，打印4
}).then(() => {
    console.log(5);//微任务的第4层
}).then(() =>{
    console.log(6);//微任务的第5层
})
//打印结果：1,2,3,4,5,6

参考链接：https://juejin.cn/post/7048512716180291615

参考链接： https://zhuanlan.zhihu.com/p/78113300