作为一个前端程序员，每天下班的第一件事就是关上电脑，情不自禁的点开chrome浏览器，或是摸会儿鱼或是立马进入工作状态。接下来浏览器窗口就会陪伴着你度过一天的时光，失常到七八点钟，晚点就九十点钟，再晚点就陪你跨过一天，时刻关注着你的工作。作为一个虔诚陪伴你的搭档，你扪心自问，你有认真的理解过它是如何工作的吗？你有走进过它的内心世界吗？

如果你也好奇过，那么请收看这期的《走进chrome心田，理解V8引擎是如何工作的》。

V8是什么

在深刻理解一件事物之前，首先要晓得它是什么。

V8是一个由Google开源的采纳C++编写的高性能JavaScript和WebAssembly引擎，利用在 Chrome和Node.js等中。它实现了ECMAScript和WebAssembly，运行在Windows 7及以上、macOS 10.12+以及应用x64、IA-32、ARM或MIPS处理器的Linux零碎上。 V8能够独立运行，也能够嵌入到任何C++应用程序中。

V8由来

接下来咱们来关怀关怀它如何诞生的，以及为什么叫这个名字。

V8最后是由Lars Bak团队开发的，以汽车的V8发动机（有八个气缸的V型发动机）进行命名，预示着这将是一款性能极高的JavaScript引擎，在2008年9月2号同chrome一起开源公布。

为什么须要V8

咱们写的JavaScript代码最终是要在机器中被执行的，但机器无奈间接辨认这些高级语言。须要通过一系列的解决，将高级语言转换成机器能够辨认的的指令，也就是二进制码，交给机器执行。这两头的转换过程就是V8的具体工作。

接下来咱们就来具体的理解一下。

V8组成

首先来看一下V8的外部组成。V8的外部有很多模块，其中最重要的4个如下：

  • Parser: 解析器，负责将源代码解析成AST
  • Ignition: 解释器，负责将AST转换成字节码并执行，同时会标记热点代码
  • TurboFan: 编译器，负责将热点代码编译成机器码并执行
  • Orinoco: 垃圾回收器，负责进行内存空间回收

V8工作流程

以下是V8中几个重要模块的具体工作流程图。咱们一一剖析。

Parser解析器

Parser解析器负责将源代码转换成形象语法树AST。在转换过程中有两个重要的阶段：词法剖析（Lexical Analysis）和语法分析（Syntax Analysis）。

词法剖析

也称为分词，是将字符串模式的代码转换为标记（token）序列的过程。这里的token是一个字符串，是形成源代码的最小单位，相似于英语中单词。词法剖析也能够了解成将英文字母组合成单词的过程。词法剖析过程中不会关怀单词之间的关系。比方：词法剖析过程中可能将括号标记成token，但并不会校验括号是否匹配。

JavaScript中的token次要蕴含以下几种：

关键字：var、let、const等

标识符：没有被引号括起来的间断字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量

运算符： +、-、 *、/ 等

数字：像十六进制，十进制，八进制以及迷信表达式等

字符串：变量的值等

空格：间断的空格，换行，缩进等

正文：行正文或块正文都是一个不可拆分的最小语法单元

标点：大括号、小括号、分号、冒号等

以下是const a = 'hello world'通过esprima词法剖析后生成的tokens。

[    {        "type": "Keyword",        "value": "const"    },    {        "type": "Identifier",        "value": "a"    },    {        "type": "Punctuator",        "value": "="    },    {        "type": "String",        "value": "'hello world'"    }]
语法分析

语法分心是将词法剖析产生的token依照某种给定的模式文法转换成AST的过程。也就是把单词组合成句子的过程。在转换过程中会验证语法，语法如果有错的话，会抛出语法错误。

上述const a = 'hello world'通过语法分析后生成的AST如下：

{  "type": "Program",  "body": [    {      "type": "VariableDeclaration",      "declarations": [        {          "type": "VariableDeclarator",          "id": {            "type": "Identifier",            "name": "a"          },          "init": {            "type": "Literal",            "value": "hello world",            "raw": "'hello world'"          }        }      ],      "kind": "const"    }  ],  "sourceType": "script"}

