深入理解Javascript异步原理

众所周知,Javascript是单线程运行的,那既然是单线程运行又是如何实现异步非阻塞操作的呢?下面带大家从Javascript原理层面,一步步剖析这个问题。

JS单线程问题

我们经常说JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程?

官方的说法是:进程是 CPU资源分配的最小单位;线程是 CPU调度的最小单位。这两句话并不好理解,我们先来看张图:

Javascript异步

  • 进程好比图中的工厂,有单独的专属自己的工厂资源。
  • 线程好比图中的工人,多个工人在一个工厂中协作工作,工厂与工人是 1:n的关系。也就是说一个进程由一个或多个线程组成,线程是一个进程中代码的不同执行路线
  • 工厂的空间是工人们共享的,这象征一个进程的内存空间是共享的,每个线程都可用这些共享内存
  • 多个工厂之间独立存在。

多进程与多线程

  • 多进程:在同一个时间里,同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的,比如你可以听歌的同时,打开编辑器敲代码,编辑器和听歌软件的进程之间丝毫不会相互干扰。
  • 多线程:程序中包含多个执行流,即在一个程序中可以同时运行多个不同的线程来执行不同的任务,也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。

以Chrome浏览器中为例,当你打开一个 Tab 页时,其实就是创建了一个进程,一个进程中可以有多个线程(下文会详细介绍),比如渲染线程、JS 引擎线程、HTTP 请求线程等等。当你发起一个请求时,其实就是创建了一个线程,当请求结束后,该线程可能就会被销毁。

浏览器内核

简单来说浏览器内核是通过取得页面内容、整理信息(应用CSS)、计算和组合最终输出可视化的图像结果,通常也被称为渲染引擎。

浏览器内核是多线程,在内核控制下各线程相互配合以保持同步,一个浏览器通常由以下常驻线程组成:

  • GUI 渲染线程

  • JavaScript引擎线程

  • 定时触发器线程

  • 事件触发线程

  • 异步http请求线程

GUI渲染线程

  • 主要负责页面的渲染,解析HTML、CSS,构建DOM树,布局和绘制等。
  • 当界面需要重绘或者由于某种操作引发回流时,将执行该线程。
  • 该线程与JS引擎线程互斥,当执行JS引擎线程时,GUI渲染会被挂起,当任务队列空闲时,主线程才会去执行GUI渲染。

JS引擎线程

  • 该线程当然是主要负责处理 JavaScript脚本,执行代码。
  • 也是主要负责执行准备好待执行的事件,即定时器计数结束,或者异步请求成功并正确返回时,将依次进入任务队列,等待 JS引擎线程的执行。
  • 当然,该线程与 GUI渲染线程互斥,当 JS引擎线程执行 JavaScript脚本时间过长,将导致页面渲染的阻塞。

定时器触发线程

  • 负责执行异步定时器一类的函数的线程,如: setTimeout,setInterval。
  • 主线程依次执行代码时,遇到定时器,会将定时器交给该线程处理,当计数完毕后,事件触发线程会将计数完毕后的事件加入到任务队列的尾部,等待JS引擎线程执行。

事件触发线程

主要负责将准备好的事件交给 JS引擎线程执行。 比如 setTimeout定时器计数结束, ajax等异步请求成功并触发回调函数,或者用户触发点击事件时,该线程会将整装待发的事件依次加入到任务队列的队尾,等待 JS引擎线程的执行。

异步http请求线程

  • 负责执行异步请求一类的函数的线程,如: Promise,axios,ajax等。
  • 主线程依次执行代码时,遇到异步请求,会将函数交给该线程处理,当监听到状态码变更,如果有回调函数,事件触发线程会将回调函数加入到任务队列的尾部,等待JS引擎线程执行。

Javascript引擎

Google V8引擎是目前最流行的Javascript引擎之一,它使用在Chrome浏览器和Node.js中。下面是V8引擎一个简化的视图:

Javascript异步

V8引擎主要包含两个部分:

  • Memory Heap — 分配内存将会在这里发生
  • Call Stack — 回调函数将会在这里执行

Runtime

