JS 单线程之宏任务与微任务

要了解宏任务与微任务，我们要先知道JS 是单线程语言，代码自上而下执行，不会存在同时执行的另一行代码。
先执行主线程的代码，当遇到异步任务时，会将其加入到任务队列中。主线程执行完毕后，会执行任务队列中的任务。

任务队列中的任务分为宏任务与微任务。
在浏览器中
常见的宏任务有 I/O，setTimeout，setInterva，requestAnimationFrame
常见的微任务有 Promise.then，Promise.catch，Promise.finally，MutationObserver

在任务队列中先执行微任务，再执行宏任务。
在执行微任务的过程中，创建了新的微任务，仍然会先执行微任务，当所有的微任务执行完，再执行宏任务。
在执行宏任务的过程中，创建了新的微任务，结束当前宏任务后，会先去执行微任务，微任务执行完，再去执行剩下的宏任务。
以上就构成了事件循环。

我们来运行一段代码检验一下。

console.log("start");
setTimeout(() => {
  console.log("1");
  new Promise((resolve, reject) => {
    console.log("2");
    resolve();
  }).then(() => {
    console.log("3");
  });
});
new Promise((resolve, reject) => {
  console.log("4");
  resolve();
}).then(() => {
  console.log("5");
});
setTimeout(() => {
  console.log("6");
});
console.log("end");

以上代码输出的结果为 start, 4, end, 5, 1, 2, 3, 6。
我们来分析一下：
代码自上而下执行，打印出 start，遇到第一个宏任务，将其加入到任务队列中，遇到第一个 Promise，new Promise 中的代码同步执行，打印出 4，then 里面的代码作为微任务加入到任务队列中，代码继续执行，遇到第二个宏任务，将其加入到宏任务队列中，执行最后一行代码，打印出 end。这时去任务队列中查找时候有没有微任务，找到微任务执行打印出 5，微任务执行完毕，执行第一个宏任务，打印出 1，遇到新的 Promise，打印出 2，并将 then 里面的微任务加入到任务队列中，第一个宏任务执行完毕，再在任务队列中查找是否有微任务，找到刚刚加入进去的微任务，并执行，打印出 3，最后执行最后一个宏任务，打印出 6。