宏任务和微任务

什么是宏任务和微任务

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：

• 宏任务（macrotask）
  • 异步Ajax请求
  • setTimeout、setInterval
  • 文件操作。。。
• 微任务（microtask）
  • Promise.then、.catch 和 .finally
  • process.nextTick

如下图：

宏任务和微任务的执行顺序

每一个宏任务执行完之后，都会检查是否存在待执行的微任务， 如果有，则执行完所有微任务之后，再继续执行下一个宏任务。

举个简单的例子去理解宏任务和微任务的执行顺序

去银行办业务的场景:

• 小云和小腾去银行办业务。首先，需要取号之后进行排队
  • 宏任务队列
• 假设当前银行网点只有一个柜员，小云在办理存款业务时，小腾只能等待
  • 单线程，宏任务按次序执行
• 小云办完存款业务后，柜员询问他是否还想办理其它业务？
  • 当前宏任务执行完，检查是否有微任务
• 小云告诉柜员：想要买理财产品、再办个信用卡、最后再兑换点马年纪念币？
  • 执行微任务，后续宏任务被推迟
• 小云离开柜台后，柜员开始为小腾办理业务
  • 所有微任务执行完毕，开始执行下一个宏任务

举两个经典的面试题

• 正确的执行顺序为 2-4-3-1

你有没有答对呢~

• 分析执行顺序：
  • 首先执行第5行代码打印2（这里注意只要new promise 就会立即执行所以打印2 第5行到第7行属于同步任务）
  • 在执行第12行打印4 （同步任务）
  • 接着执行第9行（微任务打印3）
  • 最后微任务执行完了再去执行宏任务 执行代码第2行 打印1

代码的正确执行顺序为：1-5-6-2-3-4-7-8-9

分析代码的执行顺序：

• 先执行同步任务打印1
• 遇到宏任务放到宿主环境
• 再执行中间图片遇到new promise为同步任务 打印5
• 接着再执行微任务打印6
• 再去执行最右边的图片代码为宏任务放到任务队列
• 接着去执行栈去取任务队列里第一次的宏任务执行打印2
• 遇到new promise为同步任务 打印3 在执行微任务打印4
• 再去执行第二次放进任务队列里的代码分别打印 7 8 9

总结

宏任务 和 微任务
'微任务执行完毕之后’再去执行宏任务
主线程代码要等到 一个宏任务执行完毕， 再去检查是否有微任务。
再去执行下一个宏任务

事件环 eventloop：
1.先执行同步任务，等到同步任务执行完毕之后。
2.执行异步任务：
宏任务和微任务
3.先执行微任务，等所有的微任务执行完毕之后再去执行宏任务。
4.一次只能执行一个宏任务。
要等到宏任务里面的所有的微任务执行完毕之后在去执行下一个宏任务。
所有的微任务执行完毕之后再去执行宏任务。
4.一次只能执行一个宏任务。
要等到宏任务里面的所有的微任务执行完毕之后在去执行下一个宏任务。
同步—异步（微任务-----宏任务）