前端宏任务和微任务的理解

JavaScript中分为同步任务和异步任务，而异步任务中又分为宏任务和微任务两种;
代码示例：

function app() {
      setTimeout(() => {
        console.log("1-1");
        Promise.resolve().then(() => {
          console.log("2-1");
        });
      });
      console.log("1-2");
      Promise.resolve().then(() => {
        console.log("1-3");
        setTimeout(() => {
          console.log("3-1");
        });
      });
    }
    app();

输出结果：

1-2
1-3
1-1
2-1
3-1

首先什么是宏任务和微任务：

宏任务: 常见的定时器,用户交互事件等等
微任务: Promise相关任务,MutationObserver等等

第一个原则

• 万物皆从全局上下文准备退出，全局的同步代码运行结束的这个时机开始
• 根据代码示例当执行完了console.log(“1-2”);的时候，意味着全局的上下文马上要退出了,因为此时全局的同步代码都执行完了,剩下的都是异步代码

第二个原则

• 同一层级下(不理解层级，可以先不管，后面会讲),微任务永远比宏任务先执行
• 即Promise.then比setTimeout先执行
• 所以先打印1-3,再打印1-1

怎么分辨层级？

• 属于同一个维度的代码,例如下面的func1和func2就属于同层级任务

setTimeout(func1)...
Promise.resolve().then(func2)...

• 下面这种fn1和fn2就不属于同一个层级的,因为fn2属于内部这个setTimeout的微任务队列,而fn1属于外部setTimeout的微任务队列

setTimeout(()=>{
Promise.resolve().then(fn1)
setTimeout(()=>{
Promise.resolve().then(fn2)  
})})

总结：

js代码在执行时，首先执行同步任务，当同步任务执行完毕后，开始执行异步任务，异步任务执行时，首先按照代码的层级，同层级先执行微任务其次执行宏任务，以此类推~

根据上面的代码示例，调用app()方法时，先执行代码中的同步任务console.log(“1-2”);，打印出1-2，然后是异步任务，同层级异步任务有setTimeout(宏任务)和Promise(微任务)，按照同层级先微任务后宏任务的顺序，先执行Promise打印1-3，再执行setTimeout打印1-1，而后再按照执行顺序依次执行2-1和3-1。