前言

首先要明确一点微任务和宏任务都是异步编程的一部分，微任务直接进入任务队列（Queue），宏任务进入Web APIs 执行结束后，进入微任务。 > 不明白可以参考：同步编程与异步编程

• 宏任务：setInterval， setTimeout， DOM事件， Ajax请求
• 微任务：Promise，async/await

JavaScript执行顺序

1. 主线程从下往下依次执行
2. 遇到异步任务，按照规则放入微任务和宏任务
3. 主线程执行完成后，任务队列中的任务会进入主线程
4. 重复步骤1
5. 直到主线程和任务队列中任务都执行完成
6. 宏任务进入任务队列
7. 任务队列中任务进入主线程

下面结合案例再看一下js的执行顺序

console.log('start')

// setTimeout 的回调是 宏任务，进入回调队列排队
// 回调函数复制方便讲解
setTimeout(timeout = () => {
  console.log('setTimeout')
}, 0)

// Promise 的回调是 微任务，本轮调用末尾直接执行
// then中函数赋值给对象只是为了方便讲解
Promise.resolve()
  .then(promise1 = () => {
    console.log('promise1')
  })
  .then(promise2 = () => {
    console.log('promise2')
  })

console.log('end')

// global start
// global end
// promise1
// promise2
// setTimeout