宏任务和微任务

宏任务和微任务

执行顺序

1. 同步-异步（异步分为宏任务(task)和微任务(jobs)）先完成宏任务，再完成微任务

   宏任务	微任务
   setTimeout	promise.then（catch,finally）
   setInterval	mutationObserver (监视dom变化)
   MessageChannel( 接口允许我们创建一个新的消息通道，并通过它的两个 MessagePort 属性发送数据。)
   script

2. 先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,当所有同步代码执行完毕后,再将异步微任务从队列中调入主线程执行,微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕。
3. 示例

  console.log(1);  //同步任务第一步执行 
  setTimeout(()=>{
    console.log(2); //这里是最后一步执行
  }); //宏任务，放入宏任务队列，下一个循环执行
  new Promise((res,rej)=>{
    res(3);
    console.log(4); //promise()里面被认为是同步执行,按照同步顺序，这里第二步打印
  }).then(data=>{
    console.log(data);  //同步执行完之后，开始微任务队列，这里第三步执行
  })
  //打印结果是 1 4 3 2

  setTimeout(()=>{//遇到宏任务先不执行，放入宏任务队列，到下一个执行循环之后按队列顺序执行
    console.log(1); //同步任务，微任务已经执行完，开始宏任务，第三步打印1
    new Promise((res,rej)=>{
      res(2);
      console.log(3); //第四步，相当于同步任务
    }).then(data => {
      console.log(data);  //开始执行微任务，第五步，打印2
    }); //放入微任务队列
  }); //放入宏任务队列
  new Promise(res=>{//微任务队列，同步执行完之后开始执行微任务
    res(4);
  }).then((data)=>{
    console.log(data); //打印4 第二步
    setTimeout(()=>{ //放入宏任务队列，等待下一个代码执行循环，由于宏任务已经有了一个任务，按照宏任务队列顺序执行
      console.log(5);//最后一步打印5
    }); 
  }); 
   console.log(6) //同步 第一步
  //打印结果：6 4 1 3 2 5

3. aynsc , await 控制异步代码执行顺序，await之后的代码直接放入微任务队列

```javascript
  async  function async1(){
    console.log('async1') //第一步直接输出
    await async2(); 
    console.log('async3')//await之后代码进入微任务队列,由于最先放入微任务队列，第五步打印
  }
  async1()//执行async1函数
  console.log('script1');//同步代码直接执行。第三步打印
  setTimeout(()=>{
    console.log('setTimeout1') // 放入宏任务队列，等待下一次循环执行 后放 第八步打印
  });
  async function async2(){
    console.log('async2'); //同步按顺序第二步打印
    setTimeout(()=>{
      console.log('async4') // 放入宏任务队列，等待下一次循环执行 先放 第二轮先执行宏任务，第七步打印
    })
  }
  new Promise((res,rej)=>{
      console.log('promise1'); //同步按顺序第四步打印
      res('promise2')
  }).then((res)=>{
      console.log(res)//代码放入入微任务队列,第六步打印
  })
  //结果  async1 async2 script1  promise1 async3 promise2 async4 setTimeout1
 
```

4. 第一点：当微任务执行过程中出现了宏任务
  将宏任务放入宏队列中，等当前微任务队列执行完毕后，再执行宏任务队列
  第二点：当宏任务执行过程中，出现了微任务（此时，宏任务队列还没有清空）
  将当前出现的微任务加入微队列中，将当前宏任务执行结束后，**再次清空微队列

   setTimeout(()=>{
     console.log('宏任务1'); //执行宏任务 第一步
     new Promise((resolve)=>{
       resolve(1)
     }).then((res)=>{
       console.log('微任务1'); //进入微任务队列 第二步执行
       setTimeout(()=>{
         console.log('宏任务2') //放入宏任务队列 上一个微任务队列执行完成，开始执行宏任务队列，第四步执行
       })
       new Promise((resolve)=>{
         resolve(2)
       }).then(res=>{
         console.log('微任务2'); //放入微任务队列，等待当前宏任务执行完，清空微任务队列 第三步执行
       })
     })
   }) 
//宏任务1 微任务1 微任务2 宏任务2

//任务队列，等待当前宏任务执行完，清空微任务队列 第三步执行
       })
     })
   }) 
//宏任务1 微任务1 微任务2 宏任务2