微任务与宏任务

1、微任务与宏任务分类

微任务

• promise
• process.nextTick
• MutationObserver

宏任务

• setTimeout
• setInterval
• I/O

这里只是列举了一些常见的方法，还有部分未列举在内（MutationObserver被列举在里面的原因是因为我第一眼看到他的时候竟然不知道这是个什么东西…）

2、执行顺序

1. 主线程任务循环执行直至完毕
2. 微任务列表循环执行直至完毕
3. 宏任务列表为空则返回1，否则取出第一个任务执行完毕后跳转至2继续执行

由于宏任务与微任务是队列的形式，我们模拟下执行的顺序

  let microTask = []; // 微任务
  let macroTask = []; // 宏任务
  let main = () => {}; // 模拟主线程任务
  let doMicroTask = () => {
    while(microTask.length > 0) {
      let task = microTask.shift(); // 取出队首执行
      task(); // 执行微任务
    }
  };

  let doMacroTask = () => {
    while(macroTask.length > 0) {
      let task = macroTask.shift(); // 取出队首执行
      task(); // 执行宏任务
      doMicroTask(); // 执行完宏任务判断微任务列表中是否有任务，有的话继续执行
    }
  };

  while(1) { // 浏览器是单进程，同一时间只有一个进程在处理（这句话没那么严谨哈，但是这里讨论只按照这个去说明）
    main(); // 主线程
    doMicroTask(); // 微任务 
    doMacroTask(); // 宏任务
  }

上述代码只是模拟执行，方便理解具体执行顺序。下面看段代码具体的运行结果，看下实际的情况

  console.log(1);
  setTimeout(() => {
    console.log(5);
  });
  new Promise((resolve) => {
    console.log(2);
    resolve();
  }).then(() => {
    console.log(4);
  });
  console.log(3);

可以将上述代码直接复制到浏览器并运行，然后对照上述的执行顺序，可以查看结果是否与预料中的相同

那么当多个宏任务与微任务并存呢？或者说宏任务与微任务相互嵌套呢？

/* 1 */ console.log(1);
/* 2 */ setTimeout(() => {
/* 3 */   console.log(5);
/* 4 */   new Promise(resolve => {
/* 5 */     console.log(6);
/* 6 */     resolve();
/* 7 */   }).then(() => {
/* 8 */     console.log(7);
/* 9 */   });
/* 10 */ });

/* 11 */ new Promise(resolve => {
/* 12 */   console.log(2);
/* 13 */   resolve();
/* 14 */ }).then(() => {
/* 15 */   console.log(4);
/* 16 */ });

/* 17 */ setTimeout(() => {
/* 18 */   console.log(8);
/* 19 */   new Promise(resolve => {
/* 20 */     console.log(9);
/* 21 */     resolve();
/* 22 */   }).then(() => {
/* 23 */     console.log(10);
/* 24 */   });
/* 25 */ });

/* 26 */ console.log(3);

参照上述的执行顺序，我们模拟下任务队列的情况（任务队列中的数字代表的是上述代码的行号）。

// 1、micro = [], macro = []
// 2、micro = [], macro = [2]
// 11, 12、 micro = [15], macro = [2]
// 17、micro = [15], macro = [2, 17]
// 26、micro = [15], macro = [2, 17]
// 主线程任务执行完毕，执行微任务
// 15、micro = [], macro = [2, 17]
// 微任务执行完毕，取出宏任务的第一个
// 2、micro = [], macro = [17]
// 3, 4, 5、micro = [8], macro = [17]
// 此时第一个宏任务执行完毕，由于微任务队列中有任务，所以执行微任务
// 8、微任务执行完毕
// 继续判断宏任务，有数据，取出来第一个
// 17、micro = [], macro = []
// 18, 19, 20、micro = [23], macro = []
// 宏任务执行完毕，继续判断微任务
// 23、micro = [], macro = []
// 全部执行完毕，主线程继续执行

建议结合console.log中的数字顺序分析上述执行过程

好了我们将上述代码拷贝至浏览器中执行，可以显而易见的看到结果。现在我们打开系统的控制台，输入node后在拷贝上述代码，观察运行结果

1
2
3
4
5
6
8
9
7
10

这里的运行结果与浏览器的运行结果是不一致的。原因是因为nodejs与浏览器的运行机制还是有差异的，nodejs会将宏任务队列中的任务循环执行完毕后在次进行微任务队列的判断；而浏览器是执行完宏任务队列队首的任务就继续进行判断。两者的差异在于此，这是我们需要了解的。