关于v8:教女朋友学前端之深入理解JS引擎

美味值：🌟🌟🌟🌟🌟

口味：番茄肥牛

食堂老板娘：老板，Chrome V8 引擎工作原理面试会问吗？

食堂老板：这块的常识不仅面试可能会问，学会了 JS 引擎的工作原理，能够更好的了解 JavaScript、更好的了解前端生态中 Babel 的词法剖析和语法分析，ESLint 的语法查看原理以及 React、Vue 等前端框架的实现原理。总之，学习引擎原理堪称是一举多得。

食堂老板娘：好好好，别罗嗦了，快开始吧～

V8 是咱们前端届的网红，它用 C++ 编写，是谷歌开源的高性能 JavaScript 和 WebAssembly 引擎，次要用在 Chrome、Node.js、Electron… 中。

在开始讲咱们的配角 V8 引擎之前，先来从宏观视角开展谈谈 V8 所处的地位，建设一个世界观。

在信息科技高速倒退的明天，这个疯狂的大世界充斥着各种电子设备，咱们每天都用的手机、电脑、电子手表、智能音箱以及当初马路上跑的越来越多的电动汽车。

作为软件工程师，咱们能够将它们对立了解为“电脑”，它们都是由 中央处理器(CPU)、存储以及输出、输出设备形成。CPU 就像厨师，负责依照菜谱执行命令烧菜。存储如同冰箱，负责保留数据以及要执行的命令(食材)。

当电脑接通电源，CPU 便开始从存储的某个地位读取指令，依照指令一条一条的执行命令，开始工作。电脑还能够接入各种外部设备，比方：鼠标、键盘、屏幕、发动机等等。CPU 不须要全副搞清楚这些设施的能力，它只负责和这些设施的端口进行数据交换就好。设施厂商也会在提供设施时，附带与硬件匹配的软件，来配合 CPU 一起工作。说到这里，咱们便失去了最根底的计算机，也是计算机之父冯·诺伊曼在 1945 年提出的体系结构。

不过因为机器指令人类读起来十分不敌对，难以浏览和记忆，所以人们创造了编程语言和编译器。编译器能够把人类更容易了解的语言转换为机器指令。除此之外，咱们还须要操作系统，来帮咱们解决软件治理的问题。咱们晓得操作系统有很多，如 Windows、Mac、Linux、Android、iOS、鸿蒙等，应用这些操作系统的设施更是不可胜数。为了打消客户端的多样性，实现跨平台并提供对立的编程接口，浏览器便诞生了。

所以，咱们能够将浏览器看作操作系统之上的操作系统，而对于咱们前端工程师最相熟的 JavaScript 代码来说，浏览器引擎 (如：V8) 就是它的整个世界。

毫无疑问，V8 是最风行、最强的 JavaScript 引擎，V8 这个名字的灵感来源于 50 年代经典的“肌肉车”的引擎。

V8 也曾取得了学术界的必定，拿到了 ACM SIGPLAN 的 Programming Languages Software Award。

JavaScript 的支流引擎如下所示：

V8 (Google)
SpiderMonkey (Mozilla)
JavaScriptCore (Apple)
Chakra (Microsoft)
duktape(IOT)
JerryScript(IOT)
QuickJS
Hermes(Facebook-React Native)

V8 团队应用 4 种 Chrome 公布渠道向用户推送新版本。

Canary releases 金丝雀版 (每天)
Dev releases 开发版 (每周)
Beta releases 测试版 (每 6 周)
Stable releases 稳定版 (每 6 周)

想要理解更多，请戳 V8 引擎版本公布流程。

2008 年 9 月 2 日，V8 与 Chrome 在同一天开源，最后的代码提交日期可追溯到 2008 年 6 月 30 日，你能够通过上面的链接查看 V8 代码库的可视化演变过程。

应用 gource 创立的 V8 代码库可视化演变过程

过后的 V8 架构简略粗犷，只有一个 Codegen 编译器。

2010 年，V8 中退出了 Crankshaft 优化编译器，大大晋升了运行时性能。Crankshaft 生成的机器代码比之前的 Codegen 编译器快两倍，而体积缩小了 30%。

