宏任务与微任务

推荐一篇讲解 Event Loop 和 宏任务微任务 比较透彻的文章 >> 这一次，彻底弄懂 JavaScript 执行机制

什么是宏任务和微任务

---

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：

• 宏任务（macrotask）

script（整体代码）、异步 Ajax 请求、setTimeout、setInterval、文件操作等

• 微任务（microtask）

Promise.then、.catch 和 .finally、process.nextTick 等

宏任务和微任务执行顺序

---

每当一个宏任务执行完之后，都会检查 是否存在待执行的微任务 。

如果有，则会先执行所有的微任务后，再执行下一个宏任务。
 

经典面试题分析

---

题目一

setTimeout(function() {
  console.log('1')		// 宏任务
})

new Promise(function(resolve) {
  console.log('2')		// 同步任务
  resolve()
}).then(function() {
  console.log('3')		// 微任务
})

console.log('4')		// 同步任务

正确输出结果为 2 4 3 1 。下面进行分析：

1. 整体 script 作为第一个宏任务进入主线程，先执行同步任务（打印 2、4 ）

这里需要注意，new Promise 是同步方法，因此 console.log('2') 是同步任务，先被执行。而 resolve() 是异步方法，作为微任务等待执行。

3. 再执行 微任务 ：Promise.then（打印 3 ）
4. 再执行 下一个宏任务 ：setTimeout（打印 1 ）

题目二

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')
  })
})

正确输出结果为 1 5 6 2 3 4 7 8 9 。

1. 先从第一个宏任务，也就是整块 script 代码开始，执行同步任务，打印 1、5
2. 处理完同步任务后，开始执行微任务，打印 6
3. 处理完所有微任务，开始执行下一个宏任务，也就是第一个定时器。执行同步任务：打印 2、3，微任务：打印 4
4. 之后开始下一个宏任务，也就是第二个定时器。执行同步任务：打印 7、8，微任务：打印 9