一次搞懂 EventLoop

众所周知,JS 是一门单线程语言,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?

JS 的执行环境一般是浏览器和 Node.js,两者稍有不同,这里只讨论浏览器环境下的情况。

JS 执行过程中会产生两种任务,分别是:同步任务和异步任务。

  • 同步任务:比如声明语句、for、赋值等,读取后依据从上到下从左到右,立即执行。
  • 异步任务:比如 ajax 网络请求,setTimeout 定时函数等都属于异步任务。异步任务会通过任务队列(Event Queue)的机制(先进先出的机制)来进行协调。

产生原因

偶然在阅读一篇博客时发现的,觉得写的很清楚,就拿过来:

以下内容来自《深入理解Vue.js实战-编码思维转变》open in new window

GUI 与事件

GUI(图形用户界面)与事件驱动的渊源可谓不浅。GUI 应用程序的特点是注重与用户的交互,因此程序的执行取决于与用户的实时交互情况,大部分的程序执行需要等到用户的交互动作发生之后。由于用户的输入频率并不高,若不停轮询获取用户输入(点像 ajax 轮询),这样的方式存在以下问题: (1) 资源利用率低。 (2) 不能真正做到及时同步。

由于 GUI 程序的执行流程由用户控制,并且不可预期,为了适应这种特点,我们通常采用事件驱动的编程方法。程序对事件的响应,其实就是调用预先编制好的代码来对事件进行处理。

如果 Javascript 完全使用同步的单线程方式来执行,我们就无法对多个事件进行监听。除此之外,我们的页面交互就会变得很慢,还会有很大一部分的等待时间,造成很多资源浪费。所以 Javascript 是异步的,支持多个事件的并发,而 JavaScript 的并发模型基于“事件循环”。在 Javascript 中,主线程从"任务队列"中读取事件,这个过程是循环不断的,整个的这种运行机制又称为 Event Loop(事件循环)

任务队列(Event Queue)

任务队列中的任务也分为两种,分别是:宏任务(Macro-take)和微任务(Micro-take)

  • 宏任务主要包括:scrip(JS 整体代码)、setTimeout、setInterval、setImmediate、I/O、UI 交互
  • 微任务主要包括:Promise(重点关注)、process.nextTick(Node.js)、MutaionObserver

任务队列的执行过程是:先执行一个宏任务,执行过程中如果产出新的宏/微任务,就将他们推入相应的任务队列,之后在执行一队微任务,之后再执行宏任务,如此循环。以上不断重复的过程就叫做 Event Loop(事件循环)

每一次的循环操作被称为tick

使用一段代码来演示整个过程:

for (macroTask of macroTaskQueue) {
  // 1. Handle current MACRO-TASK
  handleMacroTask();

  // 2. Handle all MICRO-TASK
  for (microTask of microTaskQueue) {
    handleMicroTask(microTask);
  }
}
1
2
3
4
5
6
7
8
9

理解微任务和宏任务的执行执行过程

console.log("script start");

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

Promise.resolve()
  .then(function () {
    console.log("promise1");
  })
  .then(function () {
    console.log("promise2");
  });

console.log("script end");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

按照上面的内容,分析执行步骤:

  1. 宏任务:执行整体代码(相当于<script>中的代码):
    1. 输出: script start
    2. 遇到 setTimeout,加入宏任务队列,当前宏任务队列(setTimeout)
    3. 遇到 promise,加入微任务,当前微任务队列(promise1)
    4. 输出:script end
  2. 微任务:执行微任务队列(promise1)
    1. 输出:promise1,then 之后产生一个微任务,加入微任务队列,当前微任务队列(promise2)
    2. 执行 then,输出promise2
  3. 执行渲染操作,更新界面(敲黑板划重点)。
  4. 宏任务:执行 setTimeout
    1. 输出:setTimeout

Promise 的执行

new Promise(..)中的代码,也是同步代码,会立即执行。只有then之后的代码,才是异步执行的代码,是一个微任务。

console.log("script start");

setTimeout(function () {
  console.log("timeout1");
}, 10);

new Promise((resolve) => {
  console.log("promise1");
  resolve();
  setTimeout(() => console.log("timeout2"), 10);
}).then(function () {
  console.log("then1");
});

console.log("script end");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

