js中的宏任务与微任务

水深无声 2023-10-08 10:31 15阅读 0赞

如果你已经知道了js中存在宏任务和微任务，那么你一定已经了解过promise了。因为在js中promise是微任务的一个入口。  
先来看一道题：

setTimeout(function(){
        console.log('setTimeout')
    });
    
    new Promise(function(resolve, reject){
        console.log('pormise body');
        resolve();
    }).then(function(){
        console.log('promise then')
    });
    
    console.log('main');

这题的答案是:

promise body
    main
    promise then
    setTimeout

promise body出现在第一行一点也不意外，意外的是，setTimeout出现在了promise then的后边。

setTimeout和promise then都是异步调用，setTimeout又定义在promise之前，如果没有意外，应该是先输出setTimeout才对。

这里涉及到的知识点，就是宏任务与微任务了。标记一下上边的代码：

setTimeout(function(){ // 同步代码，语句1
        console.log('setTimeout') // 宏任务，语句2
    });
    
    new Promise(function(resolve, reject){
        console.log('pormise body'); // 同步代码，语句3
        resolve(); // 同步代码，语句4
    }).then(function(){
        console.log('promise then') // 微任务，语句5
    });
    
    console.log('main'); // 同步代码，语句6

那么他们运行的规则是怎样的呢？

原来，宏任务与微任务，都各自有一个调用队列（先进先出）。

遇到宏任务，微任务，则将他们推入各自的调用队列。需要注意的是，同步代码也是宏任务。

宏任务执行完一个，则去清空微任务队列，微任务清空后再去执行下一个宏任务。

我们来把上面的代码一行一行解读一下：

首先定义两个队列,宏任务队列：MacroQqueue， 微任务队列： MicroQueue

第一步，先按同步代码顺序运行  
同步代码，语句1： 添加一个宏任务，将语句2推入MacroQueue。 // MacroQueue: \[\{task: 语句2\}\]  
同步代码，语句3： 打印promise body  
同步代码，语句4： 添加一个微任务，将语句5推入MicroQueue。 // MicroQueue: \[\{task: 语句5\}\]  
同步代码，语句6： 打印main。 // 同步代码（宏任务）完成

第二步，开始清空微任务队列  
微任务： 语句5,从MicroQueue跳出，打印promise then。 // 微任务队列全部清空

第三步，开始清空宏任务队列  
宏任务：语句2，从MacroQqueue跳出，打印setTimeout // 宏任务队列全部清空

第四步：开始清空微任务队列  
队列为空...

一轮循环完成。开始下一轮，如此循环下去。

通过上面的讲解，大家应该能对宏任务，微任务的运行机制有了一定的了解了吧。那么都有哪些常见的宏任务与微任务呢？  
请看下表：

<table> 
 <thead> 
  <tr> 
   <th>宏任务</th> 
   <th>浏览器</th> 
   <th>nodejs</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>同步代码</td> 
   <td>✅</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>I/O</td> 
   <td>✅</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>setTimeout</td> 
   <td>✅</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>setInterval</td> 
   <td>✅</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>setImmediate</td> 
   <td>❌</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>requestAnimationFrame</td> 
   <td>✅</td> 
   <td>❌</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>微任务</th> 
   <th>浏览器</th> 
   <th>nodejs</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>process.nextTick</td> 
   <td>❌</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>MutationObserver</td> 
   <td>✅</td> 
   <td>❌</td> 
  </tr> 
  <tr> 
   <td>Promise （async/await）</td> 
   <td>✅</td> 
   <td>✅</td> 
  </tr> 
 </tbody> 
</table>

好了，我们来一道复杂一点的题练练手：

console.log('sync statement 1');
    Promise.resolve().then(function() {
        console.log('micro task 1');
        setTimeout(function() {
            console.log('macro task 1');
        }, 0);
    }).then(function() {
        console.log('micro task 2');
    });
    
    setTimeout(function() {
        console.log('macro task 2')
        Promise.resolve().then(function(){
            console.log('micro task 3');
        })
    }, 0)
    console.log('sync statement 2');
    
    //输出：
    // sync statement 1
    // sync statement 2
    // micro task 1
    // micro task 2
    // macro task 2
    // micro task 3
    // macro task 1

标注一下方便大家分析：

console.log('sync statement 1'); // 同步代码，语句1
    Promise.resolve().then(function() { // 同步代码，语句2，注册了一个微任务
        console.log('micro task 1'); // 微任务，语句3
        setTimeout(function() { // 微任务，语句4，同时注册了一个宏任务
            console.log('macro task 1'); // 宏任务，语句5
        }, 0);
    }).then(function() {
        console.log('micro task 2'); // 微任务，语句6
    });
    
    setTimeout(function() { // 同步代码，语句7
        console.log('macro task 2') // 宏任务，语句8
        Promise.resolve().then(function(){ // 宏任务，语句9，同时注册了一个微任务
            console.log('micro task 3'); // 微任务，语句10
        })
    }, 0)
    console.log('sync statement 2'); // 同步代码，语句11