有一些APIs被开发者在浏览器中经常使用到(如:“setTimeout”),然而这些APIs也许并不是由Javascript引擎提供的。

Javascript异步

诸如DOM、AJAX、setTimeout等其它是由浏览器提供的,我们称之为WEB APIs。

接下来,我们将谈谈非常流行的callback queueevent loop

Call Stack

Javascript是一种单线程的编程语言,这导致它只有单一的Call Stack。因此在某一时刻,他只能做一件事。

Call Stack是一种数据结构,他主要是记录Javascript整个执行过程。当Javascript的虚拟机执行一个函数,就会把这个函数推送到Call Stack中。当这个函数返回值或是执行完毕后,这个函数就会从Call Stack删除。

如以下示例:

1
2
3
4
5
6
7
8
function multiply(x, y) {
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);

当Javascript引擎在执行这段代码的前一刻,Call Stack是空的。然后Call Stack将会按照下图发生变化。

Javascript异步

看下面的代码,这段代码模拟在Call Stack中出现异常后的全过程。

1
2
3
4
5
6
7
8
9
10
function foo() {
throw new Error('SessionStack will help you resolve crashes :)');
}
function bar() {
foo();
}
function start() {
bar();
}
start();

假设这段代码在foo.js中,foo.js在chrome浏览器执行后将会出现下面的堆栈追踪记录。

Javascript异步

堆栈溢出:Javascript引擎产生的堆栈超过Javascript运行环境所提供的最大数量。这种异常在代码中存在递归但没有设置递归结束的条件时,尤其容易产生。

下面就是这种类型的代码:

1
2
3
4
function foo() {
foo();
}
foo();

Javascript引擎执行这段代码是从foo函数开始,在这个函数中不断调用自己并没有设置终止条件,从而产生无限循环。每一次执行foo,Call Stack都会添加一次函数。这就像下面显示的那样:

Javascript异步

当Javascript引擎中的Call Stack的长度,超过Javascript执行环境中Call Stack的实际长度时,Javascript执行环境(Chrome浏览器或Node)就会抛出下面的异常。

Javascript异步

在多线程环境中,要考虑诸如死锁等复杂执行过程。单线程的环境中相比较要简单很多,但是单线程同样有它的限制。Javascript单线程的执行环境中,如何应对复杂的调用,单线程会不会限制程序的性能。

并发(concurrence)

当在你的Call Stack中存在一个需要占用相当大执行时间的函数时,将会发生什么。例如在浏览器中通过Javascript传输一个比较大的image文件时,你会怎么做?

你也许会问这怎么也算是一个问题。当Call Stack有待执行的函数时,浏览器会阻塞在这里,并不做其它的任务。这也意味着你不可能在app中呈现流畅复杂的UI。

问题不仅仅如此,一旦Call Stack中等待执行的任务很多时,浏览器要在很长的时间内都不能回应其它事件。许多浏览器这时都会抛出一个提示信息,征求你是否要关闭页面。

Javascript异步

这样必然将导致非常差的用户体验。

Event loop

浏览器端事件循环中的异步队列有两种:macro(宏任务)队列和 micro(微任务)队列。宏任务队列可以有多个,微任务队列只有一个

  • 见的 macro-task 比如:setTimeout、setInterval、script(整体代码)、 I/O 操作、UI 渲染等
  • 常见的 micro-task 比如: new Promise().then(回调)、MutationObserver(html5新特性) 等。

过程解析

一个完整的 Event Loop 过程,可以概括为以下阶段:

Javascript异步

导图要表达的内容用文字来表述的话:

  • 同步和异步任务分别进入不同的执行”场所”,同步的进入主线程,异步的进入Event Table并注册函数。
  • 当指定的事情完成时,Event Table会将这个函数移入Event Queue。
  • 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
  • 上述过程会不断重复,也就是常说的Event Loop(事件循环)。

我们不禁要问了,那怎么知道主线程执行栈为空啊?js引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。

总结

事件的执行顺序,是先执行宏任务,然后执行微任务,这个是基础,任务可以有同步任务和异步任务,同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。

Javascript异步


参考文章:

有用就打赏一下作者吧!