浏览器工作原理(14) - 编译器和解释器：V8是如何执行一段JavaScript代码的？

上一篇垃圾回收机制讲解了栈空间和堆空间分别是如何进行垃圾回收的，这篇我们继续将JavaScript是如何执行的 — 编译器和解释器

今天我们继续从JavaScript引擎V8的角度来分析JavaScript代码是如何被执行的

想要深入理解V8的运行机制和工作原理，我们有必要先了解一些概念， 例如： 编译器(compiler)、解释器(Interpreter)、抽象语法树(AST)、字节码(Bytecode)、即时编译器(JIT)

编译器和解释器

由于机器并不能直接识别我们的高级语言，必须将代码转换为机器能够识别的机器语言，按语言的执行流程，可以把语言分为 编译型语言和解释型语言

编译型语言在程序执行之前，需要经过编译器的编译过程，并且编译之后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译了 。比如 C/C++、GO 等都是编译型语言。

而由解释型语言编写的程序，在每次运行时都需要通过解释器对程序进行动态解释和执行。比如 Python、JavaScript 等都属于解释型语言

参考下面流程：

V8是怎么执行一段代码

整体流程如下：

从图中可以清楚地看到，V8 在执行过程中既有 解释器 Ignition，又有编译器 TurboFan

1、生成抽象语法书(AST)和执行上下文

高级语言是开发者可以理解的语言，但是让编译器或者解释器来理解就非常困难了。对于编译器或者解释器来说，它们可以理解的就是 AST 了。所以无论你使用的是解释型语言还是编译型语言，在编译过程中，它们都会生成一个 AST。

看下面代码：

var myName = "极客时间"
function foo(){
  return 23;
}
myName = "geektime"
foo()

这段代码经过处理后，生成的AST结构树如下：
AST 的结构和代码的结构非常相似，其实你也可以把 AST 看成代码的结构化的表示，编译器或者解释器后续的工作都需要依赖于 AST，而不是源代码。

Babel 的工作原理就是先将 ES6 源码转换为 AST，然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST，最后利用 ES5 的 AST 生成 JavaScript 源代码。

ESLint 是一个用来检查 JavaScript 编写规范的插件，其检测流程也是需要将源码转换为 AST，然后再利用 AST 来检查代码规范化的问题。

那么AST是如何生成的呢？

1-1、分词(Tokenize), 又称为词法分析

其作用是将一行行的源码拆解成一个个 token。所谓 token，指的是语法上不可能再分的、最小的单个字符或字符串。你可以参考下图来更好地理解什么 token。

1-2、第二阶段是解析（parse），又称为语法分析

其作用是将上一步生成的 token 数据，根据语法规则转为 AST。如果源码符合语法规则，这一步就会顺利完成。但如果源码存在语法错误，这一步就会终止，并抛出一个“语法错误

有了 AST 后，那接下来 V8 就会生成该段代码的执行上下文。至于执行上下文的具体内容参考之前的文章

2 生成字节码

有了 AST 和执行上下文后，那接下来的第二步，解释器 Ignition 就登场了，它会根据 AST 生成字节码，并解释执行字节码。

JavaScript引擎为什么将源码生成字节码而并不是机器码呢？为什么字节码会解决内存占用的问题呢？

字节码就是介于 AST 和机器码之间的一种代码。但是与特定类型的机器码无关，字节码需要通过解释器将其转换为机器码后才能执行。

理解了什么是字节码，我们再来对比下高级代码、字节码和机器码，你可以参考下图：
从图中可以看出，机器码所占用的空间远远超过了字节码，所以使用字节码可以减少系统的内存使用。

3. 执行代码

生成字节码之后，接下来就要进入执行阶段了。

解释器 Ignition 除了负责生成字节码之外，它还有另外一个作用，就是解释执行字节码。在 Ignition 执行字节码的过程中，如果发现有热点代码（HotSpot），比如一段代码被重复执行多次，这种就称为热点代码，那么后台的编译器 TurboFan 就会把该段热点的字节码编译为高效的机器码，然后当再次执行这段被优化的代码时，只需要执行编译后的机器码就可以了，这样就大大提升了代码的执行效率

字节码配合解释器和编译器是最近一段时间很火的技术，比如 Java 和 Python 的虚拟机也都是基于这种技术实现的，我们把这种技术称为即时编译（JIT）, 具体到 V8，就是指解释器 Ignition 在解释执行字节码的同时，收集代码信息，当它发现某一部分代码变热了之后，TurboFan 编译器便闪亮登场，把热点的字节码转换为机器码，并把转换后的机器码保存起来，以备下次使用。

这么多语言的工作引擎都使用了“字节码 +JIT”技术，因此理解 JIT 这套工作机制还是很有必要的。你可以结合下图看看 JIT 的工作过程：

JavaScript 的性能优化

在过去几年中，JavaScript 的性能得到了大幅提升，这得益于 V8 团队对解释器和编译器的不断改进和优化。

对于优化 JavaScript 执行效率，你应该将优化的中心聚焦在单次脚本的执行时间和脚本的网络下载上，主要关注以下三点内容：

1. 提升单次脚本的执行速度，避免 JavaScript 的长任务霸占主线程，这样可以使得页面快速响应交互；

2. 避免大的内联脚本，因为在解析 HTML 的过程中，解析和编译也会占用主线程；

3. 减少 JavaScript 文件的容量，因为更小的文件会提升下载速度，并且占用更低的内存