宏任务和微任务

1.宏任务

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）

任务（代码）	宏任务	环境
script	宏任务	浏览器
事件	宏任务	浏览器
网络请求（Ajax）	宏任务	浏览器
setTimeout() 定时器	宏任务	浏览器 / Node
fs.readFile() 读取文件	宏任务	Node

比如去银行排队办业务，每个人的业务就相当于是一个宏任务；

2.微任务

微任务（microtask）是宏任务中的一个部分，它的执行时机是在同步代码执行之后，下一个宏任务执行之前。

微任务包含：
Promise.then
process.nextTick(Node.js 环境)

比如一个人，去银行存钱，存钱之后，又进行了一些了操作，比如买纪念币、买理财产品、办信用卡，这些就叫做微任务。

3.运行机制

• 执行一个宏任务（执行栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

4.例题解析

例1

console.log(1)

setTimeout(function() {
  console.log(2)
}, 0)

const p = new Promise((resolve, reject) => {
  resolve(1000)
})
p.then(data => {
  console.log(data)
})

console.log(3)

执行结果是 ：1、3、4、5、1000、2

例2

console.log(1)
setTimeout(function() {
  console.log(2)
  new Promise(function(resolve) {
    console.log(3)
    resolve()
  }).then(function() {
    console.log(4)
  })
})

new Promise(function(resolve) {
  console.log(5)
  resolve()
}).then(function() {
  console.log(6)
})
setTimeout(function() {
  console.log(7)
  new Promise(function(resolve) {
    console.log(8)
    resolve()
  }).then(function() {
    console.log(9)
  })
})
console.log(10)

结果是 ：1、5 、10、6、2、3、4、7、8、9
首先执行同步的consloe.log(1)、遇到宏任务先让其排队等待
再执行newPromise打印 5、遇到.then可知是微任务，需等待同步任务执行完毕
然后打印10、至此同步的执行完毕
回头看微任务队列有6、至此同步任务和微任务已执行完毕
轮到宏任务了，由于定时器没有延迟，所以按顺序执行

例3

  new Promise((resolve, reject) => {
    resolve(1)

    new Promise((resolve, reject) => {
      resolve(2)
    }).then(data => {
      console.log(data)
    })

  }).then(data => {
    console.log(data)
  })

  console.log(3)

执行结果：3、2、1
promise自身是同步任务
遇到reslove（1）因为不是打印所以不执行，直到匹配到.then将括号里的1给consloe.log(1)
按顺序往下执行到reslove(2).匹配到最近的.then执行，而.then是微任务需等到同步执行完毕
直接打印最下面的3

例4

setTimeout(() => {
  console.log(1)
}, 0)
new Promise((resolve, reject) => {
  console.log(2)
  resolve('p1')

  new Promise((resolve, reject) => {
    console.log(3)
    setTimeout(() => {
      resolve('setTimeout2')
      console.log(4)
    }, 0)
    resolve('p2')
  }).then(data => {
    console.log(data)
  })

  setTimeout(() => {
    resolve('setTimeout1')
    console.log(5)
  }, 0)
}).then(data => {
  console.log(data)
})
console.log(6)

执行结果是：2、3、6、p2、p1、1、4、5