js异步之宏任务（marcroTask）和微任务（microTask）

首先我先给大家解释一下什么是宏任务和微任务

宏任务包括：setTimeout setInterval Ajax DOM事件(异步)
微任务：Promise async/await--阻塞的 异步方法 (同步)
微任务比宏任务的执行时间要早

---

 其次我还想让大家了解一下异步和单线程

异步和单线程是相辅相成的，（也就是说没有单线程，就不会出现异步这个概念）js是 一门单线程脚本语言，你不可能让每一个事件按顺序排好，执行完一个任务在进行下一个任务。也有点扯淡，所以需要异步来辅助

异步和同步的区别:

• 异步不会阻塞程序的执行，
• 同步会阻塞程序的执行，

---

说的通俗一点，同步任务就像在食堂的一号窗口买饭，你买完了，我买，我买完了下一个人买，

下一个人买完了，才可以一起吃，而异步任务就像是在123.三个窗口同时买饭，谁先买完谁吃

---

前端使用异步的场景：

1. 定时任务：setTimeout，setInverval
2. 网络请求：ajax请求，动态<img>加载（异步的概念我们了解了，所以说我们不可能等axios请求完成后或者图片加载完成后才让用户干别的事情，这太影响用户体验了）

那么同步和异步以及宏任务和微任务我们了解了，他们的执行顺序是怎样理解呢？

我总结了几点：

// 宏任务队列 1
setTimeout(() => {
  // 宏任务队列 2.1
  console.log('timer_1');
  setTimeout(() => {
    // 宏任务队列 3
    console.log('timer_3')
  }, 0)
  new Promise(resolve => {
    resolve()
    console.log('new promise')
  }).then(() => {
    // 微任务队列 1
    console.log('promise then')
  })
}, 0)
 
setTimeout(() => {
  // 宏任务队列 2.2
  console.log('timer_2')
}, 0)
console.log('========== Sync queue ==========')

第一步：先执行所有的同步任务(log)
第二步：执行完毕再去执行第一个宏任务(宏1)
第三步：执行第一个宏任务的时候，先看有没有需要执行的‘微任务’（promise），如果有，执行，没有就执行‘宏任务’（执行完第一批‘微任务’，此时去执行第二个宏任务）

第四步：宏2同上
大致就是这样一个流程，大家记住一句话就行‘有微则微，无微则宏’