js 中的 Event Loop 以及 宏任务 与 微任务

---

前言

1、JS 的 执行引擎 与 执行环境

简单来说，为了让 JavaScript 运行起来，要完成两部分工作（当然实际比这复杂的多）：

• Engine（执行引擎）：编译并执行 JavaScript 代码，完成内存分配、垃圾回收等。
• Runtime（执行环境）：为 JavaScript 提供一些对象或机制，使它能够与外界交互。

在 JavaScript 运行的时候，JavaScript Engine 会创建和维护相应的堆（Heap）和栈（Stack），同时通过 JavaScript Runtime 提供的一系列 API（例如：setTimeout、XMLHttpRequest 等）来完成各种各样的任务。

2、js 是单线程的

进程：
- 资源分配的最小单位。
- 指在系统中正在运行的一个应用程序。
- 程序一旦运行就是进程。

线程：
- 程序执行的最小单位。
- 系统分配处理器时间资源的基本单元，或者说进程之内独立执行的一个单元执行流。

JavaScript 是一种单线程的编程语言，只有一个调用栈，决定了它在同一时间只能做一件事情。

在 JavaScript 的运行过程中，真正负责执行 JavaScript 代码的始终只有一个线程，通常被称为主线程，各种任务都会用排队的方式来同步执行。

然而 JavaScript 却又是一个非阻塞（Non-blocking）、异步（Asynchronous）、并发式（Concurrent）的编程语言，这就得说说 JavaScript 的事件循环（Event Loop）机制了。

一、事件循环（Event Loop）

事件循环（Event Loop） 是让 JavaScript 做到既是单线程，又绝对不会阻塞的核心机制，也是 JavaScript 并发模型（Concurrency Model）的基础，是用来协调各种事件、用户交互、脚本执行、UI 渲染、网络请求等的一种机制。简而言之——Event Loop 是 JS 实现异步的一种机制。

Event Loop 包含 2 种：一种存在于 Browsing Context 中，还有一种在 Worker 中。

二者的运行是独立的。也就是说，每一个 JavaScript 运行的“线程环境”都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。

二、任务队列

Event Loop（事件循环）是通过 任务队列 的机制来进行协调的。

任务队列 的特点：

• 一个 事件循环 中可以有一个或者多个 任务队列，一个 任务队列 便是一系列有序 任务 的集合。
• 每个 任务 都有一个 任务源，同一个 任务源 的 任务 必须放到同一个 任务队列 中。
• setTimeout、Promise 等 API 便是 任务源，而进入 任务队列 的是他们指定的具体执行任务。

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

• 在此次 tick 中选择最先进入队列的任务（oldest task），如果有则执行（一次）；
• 检查是否存在 Microtasks，如果存在则不停地执行，直至清空 Microtasks Queue；
• 更新 render；
• 主线程重复执行上述步骤。

在上述 tick 的基础上需要了解几点：

• JS 分为同步任务和异步任务；
• 同步任务都在主线程上执行，形成一个执行栈；
• 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件；
• 一旦执行栈中的所有同步任务执行完毕（此时 JS 引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。
  

三、宏任务 与 微任务

1、宏任务

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染——(macro)task->渲染->(macro)task->...。

宏任务包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel 和 setImmediate(Node.js 环境)。

2、微任务

microtask 可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。

所以它的响应速度相比setTimeout（setTimeout 是 task）会更快，因为无需等渲染。也就是说，在某一个 macrotask 执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

微任务包含：Promise、async/await、Object.observe、MutationObserver 和 process.nextTick(Node.js 环境)。

3、宏任务与微任务的运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后 GUI 线程接管渲染
• 渲染完毕后，JS 线程继续接管，开始下一个宏任务（从事件队列中获取）
  

四、Event Loop 实例

1、案例一

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

// 输出结果：1 4 7 5 2 3 6 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

解析：
首先需要知道的知识点包括：

• js 是从上往下执行的。
• promise 的两个作为参数的回调函数里的内容（除了 resolve(); 和 reject(); 函数外），也是与全局同步执行的。
• 执行顺序：同步代码 > 微任务代码 > 宏任务代码。async/await 函数会有点特殊。

执行步骤：

• 首先会执行同步的代码，输出：1,4,7。
• 执行微任务，此时的微队列中的任务为 Promise 中的 resolve(5) 则输出：5。
• 执行宏队列中的队首任务（注意只执行一个宏任务）,此时的队首任务为代码中第一个setTimeOut，则输出了：2。在执行这个任务时又产生了一个新的微任务。
• 执行新产生的微任务，所以输出了：3。
• 然后宏队列中还有一个任务，于是输出：6。

2、案例二

function fn2 () {
  console.log(1);
  return new Promise(resolve => {
    resolve(2);
    console.log(3);
  })
}
console.log(4);
fn2().then(res => console.log(res));
console.log(5);

// 输出结果：4 1 3 5 2
1
2
3
4
5
6
7
8
9
10
11
12

解析：

• js 是从上往下执行的，首先会执行同步的代码：4。
• 然后执行函数 fn2()：1。
• 然后执行函数里 promise 对象里的同步代码：3，而 resolve() 里的内容会在微任务里稍后执行。
• 走完 fn2() 函数的同步逻辑后，会执行同步的代码： 5。
• 然后才是 fn2() 函数里的微任务代码（异步）：2。

3、案例三

async function fn1 () {
  console.log(1);
  await new Promise(resolve => {
    resolve(2);
    console.log(3);
  })
  console.log(4);
  return 5;
}

console.log(6);
fn1().then(res => console.log(res));// 不会打印 2，而是会打印 5
console.log(7);

// 输出结果：6 1 3 7 4 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

解析：
首先需要知道的知识点包括：

• async 函数总是会返回一个 promise 对象。
• async 函数中，await 会中断同步代码的执行，需等到 await 代码执行完后才会继续执行同步代码。（执行顺序：async 函数外的同步代码 > async 函数里的同步代码。）

执行过程如下：

• 首先会执行同步的输出：6。
• 然后会执行函数 fn1() 里在 await 之前的同步的代码：1。
• 然后会执行 await 标记的 promise 对象里的同步代码：3。而 resolve() 里的内容会在微任务里稍后执行。等待被 await 标记的代码（包括微任务和宏任务）执行完之后才会执行其后的代码。
• 然后会继续执行 async 函数之外的同步的代码：7。
• 然后会执行 async 函数里的 await 标记之后的同步的代码：4。
• 然后，一般会在 then() 的回调函数里执行 resolve() 里传入的内容，可是接下来执行的 return 语句会覆盖掉 resolve() 传入的内容，作为 then() 回调函数的入参，所以之后会打印：5，而不是 2，因为 2 被 5 覆盖了。

【参考文章】
深入理解 JavaScript Event Loop-阿里 CCO 体验技术专刊首发
js中的宏任务与微任务
JavaScript 运行机制详解：再谈Event Loop