2015 年，为了进一步晋升性能，V8 引入了 TurboFan 优化编译器。

接下来到了分水岭，在此之前，V8 都是抉择将源码间接编译为机器码的架构。不过随着 Chrome 在挪动设施的遍及，V8 团队发现了这种架构下存在的致命问题：编译工夫过长、机器码的内存占用很大。

所以，V8 团队对引擎架构进行了重构，在 2016 年引入了 Ignition 解释器和字节码。

2017 年，V8 默认开启全新的编译 pipeline(Ignition + TurboFan)，并移除了 Full-codegen 和 Crankshaft。

高性能的 JS 引擎不仅须要 TurboFan 这样高度优化的编译器，在编译器有机会开始工作之前的性能，也存在着大量的优化空间。

于是在 2021 年，V8 引入新的编译管道 Sparkplug。

对于 Sparkplug 想要理解更多，请戳 Sparkplug

对于 V8 架构演进史，想要理解更多请戳庆贺 V8 诞生 10 周年

食堂老板娘：原来 V8 架构经验了这么多的变动

食堂老板：是的，V8 团队为了一直的优化引擎的性能，做了很多致力。

敲黑板，进入本文的重点。

食堂老板娘：拿出小本本记好

V8 执行 JavaScript 代码的外围流程分为以下两个阶段：

编译
执行

编译阶段指 V8 将 JavaScript 转换为字节码或者二进制机器码，执行阶段指解释器解释执行字节码，或者 CPU 间接执行二进制机器码。

为了对 V8 整体的工作机制有更好的了解，咱们先来搞懂上面几个概念。

CPU 的指令集就是机器语言，CPU 只能辨认二进制的指令。然而对人类来说，二进制难以浏览和记忆，所以人们将二进制转换为能够辨认、记忆的语言，也就是汇编语言，通过汇编编译器能够将汇编指令转换为机器指令。

不同的 CPU 有不同的指令集，应用汇编语言编程须要兼容不同的 CPU 架构，如 ARM、MIPS 等，学习老本比拟高。汇编语言这层形象还远远不够，所以高级语言应运而生，高级语言屏蔽了计算机架构的细节，兼容多种不同的 CPU 架构。

CPU 同样不意识高级语言，个别有两种形式执行高级语言的代码，也就是：

解释执行
编译执行

解释执行会先将输出的源码通过解析器编译成中间代码，再间接应用解释器解释执行中间代码，输入后果。

编译执行也会将源码转换为中间代码，而后编译器会将中间代码编译成机器码，通常编译成的机器码以二进制文件模式存储，执行二进制文件输入后果。编译后的机器码还能够保留在内存中，能够间接执行内存中的二进制代码。

解释执行启动速度快，执行速度慢，而编译执行启动速度慢，执行速度快。

V8 权衡利弊后同时采纳了解释执行和编译执行这两种形式，这种混合应用的形式称为 JIT (即时编译)。

V8 在执行 JavaScript 源码时，首先解析器会将源码解析为 AST 形象语法树，解释器 (Ignition) 会将 AST 转换为字节码，一边解释一边执行。

解释器同时会记录某一代码片段的执行次数，如果执行次数超过了某个阈值，这段代码便会被标记为热代码(Hot Code)，同时将运行信息反馈给优化编译器 TurboFan，TurboFan 依据反馈信息，会优化并编译字节码，最初生成优化的机器码。

食堂老板娘：也就是说，当这段代码再次执行时，解释器就能够间接运行优化后的机器码，不须要再次解释，这样会晋升很多性能吧？

食堂老板：对的！

V8 的解释器和编译器的名字寓意十分乏味，解释器 Ignition 代表点火器，编译器 TurboFan 代表涡轮增压，代码启动时通过点火器动员，TurboFan 一旦染指，执行效率会越来越高。

理解了 V8 的大体工作机制，接下来咱们持续深刻，看一下 V8 外围模块的工作原理。

V8 的外围模块包含：

Parser：解析器负责将 JavaScript 代码转换成 AST 形象语法树。
Ignition：解释器负责将 AST 转换为字节码，并收集 TurboFan 须要的优化编译信息。
TurboFan：利用解释器收集到的信息，将字节码转换为优化的机器码。

