JavaScript的宏任务与微任务(事件循环机制,执行队列)

宏任务微任务分别有哪些:

//宏任务
1. setTimeout
2. setInterval
3. I/O 操作
4. requestAnimationFrame

// 微任务
1.Promise
2.MutationObserver

 

看下面代码，试着看一下输出什么?

console.log('1')
// setTimeout是放到时间循环机制里面,下一次同步队列才会执行,所以在本次代码中最后输出,在执行完微任务之后执行
setTimeout(() => {
  console.log('2')
})
new Promise((resolve, rejects) => {
// 这里面的代码是同步代码
  console.log('3')
  resolve()
}).then(() => {
// .then会放到微任务队列(作业队列中) 同步队列末尾执行,所以会在输出5之后执行
  let i = 0
  while(i < 1000000000) {
    i++
  }
  console.log('4')
})
let i = 0
// while循环代码阻塞
while(i < 1000000000) {
  i++
}
// 同步队列
console.log(5)

输出结果

原因: 

// setTimeout 是宏任务 会进入到事件循环队列中,在这次同步执行队列执行完之后的下次执行队列中执行
// new Promise() 是微任务 会进入到作业队列（微任务队列）中 微任务会在本次同步执行队列的末尾进行执行

所以 当前代码环境的为微任务总比宏任务先执行

图示：