D9 - 酸 V 啊酸 V8 引擎

前言

前一天提到 v8，那就再深入一点点儿讨论 V8 是什麽 以及 它 怎麽翻译 JavaScript 给电脑？

注意：本篇含有大量的专有名词，会同步以中英文呈现，但阅读时建议以英文为主，毕竟中文翻译百花齐放，英文比较不会有争议

V8 小简介

• V8 是 google 开发的一支 JavaScript 开源引擎，以 C++ 语言写成

• 应用在 Chrome 及 Node.js 上。

• V8 实现了 ECMAScript 和 WebAssembly，可跑在 Windows 7 以上的版本、macOS 10.12+ 和使用 x64、IA-32 或 ARM 处理器的 Linux 系统上。

• V8 一开始被设计来提升 JavaScript 在浏览器上的执行速度，透过 JIT 技术更快速的将 JavaScript 翻译为电脑能理解的代码。

• 附上 V8 的介绍网站

V8 引擎的翻译步骤

接下来看看 V8 是怎麽进行翻译的步骤，从一张图解释起
取自 Understanding V8’s Bytecode

当 V8 引擎要翻译 JavaScript 时

第一步：先透过自己的 解析器 Parser ，将一行行的语法拆解成个别的 小单位 token

如 let cookie = 'Oreo' 会拆解成 let、cookie、=、'Oreo'

这些小单位构成了一颗树，称为 语法树 Abstract Syntax Tree，这颗树呈现出 JavsScript 程序码间的语法结构

第二步：解释器 Ignition ，V8 的直译器，透过内部的 bytecode 格式从这颗语法树中产生出 bytecode

第三步：涡轮扇 TurboFan ，V8 的最新优化编译器，将这些 bytecode 转换为电脑能阅读的 机器代码 Machined Code

程序码的转换过程会像这样，左边是要翻译 JavaScript，先转换成 bytecode 後，最後再输出电脑能阅读的 Machine Code

印出 V8 产出的 bytecode

有没有想过 bytecode 到底长怎样，神奇的杰克，在 node 环境中竟然可以印出 bytecode！ 这里教你 3 招：

1. node --print-bytecode <档案名称>

直接在 command line 输入这段语法，当你实际输入後，会咻咻咻印出落落长一段，这是因为除了自己档案中的程序码外，其他内建的语法也会被印出来

请留意，node 环境须至少在版本 8.3 以上才支援

以一段程序码做示范

//档案 test.js
let cookie = 'Oreo';
countCookie();
function countCookie() {
  let cookie = 'Ritz';
  console.log(cookie); //'Ritz'
}

//terminal 输入 
Desktop % node --print-bytecode test.js

印出的 bytecode 像这样

2. node --print-bytecode --print-bytecode-filter= <想印出的函式名称> <档案名称>

如果只想看部分内容，可以在刚刚那段语法中加上 filter=function 便可只印出你要的特定 function bytecode 结果

// terminal 输入
Desktop % node --print-bytecode --print-bytecode-filter=countCookie test.js

只呈现 countCookie 的 bytecode 结果

3. node --print-bytecode --print-bytecode-filter= <想印出的函式名称> <档案名称> > <存入档案.txt>

最後最後，如果觉得在 terminal 中很难阅读的话，可以用 > 档案.txt 将 bytecode 结果存入一支 txt 档中唷

// terminal 输入
Desktop % node --print-bytecode --print-bytecode-filter=countCookie test.js > result.js

结语

其实 V8 引擎内部的运作还有很多细节，像是 Inlining、Inline caching、Garbage collection...
但内化成自己的知识还要点时间，毕竟写成文章是能用自己的语言输出，还是先分享自己有把握的知识点，我需要一台 JIT

进入未知的领域总是揣揣不安，但踏出的每一步都是勇敢的证明，当回头看看踩下的每步脚印，你会更有勇气向前进 - 共勉之。

Reference

Understanding V8’s Bytecode
How to get javascript bytecode from V8 and others in 2019
How V8 compiles JavaScript code ?
Understanding JavaScript’s Engine with Cartoons
How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code