宏任务和微任务

所谓微任务和宏任务

宏任务：:常见的定时器,用户交互事件等等。可以理解是每次执行栈执行的代码就是一个宏任务。（宏任务就是特定的这些个任务,没什么特殊含义）
微任务： Promise相关任务,MutationObserver等（一样，只是一种称呼而已！！！）

到底先执行微任务还是宏任务

第一个原则
万物皆从全局上下文准备退出，全局的同步代码运行结束的这个时机开始

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

当执行完了console.log("1-2");的时候，意味着全局的上下文马上要退出了,因为此时全局的同步代码都执行完了,剩下的都是异步代码

第二个原则
同一层级下，微任务永远比宏任务先执行，即Promise.then比setTimeout先执行，所以先打印1-3,再打印1-1

第三个原则
每个宏任务,都单独关联了一个微任务队列
每个层级的宏任务,都对应了他们的微任务队列,微任务队列遵循先进先出的原则,当全局同步代码执行完毕后,就开始执行第一层的任务。同层级的微任务永远先于宏任务执行,并且会在当前层级宏任务结束前全部执行完毕。

练习题

      console.log("游戏开始", 1);
      new Promise((resolve) => {
        console.log("promise", 2);
        resolve();
      }).then(() => {
        console.log("then", 3);
      });
      console.log("promise结束", 4);
      setTimeout(() => {
        console.log("setTimeout", 5);
        new Promise((resolve) => {
          console.log("promise", 6);
          resolve();
        }).then(() => {
          console.log("then", 7);
        });
      }, 0);
      new Promise((resolve) => {
        console.log("promise", 8);
        resolve();
      }).then(() => {
        console.log("then", 9);
        setTimeout(() => {
          console.log("setTimeout", 10);
        }, 0);
      });
      console.log("游戏结束", 11);

文章参考自：码云笔记， CSDN