番外篇 --- js代码执行（浏览器）

js的代码分为同步任务和异步任务，异步任务又分为宏任务和微任务

• 目前我们常见的微任务是 Promise 回调函数、 process.nextTick、 MutationObserver

js执行代码的先后顺序为：异步任务则是先将js整体代码当作一个宏任务执行，遇到微(宏)任务就添加到任务队列中继续执行同步任务，等执行完然后清空所有微任务

当第一次 js 的整体代码执行完毕后,也就是执行完成了一个宏任务，这时候该执行微任务，将微任务队列清空后继续重复上述 js 代码执行顺序

需要注意的是，微任务比宏任务优先级要高，因此在同一个任务中，如果既有微任务又有宏任务，那么微任务会先执行完毕。而在不同的任务中，宏任务的执行优先级要高于微任务，因此在一个宏任务执行完毕后，它才会执行下一个宏任务和微任务队列中的任务。

来个小案例

console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
new Promise(resolve => {
  console.log(3)
  resolve()
}).then(() => {
  console.log(4)
})
setTimeout(() => {
  console.log(5)
  new Promise(resolve => {
    console.log(6)
    setTimeout(() => {
      console.log(7)
    })
    resolve()
  }).then(() => {
    console.log(8)
  })
}, 500)

new Promise(resolve => {
  console.log(9)
  resolve()
}).then(() => {
  console.log(10)

  setTimeout(() => {
    console.log(11)
  }, 0)
})
console.log(12)

// 答案放在评论区了哦