通过Parser解析器生成的AST将交由Ignition解释器进行解决。

Ignition解释器

Ignition解释器负责将AST转换成字节码（Bytecode）并执行。字节码是介于AST和机器码之间的一种代码，与特定类型的机器代码无关，须要通过解释器转换成机器码才能够执行。

看到这里想必大家都有纳闷，既然字节码也须要转换成机器码能力运行，那一开始为什么不间接将AST转换成机器码间接运行呢？转换成机器码间接运行速度必定更快，那为什么还要加一个两头过程呢？

其实在V8的5.9版本之前是没有字节码的，而是间接将JS代码编译成机器码并将机器码存储到内存中，这样就占用了大量的内存，而晚期的手机内存都不高，适度的占用会导致手机性能大大的降落；而且间接编译成机器码导致编译工夫长，启动速度慢；再者间接将JS代码转换成机器码须要针对不同的CPU架构编写不同的指令集，复杂度很高。

5.9版本当前引入了字节码，能够解决上述内存占用大、启动工夫长、代码复杂度高这几个问题。

接下来咱们来看看Ignition是如何将AST转换成字节码的。

下图是Ignition解释器的工作流程图。AST须要先通过字节码生成器，再通过一系列的优化之后能力生成字节码。

其中的优化包含：

  • Register Optimizer：次要是防止寄存器不必要的加载和存储
  • Peephole Optimizer：寻找字节码中能够复用的局部，并进行合并
  • Dead-code Elimination： 删除无用的代码，缩小字节码的大小

将代码转换成字节码后就能够通过解释器执行了。Ignition在执行的过程中，会监督代码的执行状况并记录执行信息，如函数的执行次数、每次执行函数时所传的参数等。

当同一段代码被执行屡次，就会被标记成热点代码。热点代码会交给TurboFan编译器进行解决。

TurboFan编译器

TurboFan拿到Ignition标记的热点代码后，会先进行优化解决，而后将优化后字节码编译成更高效的机器码存储起来。下次再次执行雷同代码时，会间接执行相应的机器码，这样就在很大水平上晋升了代码的执行效率。

当一段代码不再是热点代码后，TurboFan会进行去优化的过程，将优化编译后的机器码还原成字节码，将代码的执行权力交还给Ignition。

当初咱们来看一看具体的执行过程。

以sum += arr[i]为例，因为JS是动静类型的语言，每次的sum和arr[i]都有可能是不同的类型，在执行这段代码时，Ignition每次都会查看sum和arr[i]的数据类型。当发现同样的代码被执行了屡次时，就将其标记为热点代码，交给TurboFan。

TurboFan在执行时，如果每次都判断sum和arr[i]的数据类型是很浪费时间的。因而在优化时，会依据之前的几次执行确定sum和arr[i]的数据类型，将其编译成机器码。下次再执行时，省去了判断数据类型的过程。

但如果在后续的执行过程中，arr[i]的数据类型产生了扭转，之前生成的机器码就不满足要求了，TurboFan会把之前生成的机器码抛弃，将执行权力再交给Ignition，实现去优化的过程。

热点代码：

优化前：

优化后：

总结

当初咱们来总结一下V8的执行过程：

  1. 源代码通过Parser解析器，通过词法剖析和语法分析生成AST
  2. AST通过Ignition解释器生成字节码并执行
  3. 在执行过程中，如果发现热点代码，将热点代码交给TurboFan编译器生成机器码并执行
  4. 如果热点代码不再满足要求，进行去优化解决

这种字节码与解释器和编译器联合的技术，就是咱们通常所说的即时编译(JIT)。

本文并没有介绍垃圾回收器Orinoco，V8的垃圾回收机制能够独自用一篇文章来具体介绍，咱们下期再见。

参考文章

  1. V8官网文档
  2. Celebrating 10 years of V8
  3. V8是如何执行JavaScript代码的？
  4. Ignition: An Interpreter for V8
  5. 即时编译