Promise为什么比setTimeout先执行？

喜欢ヅ旅行 2021-08-13 13:51 446阅读 0赞

## 基本概念 ##

为便于理解，在进入正题之前，不得不说以下一些基本的概念。

### 进程与线程 ###

进程（process）

*  是操作系统结构的基础；
 *  是系统进行资源分配和调度的基本单位;
 *  在linux系统中可以使用`ps-ef`来查询进程列表（如下图）。比进程更小的单位叫做`线程`。
    
    ![进程列表][format_png]

线程（thread）

*  是操作系统能够进行运算调度的最小单位；
 *  它被包含在进程之中，是进程中的实际运作单位；一个进程可以`并发`多个线程，每条线程`并行`执行不同的任务。

并发（concurrency）

*  一个处理器同时处理多个任务。

并行（parallelism）

*  多个处理器或多核处理器同时处理多个任务。

单线程

*  单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。

### 同步与异步 ###

同步（synchronous）

*  调用一旦开始，调用者必须等到该调用结束才能执行下一步操作。

异步（asynchronous）

*  方法一旦调用，就会立即返回，调用者便可进行下一步操作。

## JS运行机制 ##

### 执行栈 ###

*  是一个存储函数调用的栈结构，遵循`先进后出`的原则。

### 主线程 ###

*  现在正在执行执行栈中的哪个事件。

### Event Loop ###

以上我们讲到了`进程与线程`，`同步与异步`，`执行栈`，`主线程`等，那么JS到底是怎么运行的呢？

先来供上一个常见面试题，写出以下代码的执行结果

console.log('start')
    
        setTimeout(() => {
            console.log('setTimeout')
        }, 0)
        
        new Promise(resolve => {
            console.log('promise')
            resolve()
        }).then(() => {
            console.log('then1')
        }).then(() => {
            console.log('then2');
        })
        
        console.log('end')
    复制代码

结果如下图：

![运行结果][format_png 1]

为什么setTimeout最后输出呢？？？

JS代码的执行其实就是往执行栈中放入函数。那么遇到异步代码的时候该怎么办呢？其实当遇到异步代码时，会被挂起并在需要执行的时候加入到`任务队列`。一旦执行栈为空，**Event Loop** 就会从任务队列中拿出需要执行的代码并放入执行栈中执行。

JS引擎常驻于内存中，等待宿主将JS代码或函数传递给它，也就是等待宿主环境分配宏观任务，反复等待 - 执行即为事件循环。

![Event Loop][]

**Event Loop**中，每一次循环称为tick，每一次tick的任务如下：

*  执行栈选择最先进入队列的宏任务（一般都是`script`）,执行其同步代码直至结束；
 *  检查是否存在微任务，有则会执行至微任务队列为空；
 *  如有必要会渲染页面；
 *  开始下一轮tick，执行宏任务中的异步代码（setTimeout的回调等）。

![来一个超简单的流程图][format_png 2]

宏任务与微任务

宏任务（macrotask）

*  宿主（Node、浏览器）发起的任务；
 *  在ES6规范中，将其称为task；
 *  script、setTimeout、setInterval、I/O、UI rendering、postMessage、MessageChannel、setImmediate

微任务（microtask）

*  JS引擎发起的任务；
 *  在ES6规范中，将其称为jobs；
 *  Promise、MutaionObserver、process.nextTick

## 参考 ##

[掘金技术小册（前端面试之道）第七小节][Link 1]

[Js 的事件循环(Event Loop)机制以及实例讲解][Js _Event Loop]

## 小结 ##

本文主要介绍了JS运行机制，即**Event Loop**，及其相关的一系列概念。

如有问题，欢迎指正。

作者：Mona\_Web  
链接：https://juejin.im/post/5c8d0bcae51d455e3b65267f  
来源：掘金  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[format_png]: /images/20210813/e1baae6edd5d4f10b5383a65bba23ea7.png
[format_png 1]: /images/20210813/4c47fa41cd434f82b0707af3abd5e270.png
[Event Loop]: /images/20210813/a48985670c4d4347b83e28ab1f8a5c04.png
[format_png 2]: /images/20210813/dfc45c13013a4538a5a455f6436e4203.png
[Link 1]: https://juejin.im/book/m/5bdc715fe51d454e755f75ef/section/5be04a8e6fb9a04a072fd2cd
[Js _Event Loop]: https://juejin.im/post/5b24b116e51d4558a65fdb70