[浏览器工作原理]--V8 工作原理

CRAB
1,601 阅读5分钟

编译器和解释器

按语言的执行流程，可以把语言划分为编译型语言和解释型语言。

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

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

  1. 在编译型语言的编译过程中，编译器首先会依次对源代码进行词法分析、语成抽象语法树（AST），然后是优化代码，最后再生成处理器能够理解的机器码。如果编译成功，将会生成一个可执行的文件。但如果编译过程发生了语法或者其他的错误，那么编译器就会抛出异常，最后的二进制文件也不会生成成功。

  2. 在解释型语言的解释过程中，同样解释器也会对源代码进行词法分析、语法分析，并生法分析，生成抽象语法树（AST），不过它会再基于抽象语法树生成字节码，最后再根据字节码来执行程序、输出结果。

V8 在执行过程中既有解释器 Ignition，又有编译器 TurboFan，那么它们是如何配合去执行一段 JavaScript 代码的呢?

1. 生成 AST 和执行上下文

什么是 AST 以及 AST 的生成过程是怎样的？

对于编译器或者解释器来说，它们可以理解的就是抽象语法树 AST 了。所以无论是解释型语言还是编译型语言，在编译过程中，它们都会生成一个抽象语法树AST，它可以看成代码的结构化的表示，编译器或者解释器后续的工作都需要依赖于 AST，所以需要将源代码转换为抽象语法树，并生成执行上下文

其实，抽象语法树 AST 可以看成代码的结构化的表示，编译器或者解释器后续的工作都需要依赖于 AST，所以需要将源代码转换为抽象语法树，并生成执行上下文，关于“执行上下文是如何生成的”在之前文章有提到，需要请查看[浏览器工作原理]--JavaScript的执行机制

AST有哪些应用

  • 代码转码器Babel 的工作原理就是先将 ES6 源码转换为 AST，然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST，最后利用 ES5 的 AST 生成 JavaScript 源代码
  • ESLint 是一个用来检查 JavaScript 编写规范的插件，其检测流程也是需要将源码转换为 AST，然后再利用 AST 来检查代码规范化的问题

AST 的生成过程

第一阶段是分词（tokenize），又称为词法分析，其作用是将一行行的源码拆解成一个个token。所谓token，指的是语法上不可能再分的、最小的单个字符或字符串

第二阶段是解析（parse），又称为语法分析，其作用是将上一步生成的 token 数据，根据语法规则转为 AST。如果源码符合语法规则，这一步就会顺利完成。但如果源码存在语法错误，这一步就会终止，并抛出一个“语法错误”。

这就是 AST 的生成过程，先分词，再解析

有了 AST 后，接下来 V8 就会生成该段代码的执行上下文

2. 生成字节码

有了AST 和执行上下文后，解释器会根据 AST 生成字节码，并解释执行字节码。

其实一开始 V8 是直接将 AST 转换为机器码，执行机器码的效率是非常高效的，但是随着Chrome 在手机上的广泛普及，内存占用问题也暴露出来了，因为 V8 需要消耗大量的内存来存放转换后的机器码。为了解决内存占用问题，V8 团队大幅重构了引擎架构，引入字节码，并且抛弃了之前的编译器

那什么是字节码呢？为什么引入字节码就能解决内存占用问题呢？

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

3. 执行代码

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

解释器 Ignition 会逐条解释执行字节码，当发现有热点代码（HotSpot），比如一段代码被重复执行多次，这种就称为热点代码，那么后台的编译器 TurboFan 就会把该段热点的字节码编译为高效的机器码，并把转换后的机器码保存起来，以备下次使用。当再次执行这段被优化的代码时，直接执行机器码就省去了字节码“翻译”为机器码的过程，提升了代码的执行效率。

JIT技术

其实字节码配合解释器和编译器是最近一段时间很火的技术，比如 Java 和 Python 的虚拟机也都是基于这种技术实现的，我们把这种技术称为即时编译（JIT）。对于 JavaScript 工作引擎，具体到V8就是指使用了“字节码 +JIT”技术

wps1-1599358801781.jpg

JavaScript 的性能优化

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

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

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

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

avatar
文章
阅读
粉丝