多图生动详解浏览器与Node环境下的Event Loop（上）

前言

今年秋招，在美团一面中被问到了这样一个问题：听过Event Loop吗？

当时的我是一脸懵逼的，因为从来都没有听过这个专业名词。不过面试官还是很友好的，他说没关系，那你来做一道题，看看下面这段代码的执行结果是什么？

console.log('1')
setTimeout(function callback(){
 console.log('2')
}, 1000)
new Promise((resolve, reject) => {
    console.log('3')
    resolve()
})
.then(res => {
    console.log('4');
})
console.log('5')

很明显这道题考察的就是你对Event Loop的认识，不出所料，我当时就没做对这道题，但我默默得记下了这个考题，现在学习后回来整理知识点

你们知道正确答案是什么吗？这里先埋下个伏笔，大家可以自己做一做这道题，答案会在文章中公布

一、JavaScript是如何工作的

在刚开始学习JavaScript时，你一定听过这样一句话：JavaScript是单线程的

什么是单线程呢？就是很多段JS代码，它的执行顺序是从上到下一行一行执行的，即只有当上一行的代码执行完后才会执行下一行代码

这样的设定也是为了保证我们在实现某些功能时的代码逻辑的顺序性

此时有些人就会提出问题，上来就甩了一段代码给我，代码如下

console.log('1')
setTimeout(function (){
 console.log('2')
}, 1000)
console.log('3')
/* 运行结果：
 1
 3
 2
*/

不是说JS是单线程的，一行一行代码执行的吗？为什么这段代码先打印了 3 ，再打印了 2 呢？

先给出一个知识点，在JS中有些代码是异步执行的，所谓异步，就是不会阻塞代码的运行，而会另外开启一个空间去执行这段异步代码，其余同步的代码就仍正常执行，若异步代码中有其它的代码，则会在之后的某个时刻将异步代码中其它代码执行。例如上述代码中的 setTimeout 函数就是异步的，而其内部还有一段同步代码 console.log('2')

这里提到的某个时刻，也正是我们本文后续要讲到的重点，这里就先不做过多讲解

那么异步执行的额外空间是哪里来的？那当然是JS所处的运行环境提供的了，而JS最主要的两个运行环境就是：浏览器 和 Node，我们接下来也会基于这两个运行环境，对JS的运行机制进行讲解

二、浏览器中的JavaScript

之所以JS能在浏览器中运行，那是因为浏览器都默认提供了一个JavaScript引擎，为JS提供一个运行环境

下图是一个JavaScript引擎的简化图：

图中左侧是内存堆heap，是浏览器为了给代码分配运行内存；图中右侧是调用栈stack，每当运行一段代码JS代码时，都会将代码压入调用栈中，然后在执行完毕以后出栈

对于内存堆我们就不做过多的了解，主要讲一下调用栈

（1）调用栈

什么是调用栈？这里有一段代码，我们通过它来分析一下调用栈的运行过程

function multiply(a, b) {
 return a * b
}
function calculate(n) {
 return multiply(n, n)
}
function print(n) {
 let res = calculate(n)
 console.log(res)
}
print(5)

当这段代码在浏览器中运行时，会先查询三个定义好了的函数 multiply 、calculate 和 print ；然后执行 print(5) 这段代码，因为这三个函数是有调用关系的，因此接下来依次调用了 calculate 函数 、multiply 函数

现在，我们来看一下这段代码在执行过程中，调用栈stack内部的情况如何

这里，还有一种方式可以来验证一下调用栈的存在以及其内容，我们来编写一段这样的代码：

function fn() {
    throw new Error('isErr')
}
function foo() {
    fn()
}
function main() {
    foo()
}
main()

然后在浏览器中运行一下，就会得到如下结果：

在代码运行过程中抛出错误时，浏览器将整个调用栈里的内容都打印了出来，正如我们所期望的一样，此时的调用栈是这个样子的：

以上的过程涉及到的都是同步的代码，那么对于异步的代码来说，是如何像我们上面所说的一样，开辟一个新的空间去给异步代码运行的呢？

这里就要引入 Event Loop 的概念了

（2）Event Loop

Event Loop 翻译过来叫做事件循环，那到底是什么事件在循环呢？这里我们给出完整的浏览器的事件循环简图，来看一下

浏览器中的各种 Web API 为异步的代码提供了一个单独的运行空间，当异步的代码运行完毕以后，会将代码中的回调送入到 Task Queue（任务队列）中去，等到调用栈空时，再将队列中的回调函数压入调用栈中执行，等到栈空以及任务队列也为空时，调用栈仍然会不断检测任务队列中是否有代码需要执行，这一过程就是完整的Event Loop 了

我们可以用一个简单的例子，来感受一下事件循环的过程

console.log('1')
setTimeout(function callback(){
 console.log('2')
}, 1000)
console.log('3')

再通过动图来看看大致的过程

在这里插入图片描述

（3）宏任务和微任务

简单理解了 Event Loop 的过程后，我们再来看一道题，看看是否能回答正确

console.log('1')
setTimeout(function callback(){
 console.log('2')
}, 1000)
new Promise((resolve, reject) => {
    console.log('3')
    resolve()
})
.then(res => {
    console.log('4');
})
console.log('5')
// 这段代码的打印结果顺序如何呢？

下面公布一下答案

// 正确答案:
   1
   3
   5
   4
   2

这里你是否又有个疑问了，为什么 promise 和 setTimeout 同样是异步，为什么前者优先于后者？

这里就要引入另外两个概念了，即 macrotask（宏任务） 和 microtask（微任务）

下面列举了我们浏览器中常用的宏任务和微任务

并且规定，当宏任务和微任务都处于 Task Queue 中时，微任务的优先级大于宏任务，即先将微任务执行完，再执行宏任务

因此，上述代码先打印了 4 ，再打印了 2

当然，既然区分了宏任务和微任务，那么存放它们的队列也就分为两种，分别为macro task queue（宏队列） 和 micro task queue（微队列），如图所示

根据相关规定，当调用栈为空时，对于这两个队列的检测情况步骤如下：

1. 检测微队列是否为空，若不为空，则取出一个微任务入栈执行，然后执行步骤1；若为空，则执行步骤2

2. 检测宏队列是否为空，若不为空，则取出一个宏任务入栈执行，然后执行步骤1；若为空，直接执行步骤1

3. ……往复循环

那么我们来看一下刚才那段代码的具体调用过程吧（由于wx对动图的限制，我不得不把动图分成两部分，还请大家耐心观看，十分抱歉）

看完这段执行过程，再去写一下上面那道题，看看能否写对呢？