微任务,宏任务和Event-Loop

忘是亡心i 2021-09-17 22:32 387阅读 0赞

一段代码让你了解Event-Loop

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

讲解之前先看一段代码，可以先预测一下代码的执行结果，首先打印了1，然后是一个定时器，因为js是单线程，所以代码不会等到定时器执行完在继续代码，定时器会放到异步队列里面，等到合适的时机再执行。再下面是一个promise，那么promise什么时候执行呢？

![Image 1][]

c97f7fee-b283-4774-84d1-5458ccfab1c7.png

上面这张图片是代码执行的具体过程，console.log(1)是同步代码，直接执行，遇到定时器后，定时器是异步任务，定时器的时间到了会马上把回调函数加入宏任务队列里面，Promise是同步任务，直接执行，promise().then是一个微任务，所以把console.log(4)放到了微任务的队列，接着里面是一个定时器，时间到了就把定时器放到了宏任务队列里面，当主线程的代码执行完毕，会检查微任务队列里面是否有代码没执行，有代码的话就一并执行，如果没有，宏任务队列里面的代码会依次进入主线程，直到宏任务为空。这样一分析，代码的执行顺序就很清晰了，分别是1 3 4 2 5。

--------------------

> （1）所有同步任务都在主线程上执行，形成一个 执行栈 。  
> （2）主线程之外，还存在一个"宏任务队列" 。只要异步任务有了运行结果（例如定时器的时间到了，或者ajax请求回来数据了等等），就在"宏任务队列"之中放置一个事件（对应的回调函数）。  
> （3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"微任务队列"里面的任务，微任务执行完，再看看"宏任务队列"里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。  
> （4）主线程不断重复上面的第三步。

说了那么多，Event-Loop到底是啥？

--------------------

上面一直在说微任务，宏任务，当前执行栈，浏览器怎么能知道什么时候执行宏任务，什么时候执行微任务，其实有一个这样的机制不断检查是否该执行微任务了，或者宏任务。（这是个非常简易的描述了，实际上会复杂很多）而这样的操作就被称为Event Loop。

微任务和宏任务都有哪些

宏任务

<table> 
 <thead> 
  <tr> 
   <th>*</th> 
   <th>浏览器</th> 
   <th>node</th> 
  </tr> 
 </thead> 
 <tbody> 
  <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>node</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Promise.then catch finally</td> 
   <td>✅</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>process.nextTick</td> 
   <td>❌</td> 
   <td>✅</td> 
  </tr> 
  <tr> 
   <td>MutationObserver</td> 
   <td>✅</td> 
   <td>❌</td> 
  </tr> 
 </tbody> 
</table>

原文链接：https://www.jianshu.com/p/a483503b9582

[Image 1]: