深刻V8引擎之代码执行机制

前言

前端工具和框架的自身更新速度很是块，并且还不断有新的出现。要想追遇上前端工具和框架的更新速度，你就须要抓住那些本质的知识，而后才能更加轻松地理解这些上层应用。好比咱们接下来要介绍的 V8 执行机制，能帮助你从底层了解 JavaScript，也能帮助你深刻理解语言转换器 Babel、语法检查工具 ESLint、前端框架 Vue 和 React 的一些底层实现机制。要深刻理解 V8 的工做原理，你须要搞清楚一些概念和原理，好比接下来咱们要详细讲解的「编译器（Compiler）、解释器（Interpreter）、抽象语法树（AST）、字节码（Bytecode）、即时编译器（JIT）等」概念。前端

编译器和解释器

之因此存在编译器和解释器，是由于机器不能直接理解咱们所写的代码，因此在执行程序以前，须要将咱们所写的代码“翻译”成机器能读懂的机器语言。按语言的执行流程，能够把语言划分为编译型语言和解释型语言。浏览器

编译型语言在程序执行以前，须要通过编译器的编译过程，而且编译以后会直接保留机器能读懂的二进制文件，这样每次运行程序时，均可以直接运行该二进制文件，而不须要再次从新编译了。
而由解释型语言编写的程序，在每次运行时都须要经过解释器对程序进行动态解释和执行。

具体流程你能够参考下图：缓存

从图中你能够看出这两者的执行流程，大体可阐述为以下：性能优化

在编译型语言的编译过程当中，编译器首先会依次对源代码进行词法分析、语法分析，生成抽象语法树（AST），而后是优化代码，最后再生成处理器可以理解的机器码。若是编译成功，将会生成一个可执行的文件。但若是编译过程发生了语法或者其余的错误，那么编译器就会抛出异常，最后的二进制文件也不会生成成功。
在解释型语言的解释过程当中，一样解释器也会对源代码进行词法分析、语法分析，并生成抽象语法树（AST），不过它会再基于抽象语法树生成字节码，最后再根据字节码来执行程序、输出结果。

V8 执行 JS 代码流程

了解了编译器和解释器，接下来咱们分析 V8是如何执行一段代码的，流程以下：前端框架

V8 在执行过程当中既有解释器 Ignition，又有编译器 TurboFan，具体流程：markdown

生成抽象语法树（AST）

高级语言是开发者能够理解的语言，可是让编译器或者解释器来理解就很是困难了。对于编译器或者解释器来讲，它们能够理解的就是 AST 了。因此不管你使用的是解释型语言仍是编译型语言，在编译过程当中，它们都会生成一个 AST。这和渲染引擎将 HTML 格式文件转换为计算机能够理解的 DOM 树的状况相似。网络

生成 AST 须要通过两个阶段:架构

「第一阶段是分词（tokenize），又称为词法分析」，其做用是将一行行的源码拆解成一个个 token。所谓 token，指的是语法上不可能再分的、最小的单个字符或字符串。
「第二阶段是解析（parse），又称为语法分析，其做用是将上一步生成的 token 数据」，根据语法规则转为 AST。若是源码符合语法规则，这一步就会顺利完成。但若是源码存在语法错误，这一步就会终止，并抛出一个“语法错误”。

这就是 AST 的生成过程，先分词，再解析。有了 AST 后，那接下来 V8 就会生成该段代码的执行上下文。框架

生成字节码

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

「字节码就是介于 AST 和机器码之间的一种代码。可是与特定类型的机器码无关，字节码须要经过解释器将其转换为机器码后才能执行。」 机器码所占用的空间远远超过了字节码，因此使用字节码能够减小系统的内存使用。

执行代码

一般，若是有一段第一次执行的字节码，解释器 Ignition 会逐条解释执行。到了这里，相信你已经发现了，解释器 Ignition 除了负责生成字节码以外，它还有另一个做用，就是解释执行字节码。在 Ignition 执行字节码的过程当中，若是发现有热点代码（HotSpot），好比一段代码被重复执行屡次，这种就称为「热点代码」，那么后台的编译器 TurboFan 就会把该段热点的字节码编译为高效的机器码，而后当再次执行这段被优化的代码时，只须要执行编译后的机器码就能够了，这样就大大提高了代码的执行效率。

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

JavaScript 的性能优化

虽然在 V8 诞生之初，也出现过一系列针对 V8 而专门优化 JavaScript 性能的方案，好比隐藏类、内联缓存等概念都是那时候提出来的。不过随着 V8 的架构调整，你愈来愈不须要这些微优化策略了，相反，对于优化 JavaScript 执行效率，你应该将优化的中心聚焦在单次脚本的执行时间和脚本的网络下载上，主要关注如下三点内容：

提高单次脚本的执行速度，避免 JavaScript 的长任务霸占主线程，这样可使得页面快速响应交互；
避免大的内联脚本，由于在解析 HTML 的过程当中，解析和编译也会占用主线程；
减小 JavaScript 文件的容量，由于更小的文件会提高下载速度，而且占用更低的内存。

参考文章

浏览器工做原理与实践

本文使用 mdnice 排版