V8 须要等编译实现后才能够运行代码，所以解析和编译过程中的性能非常重要。

解析器的解析过程分为两个阶段：

词法剖析 (Scanner 词法分析器)
语法分析 (Pre-Parser、Parser 语法分析器)

Scanner 负责接管 Unicode Stream 字符流，将其解析为 tokens，提供给解析器 Parser。

比方上面这段代码：

let myName = '童欧巴'

会被解析成 let，myName，=，'童欧巴'，它们别离是关键字、标识符、赋值运算符以及字符串。

接下来，语法分析会将上一步生成的 tokens，依据语法规定转换为 AST，如果源码存在语法错误，在这一阶段就会终止并抛出语法错误。

能够通过这个网站查看 AST 的构造：https://astexplorer.net/

也能够通过这个链接 https://resources.jointjs.com/demos/javascript-ast 间接生成图片，如下所示：

失去了 AST，V8 便会生成该段代码的 执行上下文。

支流的 JavaScript 引擎都采纳了 惰性解析(Lazy Parsing)，因为源码在执行前如果全副齐全解析的话，不仅会造成执行工夫过长，而且会耗费更多的内存以及磁盘空间。

惰性解析就是指如果遇到并不是立刻执行的函数，只会对其进行 预解析(Pre-Parser)，当函数被调用时，才会对其齐全解析。

预解析时，只会验证函数的语法是否无效、解析函数申明以及确定函数作用域，并不会生成 AST，这项工作由 Pre-Parser 预解析器实现。

失去了 AST 和执行上下文，接下来解释器会将 AST 转换为字节码并执行。

食堂老板娘：为什么要引入字节码呢？

引入字节码是一种工程上的衡量，从图中能够看出，仅仅是一个几 KB 的文件，生成的机器码就曾经占用了大量的内存空间。

相比机器码，字节码不仅占用内存少，而且生成字节码的工夫很快，晋升了启动速度。尽管字节码没有机器码执行速度快，然而就义了一点执行效率，换来的收益还是很值得的。

况且，字节码与特定类型的机器码无关，通过解释器将字节码转换为机器码后才能够执行，这样也使得 V8 更加不便的移植到不同的 CPU 架构。

你能够通过如下命令，查看 JavaScript 代码生成的字节码。

node --print-bytecode index.js

也能够通过如下链接进行查看：

V8 解释器的头文件，包含所有字节码

咱们来看一段代码：

// index.js
function add(a, b) {return a + b}

add(2, 4)

下面的代码在执行命令后，会生成如下的字节码：

[generated bytecode for function: add (0x1d3fb97c7da1 <SharedFunctionInfo add>)]
Parameter count 3
Register count 0
Frame size 0
   25 S> 0x1d3fb97c8686 @    0 : 25 02             Ldar a1
   34 E> 0x1d3fb97c8688 @    2 : 34 03 00          Add a0, [0]
   37 S> 0x1d3fb97c868b @    5 : aa                Return
Constant pool (size = 0)
Handler Table (size = 0)
Source Position Table (size = 8)
0x1d3fb97c8691 <ByteArray[8]>

其中，Parameter count 3 示意三个参数，包含传入的 a，b 以及 this。字节码的详细信息如下：

Ldar a1 // 示意将寄存器中的值加载到累加器中
Add a0, [0] // 从 a0 寄存器加载值并且将其与累加器中的值相加，而后将后果再次放入累加器
Return // 完结以后函数的执行，并把控制权传给调用方，将累加器中的值作为返回值

每行字节码都对应着特定的性能，一行行字节码就如同搭乐高积木一样，组装到一起就形成了残缺的程序。

解释器通常有两种类型，基于栈 和基于寄存器的解释器，晚期的 V8 解释器也是基于栈的，当初的 V8 解释器采纳了基于寄存器的设计，反对寄存器的指令操作，应用寄存器来保留参数和两头计算结果。

