微任务和宏任务

微任务队列和宏任务队列

微任务代码（js语法）

• Promise对象.then()

宏任务代码（宿主环境）

• script
• dom事件
• ajax
• setTimout

回顾:

异步任务

不是马上执行，是放入到队列中等待；

如果所有的任务都要按序等待，那么也不行，需要有一个能插队的机制。所以又将异步任务分为微任务和宏任务，同时对应微任务队列和宏任务队列。

当主线程空闲时，先执行微任务队列中的任务，再去执行宏任务队列中的任务。

示例

阅读如下代码执行结果:

console.log(1);

setTimeout(() => {
    console.log(2);
}, 0) 

let p = new Promise((resolve, reject) => {
    resolve(3)
}) 

p.then(res => {
    console.log(res); 
})

console.log(4);             

结果: 1  4  3  res  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

微任务和宏任务以及同步代码的执行流程

先执行第一个宏任务(<script>), 然后同步任务, 然后微任务, 然后下一个宏任务如此循环, 直到所有代码执行完毕