自我理解js执行顺序——附件练习题和自我解析的答案

拼搏现实的明天。 2022-11-11 05:18 44阅读 0赞

### 目录 ###

*  前言
 *  js执行顺序
 *   *  微任务
     *  宏任务
 *  练习1
 *  练习2
 *  练习3
 *  原创不易，可以点个赞支持支持

# 前言 #

现在每次文章开篇必前言，今天中午公司前端组发了一道题，当时面试也看过，没总结，导致看到题目知道是js执行顺序，并且包括宏任务，微任务，但是答案确差了很远，因此再次总结一下

# js执行顺序 #

我们知道，js是一条流水线，没有多余的分支，而且是从**上往下执行**。  
原理是v8引擎是用来解析js的，因为v8引擎是单线程所以导致js也是单线程的，

此时你会有疑问：**但是我们所认识的定时器不是“多线程”吗？实际上定时器是假的‘多线程’。** 这个问题留到后面你就知道了

在v8引擎中有**主线程**和**任务队列**两个，同时执行顺利就是先**同后异，先微后宏**  
当v8引擎解析到异步代码时，比如定时器，就会把异步代码交给相关的模块处理，处理完之后，再交给事件队列中排队，当执行栈有空时，消息队列就把事件交给调用栈执行。

简单理解就是：军人优先  
比如在一个打仗的队伍里，有军人和普通人相互穿插着，军人就是**同步**，普通人就是**异步**。因为军人优先，所以所有军人会从队伍里出来，排成一队，则这就是**主线程**，普通人排成一队，则这就是**任务队列**，当军人依次完成任务不见了，主线程就会空出来，此时普通人中的成年男人（**微任务**）就站出来，排到主线程中，当成年男人完成任务也依次不见了，那么剩下的人（**宏任务**）就要占到主线程中。

通过这个故事，估计我们大体可以了解什么是同步，异步，微任务，宏任务，主线程和任务队列。下面通过做题可以加深对js执行顺序有更深的了解。  
在做题前，我们先了解一下宏任务，微任务有哪些

## 微任务 ##

\-我所了解的微任务有

*  **Promise.then catch finally**
 *  **async…await**(他是promise的语法糖)
 *  Object.observe
 *  MutationObserver

注意：Promise的内容是同步的，他的then catch finally的回调才是异步的

## 宏任务 ##

\-我所了解的宏任务有

*  **setTimeout**
 *  **setInterval**
 *  **setImmediate**
 *  I/O
 *  UI rendering

# 练习1 #

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

练习1解析：这个代码是混着的，因此我们从上往下先把军人，男人和剩下的人分开出来

<table> 
 <thead> 
  <tr> 
   <th>同步</th> 
   <th>微任务</th> 
   <th>宏任务</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>console.log(2)</td> 
   <td>console.log(4)</td> 
   <td>setTimeout(() =&gt; console.log(1), 0)</td> 
  </tr> 
  <tr> 
   <td>console.log(5)</td> 
   <td></td> 
   <td>setTimeout(() =&gt; console.log(3), 0)</td> 
  </tr> 
 </tbody> 
</table>

因此我们得出执行顺序就是2.5.4.1.3

# 练习2 #

setTimeout(() =>
    	 new Promise(res => { 
    		console.log(6)
    		setTimeout(() => console.log(7), 0)
    		res()
    	 }).then(() => console.log(8))
    , 0)
    new Promise(res => { 
    	console.log(2)
    	setTimeout(() => console.log(3), 0)
    	res()
    }).then(() => console.log(4))
    console.log(5)

练习2解析：

<table> 
 <thead> 
  <tr> 
   <th>同步</th> 
   <th>微任务</th> 
   <th>宏任务</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>console.log(2)</td> 
   <td>console.log(4)</td> 
   <td>setTimeout(() =&gt; new Promise(res =&gt; {console.log(6) setTimeout(()=&gt; console.log(7), 0) res()}).then(() =&gt; console.log(8)), 0)</td> 
  </tr> 
  <tr> 
   <td>console.log(5)</td> 
   <td></td> 
   <td>setTimeout(() =&gt; console.log(3), 0)</td> 
  </tr> 
 </tbody> 
</table>

我们先执行同步：则前三个我们很容易得出答案：2.5.4  
此时我们对于宏任务包含微任务会很懵逼  
此时在主线程只剩下宏任务，那么我们把宏任务再接着拆解