步骤解析:

  • 当前任务队列:微任务: [], 宏任务:[<script>]
  1. 宏任务:
    1. 输出: script start
    2. 遇到 timeout1,加入宏任务
    3. 遇到 Promise,输出promise1,直接 resolve,将 then 加入微任务,遇到 timeout2,加入宏任务。
    4. 输出script end
    5. 宏任务第一个执行结束
  • 当前任务队列:微任务[then1],宏任务[timeou1, timeout2]
  1. 微任务:
    1. 执行 then1,输出then1
    2. 微任务队列清空
  • 当前任务队列:微任务[],宏任务[timeou1, timeout2]
  1. 宏任务:
    1. 输出timeout1
    2. 输出timeout2
  • 当前任务队列:微任务[],宏任务[timeou2]
  1. 微任务:
    1. 为空跳过
  • 当前任务队列:微任务[],宏任务[timeou2]
  1. 宏任务:
    1. 输出timeout2

async/await 的执行

async 和 await 其实就是 Generator 和 Promise 的语法糖。

async 函数和普通 函数没有什么不同,他只是表示这个函数里有异步操作的方法,并返回一个 Promise 对象

翻译过来其实就是:

// async/await 写法
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
// Promise 写法
async function async1() {
  console.log("async1 start");
  Promise.resolve(async2()).then(() => console.log("async1 end"));
}
1
2
3
4
5
6
7
8
9
10
11

看例子:

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
async1();
setTimeout(() => {
  console.log("timeout");
}, 0);
new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

步骤解析:

  • 当前任务队列:宏任务:[<script>],微任务: []
  1. 宏任务:
    1. 输出:async1 start
    2. 遇到 async2,输出:async2,并将 then(async1 end)加入微任务
    3. 遇到 setTimeout,加入宏任务。
    4. 遇到 Promise,输出:promise1,直接 resolve,将 then(promise2)加入微任务
    5. 输出:script end
  • 当前任务队列:微任务[promise2, async1 end],宏任务[timeout]
  1. 微任务:
    1. 输出:promise2
    2. promise2 出队
    3. 输出:async1 end
    4. async1 end 出队
    5. 微任务队列清空
  • 当前任务队列:微任务[],宏任务[timeout]
  1. 宏任务:
    1. 输出:timeout
    2. timeout 出队,宏任务清空

"任务队列"是一个事件的队列(也可以理解成消息的队列),IO 设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列",就是读取里面有哪些事件。

"任务队列"中的事件,除了 IO 设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入"任务队列",等待主线程读取。

所谓"回调函数"(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于存在后文提到的"定时器"功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。

----JavaScript 中没有任何代码时立即执行的,都是进程空闲时尽快执行

setTimerout 并不准确

由上我们已经知道了 setTimeout 是一个宏任务,会被添加到宏任务队列当中去,按顺序执行,如果前面有。

setTimeout() 的第二个参数是为了告诉 JavaScript 再过多长时间把当前任务添加到队列中。

如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行。

看代码:

const s = new Date().getSeconds();
console.log("script start");
new Promise((resolve) => {
  console.log("promise");
  resolve();
}).then(() => {
  console.log("then1");
  while (true) {
    if (new Date().getSeconds() - s >= 4) {
      console.log("while");
      break;
    }
  }
});
setTimeout(() => {
  console.log("timeout");
}, 2000);
console.log("script end");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

因为 then 是一个微任务,会先于 setTimeout 执行,所以,虽然 setTimeout 是在两秒后加入的宏任务,但是因为 then 中的在 while 操作被延迟了 4s,所以一直推迟到了 4s 秒后才执行的 setTimeout。

所以输出的顺序是:script start、promise、script end、then1。 四秒后输出:while、timeout

注意:关于 setTimeout 要补充的是,即便主线程为空,0 毫秒实际上也是达不到的。根据 HTML 的标准,最低是 4 毫秒。有兴趣的同学可以自行了解。

总结

有个小 tip:从规范来看,microtask 优先于 task 执行,所以如果有需要优先执行的逻辑,放入 microtask 队列会比 task 更早的被执行。

最后的最后,记住,JavaScript 是一门单线程语言,异步操作都是放到事件循环队列里面,等待主执行栈来执行的,并没有专门的异步执行线程。

参考