事件循环详解

2020 年 10 月 12 日
笔记
前端

引言

javascript 是一门单线程的语言，在同一个时间只能做完成一件任务，如果有多个任务，就必须排队，前面一个任务完成，再去执行后面的任务。作为浏览器端的脚本语言，javascript 的主要功能是用来和用户交互以及操作 dom。假设 javascript 不是单线程语言，在一个线程里我们给某个 dom 节点增加内容的时候，另一个线程同时正在删除这个 dom 节点的内容，则会造成混乱。

由于 js 单线程的设计，假设 js 程序的执行都是同步。如果执行一些耗时较长的程序，例如 ajax 请求，在请求开始至请求响应的这段时间内，当前的工作线程一直是空闲状态， ajax 请求后面的 js 代码只能等待请求结束后执行，因此会导致 js 阻塞的问题。

javascript 单线程指的是浏览器中负责解释和执行 javascript 代码的只有一个线程，即为 js 引擎线程，但是浏览器的渲染进程是提供多个线程的，如下：

js 引擎线程
事件触发线程
定时器触发线程
异步 http 请求线程
GUI 渲染线程

一、异步 & 同步

为解决上述类似上述 js 阻塞的问题，js 引入了同步和异步的概念。

1、什么是同步？

“同步”就是后一个任务等待前一个任务结束后再去执行。

2、什么是异步？

“异步”与同步不同，每一个异步任务都有一个或多个回调函数。webapi 会在其相应的时机里将回调函数添加进入消息队列中，不直接执行，然后再去执行后面的任务。直至当前同步任务执行完毕后，再把消息队列中的消息添加进入执行栈进行执行。

异步任务在浏览器中一般是以下：

网络请求
计时器
DOM 监听事件
…

二、什么是执行栈(stack)、堆(heap)、事件队列(task queue)？

1、执行栈

“栈”是一种数据结构，是一种线性表。特点为 LIFO，即先进后出（last in, first out）。

利用数组的 push 和 shift 可以实现压栈和出栈的操作。

在代码运行的过程中，函数的调用会形成一个由若干帧组成的栈。

function foo(b) {
  let a = 10;
  return a + b + 11;
}

function bar(x) {
  let y = 3;
  return foo(x * y);
}

console.log(bar(7))

上面代码最终会在控制台打印42,下面梳理一下它的执行顺序。

console.log 函数作为第一帧压入栈中。
调用 bar，第二帧被压入栈中。帧中包含着 bar 的变量对象。
bar 调用 foo，foo 做一位第三帧被压入栈中，帧中包含着 foo 的变量对象。
foo 执行完毕然后返回。被弹出栈。
bar 执行完毕然后返回，被弹出栈。
log 函数接收到 bar 的返回值。执行完毕后，出栈。此时栈已空。

2、堆

对象被分配在堆中，堆是一个用来表示一大块（通常是非结构化的）内存区域的计算机术语。

堆和栈的区别

首先，stack 是有结构的，每个区块按照一定次序存放，可以明确知道每个区块的大小；heap 是没有结构的，数据可以任意存放。因此，
stack 的寻址速度要快于 heap。

其次，每个线程分配一个 stack，每个进程分配一个 heap，也就是说，stack 是线程独占的，heap 是线程共用的。

此外，stack 创建的时候，大小是确定的，数据从超过这个大小，就发生 stack overflow 错误，而 heap 的大小是不确定的，
需要的话可以不断增加。


public void Method1()
{
    int i=4;

    int y=2;

    class1 cls1 = new class1();
}

上面代码这三个变量和一个对象实例在内存中的存放方式如下。

从上图可以看到，i、y和cls1都存放在stack，因为它们占用内存空间都是确定的，而且本身也属于局部变量。但是，cls1指向的对象实例存放在heap，因为它的大小不确定。作为一条规则可以记住，所有的对象都存放在heap。

接下来的问题是，当Method1方法运行结束，会发生什么事？

回答是整个stack被清空，i、y和cls1这三个变量消失，因为它们是局部变量，区块一旦运行结束，就没必要再存在了。而heap之中的那个对象实例继续存在，直到系统的垃圾清理机制（garbage collector）将这块内存回收。因此，一般来说，内存泄漏都发生在heap，即某些内存空间不再被使用了，却因为种种原因，没有被系统回收。

3、事件队列和事件循环

队列是一种数据结构，也是一种特殊的线性表。特点为 FIFO，即先进先出（first in, first out）

利用数组的 push 和 pop 可实现入队和出队的操作。

事件循环和事件队列的维护是由事件触发线程控制的。

事件触发线程线程同样是由浏览器渲染引擎提供的，它会维护一个事件队列。

js 引擎遇到上文所列的异步任务后，会交个相应的线程去维护异步任务，等待某个时机，然后由事件触发线程将异步任务对应的回调函数加入到事件队列中，事件队列中的函数等待被执行。