<table> 
 <thead> 
  <tr> 
   <th>同步</th> 
   <th>微任务</th> 
   <th>宏任务</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>console.log(6)</td> 
   <td>console.log(8)</td> 
   <td>setTimeout(() =&gt; console.log(3), 0)</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>-</td> 
   <td>setTimeout(() =&gt; console.log(7), 0)</td> 
  </tr> 
 </tbody> 
</table>

在这个排队中，我们会觉得3为什么会在7前面，你可以只样子理解，当我们执行到宏任务a1的时候，此时他已经从任务队列出来了，到了主线程中，但是执行的时候，发现他们是一家人，里面有同，微，宏三种，因此我们要把他们拆开，但是你拆开宏就要乖乖排到后面，而不能插队  
那么我们很自然的得出答案就是2.5.4.6.8.3.7

# 练习3 #

console.log("游戏开始",1);
    new Promise( (resolve) => { 
       console.log("promise",2);
       resolve();
    })
    .then( () => { 
       console.log("then",3);
    });
    console.log("promise结束",4);
    setTimeout( () => { 
       console.log("setTimeout",5);
       new Promise( (resolve) => { 
           console.log("promise",6);
           resolve();
       })
       .then( () => { 
           console.log("then",7);
       });
    },0);
    new Promise( (resolve) => { 
       console.log(promise,8);
       resolve()
    })
    .then( () => { 
       console.log(then,9)
       setTimeout( () => { 
           console.log("setTimeout",10);
       },0);
    })
    console.log("游戏结束",11);

同理，我么接着拆分

<table> 
 <thead> 
  <tr> 
   <th>同步</th> 
   <th>微任务</th> 
   <th>宏任务</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>console.log(“游戏开始”,1);</td> 
   <td>console.log(“then”,3);</td> 
   <td>console.log(“setTimeout”,5);new Promise( (resolve) =&gt; {console.log(“promise”,6);resolve();}) .then( () =&gt; {console.log(“then”,7);});</td> 
  </tr> 
  <tr> 
   <td>console.log(“promise”,2);</td> 
   <td>console.log(then,9) setTimeout( () =&gt; {console.log(“setTimeout”,10); },0);</td> 
   <td>-----</td> 
  </tr> 
  <tr> 
   <td>console.log(“promise结束”,4);</td> 
   <td>-----</td> 
   <td>-----</td> 
  </tr> 
  <tr> 
   <td>console.log(promise,8);</td> 
   <td>-----</td> 
   <td>-----</td> 
  </tr> 
  <tr> 
   <td>console.log(“游戏结束”,11);</td> 
   <td>-----</td> 
   <td>-----</td> 
  </tr> 
 </tbody> 
</table>

我们可以得出前6个答案：1，2，4，8，11，3

此时我们执行到了

console.log(then,9)
    setTimeout( () => { 
       console.log("setTimeout",10);
    },0);

接着拆分

<table> 
 <thead> 
  <tr> 
   <th>同步</th> 
   <th>微任务</th> 
   <th>宏任务</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>console.log(then,9)</td> 
   <td>-</td> 
   <td>console.log(“setTimeout”,5);new Promise( (resolve) =&gt; {console.log(“promise”,6);resolve();}) .then( () =&gt; {console.log(“then”,7);});</td> 
  </tr> 
  <tr> 
   <td>-</td> 
   <td>-</td> 
   <td>setTimeout( () =&gt; { console.log(“setTimeout”,10);},0);</td> 
  </tr> 
 </tbody> 
</table>

同习题2一样，新增的宏任务不能插队  
得出接下里答案是 9

此时我们接着拆分宏a1

<table> 
 <thead> 
  <tr> 
   <th>同步</th> 
   <th>微任务</th> 
   <th>宏任务</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>console.log(“setTimeout”,5);</td> 
   <td>console.log(“then”,7)</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>console.log(“promise”,6);</td> 
   <td>-</td> 
   <td>setTimeout( () =&gt; { console.log(“setTimeout”,10);},0);</td> 
  </tr> 
 </tbody> 
</table>

得出答案5.6.710

最后习题3的答案就是1.2.4.8.11.3.9.5.6.7.10

做完题是不是觉得定时器是假的‘多线程’。

# 原创不易，可以点个赞支持支持 #