前言

大家都知道 JavaScript 是单线程的脚本语言，在同一时间，只能做同一件事，为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程阻塞，Event Loop 方案应运而生…

为什么 JavaScript 是单线程？

JavaScript 是运行在浏览器的脚本语言，主要用途是和用户互动以及操作 DOM，这决定了它只能是单线程，否则会带来复杂的问题。比如我们假定 JavaScript 可以多线程，一个线程修改 DOM 节点的内容，另一个线程删除这个 DOM 节点，这时浏览器应该怎么做呢？

所以，为了避免复杂性，从一诞生，JavaScript 就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

执行栈与事件队列

当 javascript 代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分。其中，堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。但是我们这里说的执行栈和上面这个栈的意义却有些不同。

我们知道，当我们调用一个方法的时候，js 会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的 this 对象。而当一系列方法被依次调用的时候，因为 js 是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。

当一个脚本第一次执行的时候，js 引擎会解析这段代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始执行。如果当前执行的是一个方法，那么 js 会向执行栈中添加这个方法的执行环境，然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码执行完毕并返回结果后，js 会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。。这个过程反复进行，直到执行栈中的代码全部执行完毕。

下面这个图片非常直观的展示了这个过程，其中的 global 就是初次运行脚本时向执行栈中加入的代码：

从图片可知，一个方法执行会向执行栈中加入这个方法的执行环境，在这个执行环境中还可以调用其他方法，甚至是自己，其结果不过是在执行栈中再添加一个执行环境。这个过程可以是无限进行下去的，除非发生了栈溢出，即超过了所能使用内存的最大值。

以上的过程说的都是同步代码的执行。那么当一个异步代码（如发送 ajax 请求数据）执行后会如何呢？前文提过，js 的另一大特点是非阻塞，实现这一点的关键在于下面要说的这项机制——事件队列（Task Queue）。

js 引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js 会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕，主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码...，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

这里还有一张图来展示这个过程：

图中的 stack 表示我们所说的执行栈，web apis 则是代表一些异步事件，而 callback queue 即事件队列。

微任务（micro task）和宏任务（macro task）。

以上的事件循环过程是一个宏观的表述，实际上因为异步任务之间并不相同，因此他们的执行优先级也有区别。不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）。

以下事件属于宏任务：

setInterval()
setTimeout()

以下事件属于微任务

new Promise().then()
new MutaionObserver()

前面我们介绍过，在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈...如此反复，进入循环。

我们只需记住当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

这样就能解释下面这段代码的结果：

setTimeout(function () {
  console.log(1);
});

new Promise(function (resolve, reject) {
  console.log(2);
  resolve(3);
}).then(function (val) {
  console.log(val);
});

结果为：

2
3
1

经典的面试题

写出下面的执行结果：

setTimeout(function () {
  console.log("1");
}, 0);

async function async1() {
  console.log("2");
  const data = await async2();
  console.log("3");
  return data;
}

async function async2() {
  return new Promise((resolve) => {
    console.log("4");
    resolve("async2的结果");
  }).then((data) => {
    console.log("5");
    return data;
  });
}

async1().then((data) => {
  console.log("6");
  console.log(data);
});

new Promise(function (resolve) {
  console.log("7");
  //   resolve()
}).then(function () {
  console.log("8");
});

new Promise是同步任务，会立即执行。
.then是微任务,会被放入微任务队列，
setTimeout是宏任务，会被放入宏任务队列

执行顺序：同步任务=>微任务=>宏任务

输出结果：

2
4
7
5
3
6
async2的结果
1

再来看下下面这个代码，我在asyns2里加了个setTimeout的定时器，打印结果会是怎么样呢？

setTimeout(function () {
  console.log("1");
}, 0);

async function async1() {
  console.log("2");
  const data = await async2();
  console.log("3");
  return data;
}

async function async2() {
  return new Promise((resolve) => {
    console.log("4");
    setTimeout(() => {
      resolve("async2的结果");
    }, 5);
  }).then((data) => {
    console.log("5");
    return data;
  });
}

async1().then((data) => {
  console.log("6");
  console.log(data);
});

new Promise(function (resolve) {
  console.log("7");
  //   resolve()
}).then(function () {
  console.log("8");
});

输出结果：

2
4
7
1
5
3
6
async2的结果

JavaScript事件循环详解

前言

为什么 JavaScript 是单线程？

执行栈与事件队列

经典的面试题