js 引擎在执行过程中，遇到同步任务，会将任务直接压入执行栈中执行，当执行栈为空（即 js 引擎线程空闲），事件触发线程会从事件队列中取出一个任务（即异步任务的回调函数）放入执行在栈中执行。

执行完了之后，执行栈再次为空，事件触发线程会重复上一步的操作，再从事件队列中取出一个消息，这种机制就被称为事件循环（Event Loop）机制。

为了更好地理解Event Loop，请看下图（转引自Philip Roberts的演讲《Help, I’m stuck in an event-loop》）。

例子代码：

console.log('script start')

setTimeout(() => {
  console.log('timer 1 over')
}, 1000)

setTimeout(() => {
  console.log('timer 2 over')
}, 0)

console.log('script end')

// script start
// script end
// timer 2 over
// timer 1 over

模拟 js 引擎对其执行过程：

第一轮事件循环：

console.log 为同步任务，入栈，打印“script start”。出栈。
setTimeout 为异步任务，入栈，交给定时器触发线程处理（在1秒后加入将回调加入事件队列）。出栈。
setTimeout 为异步任务，入栈，交给定时器触发线程处理（在4ms之内将回调加入事件队列）。出栈。
console.log 为同步任务，入栈，打印”script end”。出栈。

此时，执行栈为空，js 引擎线程空闲。便从事件队列中读取任务，此时队列如下：

第二轮事件循环

js 引擎线程从事件对列中读取 cb2 加入执行栈并执行，打印”time 2 over“。出栈。

第三轮事件循环

js 引擎从事件队列中读取 cb1 加入执行栈中并执行，打印”time 1 over“ 。出栈。

注意点：

上面，timer 2 的延时为 0ms，HTML5标准规定 setTimeout 第二个参数不得小于4（不同浏览器最小值会不一样），不足会自动增加，所以 “timer 2 over” 还是会在 “script end” 之后。

就算延时为0ms,只是 time 2 的回调函数会立即加入事件队列而已，回调的执行还是得等到执行栈为空时执行。

四、宏任务 & 微任务

在 ES6 新增 Promise 处理异步后，js 执行引擎的处理过程又发生了新的变化。

看代码：

console.log('script start')

setTimeout(function() {
    console.log('timer over')
}, 0)

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

console.log('script end')

// script start
// script end
// promise1
// promise2
// timer over

这里又新增了两个新的概念，macrotask （宏任务）和 microtask（微任务）。

所有的任务都划分到宏任务和微任务下：

macrotask: script 主代码块、setTimeout、setInterval、requestAnimationFrame、node 中的setimmediate 等。
microtask: Promise.then catch finally、MutationObserver、node 中的process.nextTick 等。

js 引擎首先执行主代码块。

执行栈每次执行的代码就是一个宏任务，包括任务队列（宏任务队列）中的。执行栈中的任务执行完毕后，js 引擎会从宏任务队列中去添加任务到执行栈中，即同样是事件循环的机制。

当在执行宏任务遇到微任务 Promise.then 时，会创建一个微任务，并加入到微任务队列中的队尾。

微任务是在宏任务执行的时候创建的，而在下一个宏任务执行之前，浏览器会对页面重新渲染（task >> render >> task（任务队列中读取））。同时，在上一个宏任务执行完成后，页面渲染之前，会执行当前微任务队列中的所有微任务。

所以上述代码的执行过程就可以解释了。

js 引擎执行 promise.then 时，promise1、promise2 被认为是两个微任务按照代码的先后顺序被加入到微任务队列中，script end执行后，栈空。

此时当前宏任务（script 主代码块）执行完毕，并不从当前宏任务队列中读取任务。而是立马清空当前宏任务所产生的微任务队列。将两个微任务依次放入执行栈中执行。执行完毕，打印 promise1、promise2。栈空。此时，第一轮事件循环结束。

紧接着，再去读取宏任务队列中的任务，time over 被打印。栈空。

因此，宏任务和微任务的执行机制如下：

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

async & await

因为,async 和 await 本质上还是基于 Promise 的封装，而 Promise 是属于微任务的一种。所以使用 await 关键字与 Promise.then 效果类似：

setTimeout(_ => console.log(4))

async function main() {
  console.log(1)
  await Promise.resolve()
  console.log(3)
}

main()

console.log(2)
// 1
// 2
// 3
// 4

async 函数在 await 之前的代码都是同步执行的，可以理解为 await 之前的代码都属于 new Promise 时传入的代码，await 之后的所有代码都是 Promise.then 中的回调，即在微任务队列中。

五、总结

js 单线程实际上时解释执行 js 代码的只有一个线程，但是浏览器的渲染是多线程的。
异步和同步的概念与区别，异步任务有哪些。
栈、堆、队列的特点和使用场景。
事件队列以及事件循环机制。
es6 下，宏任务与微任务的执行过程。

参考：

Tags: 前端