快速理解宏任务与微任务

​前端高频面试题：

宏任务(macro-task)与微任务(micro-task)

 
 

概念理解

 

宏任务和微任务都是我们在开发工作中经常用到的。

macrotask 和 microtask 表示异步任务的两种分类。
 
 

宏任务一般是：包括整体代码script，setTimeout，setInterval、I/O、UI render。

微任务主要是：Promise、Object.observe、MutationObserver。

 
 

宏任务和微任务之间的关系

 
 

 

宏任务和微任务的区别

宏任务

1. 宏任务所处的队列就是宏任务队列

2. 宏任务队列可以有多个

3. 当宏任务队列的中的任务全部执行完以后会查看是否有微任务队列如果有先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列

微任务

1. 微任务所处的队列就是微任务队列

2. 只有一个微任务队列

3. 在上一个宏任务队列执行完毕后如果有微任务队列就会执行微任务队列中的所有任务

 
 

总结：

首先浏览器执行js进入主线程, 然后再判断是否有微任务，有就执行；

 

再判断是否有宏任务，有进行执行，执行后，再判断是否有微任务，循环此操作。这个循环的过程又称为EventLoop.

 
 

相关面试题

 

题1：

setTimeout(function() {
​
    console.log('1');
​
})
​
new Promise(function(resolve) {
​
    console.log('2');
​
}).then(function() {
​
    console.log('3');
​
})
​
console.log('4');
​
//打印顺序 2 4 3 1

 

题2：

console.log(1)
setTimeout(function(){
  console.log(2);
  let promise = new Promise(function(resolve, reject) {
      console.log(7);
      resolve()
  }).then(function(){
    console.log(8)
  });
},1000);

setTimeout(function(){
  console.log(10);
  let promise = new Promise(function(resolve, reject) {
      console.log(11);
      resolve()
  }).then(function(){
    console.log(12)
  });
},0);

let promise = new Promise(function(resolve, reject) {
    console.log(3);
    resolve()
}).then(function(){
  console.log(4)
}).then(function(){
  console.log(9)
});

console.log(5)
​
//打印顺序 1 3 5 4 9 10 11 12 2 7 8

 
做对了嘛，如果做对了，就说明你对这个知识点已经掌握了^_, 没有对，可以再看两遍
 

作者：doubleyong

博客：bugshouji.com (专门解决与收集bug的网站)

 

欢迎添加下面的 “公众号” ，可以第一时间获到文章推送 @_@