Ignition 解释器在执行字节码时，次要应用了 通用寄存器 和累加寄存器，相干的函数参数和局部变量会保留在通用寄存器中，累加寄存器会保留两头后果。

在执行指令的过程中，CPU 须要对数据进行读写，如果间接在内存中读写的话，会重大影响程序的执行性能。所以 CPU 就引入了寄存器，将一些两头数据寄存到寄存器中，晋升 CPU 的执行速度。

在编译方面，V8 团队同样做了很多优化，咱们来看下内联和逃逸剖析。

对于内联，咱们先来看一段代码：

function add(a, b) {return a + b}
function foo() {return add(2, 4)
}

如上代码所示，咱们在 foo 函数中调用了函数 add，add 函数接管 a，b 两个参数，返回他们的和。如果不通过编译器优化，则会别离生成这两个函数所对应的机器码。

为了晋升性能，TurboFan 优化编译器会将下面两个函数进行内联，而后再进行编译。内联后的函数如下所示：

function fooAddInlined() {
  var a = 2
  var b = 4
  var addReturnValue = a + b
  return addReturnValue
}

// 因为 fooAddInlined 中 a 和 b 的值都是确定的，所以能够进一步优化
function fooAddInlined() {return 6}

内联优化后，编译生成的机器码会精简很多，执行效率也有很大的晋升。

逃逸剖析也不难理解，它的意思就是 剖析对象的生命周期是否仅限于以后函数，咱们来看一段代码：

function add(a, b){const obj = { x: a, y: b}
  return obj.x + obj.y
}

如果对象只在函数外部定义，并且对象只作用于函数外部的话，就会被认为是“未逃逸”的，咱们能够将下面代码进行优化：

function add(a, b){
  const obj_x = a
  const obj_y = b
  return obj_x + obj_y
}

优化后，无需再有对象定义，而且咱们能够间接将变量加载到寄存器上，不再须要从内存中拜访对象属性。不仅缩小了内存耗费，而且晋升了执行效率。

对于逃逸剖析，Chrome 已经也爆出过安全漏洞，使整个互联网变慢，感兴趣请戳 V8 团队的一个谬误，使得整个互联网变慢

除了上述提到的各种优化计划和模块，V8 还有很多优化伎俩和外围模块，如：应用暗藏类疾速获取对象属性、应用内联缓存晋升函数执行效率、Orinoco 垃圾回收器、Liftoff WebAssembly 编译器等等，本文不再过多介绍，大家感兴趣能够自行学习。

本文从宏观视角看 V8、V8 架构演进史、V8 的工作机制以及 V8 外围模块的工作原理几个方面进行了介绍和总结，咱们能够发现，无论是 Chrome 还是 Node.js，它们只是一个桥梁，负责把咱们前端工程师编写的 JavaScript 代码运输到最终的目的地，转换成对应机器的机器码并执行。在这段旅程中，V8 团队做了很大的致力，给他们最大的 respect。

尽管 CPU 的指令集是无限的，然而咱们软件工程师编写的程序不是固定的，正是这些程序最终被 CPU 执行，才有了扭转世界的可能。

你们是最棒的，扭转世界的程序们！

食堂老板娘：童童，你是最胖的！^_^

V8 是如何执行 JavaScript 代码的？- 老蒋
图解 Google V8 - 李兵
许式伟的架构课
https://v8.dev/blog
❤️爱心三连击

1. 如果你感觉食堂酒菜还合胃口，就点个赞反对下吧，你的赞是我最大的能源。

2. 关注公众号 前端食堂 ， 吃好每一顿饭！

3. 点赞、评论、转发 === 催更！

关于v8:教女朋友学前端之深入理解JS引擎

宏观视角看 V8

星球最强 JavaScript 引擎

Programming Languages Software Award

支流 JS 引擎

V8 公布周期

V8 架构演进史

V8 工作机制

机器语言、汇编语言、高级语言

解释执行、编译执行

JIT (Just In Time)

V8 外围模块工作原理

解析器 Parser

词法剖析

语法分析

惰性解析

解释器 Ignition

编译器 TurboFan

内联 inlining

逃逸剖析 Escape Analysis

小结

站在伟人的肩膀上

❤️爱心三连击