4
头图

image.png

  1. 什么是V8?
  2. V8整体执行流程
  3. V8流程细节分析

什么是V8?

V8 是 Google 的开源高性能 JavaScript 和 WebAssembly 引擎,用 C++ 编写。它用于 Chrome 和 Node.js 等。它实现了ECMAScriptWebAssembly,并在 Windows 7 或更高版本、macOS 10.12+ 以及使用 x64、IA-32、ARM 或 MIPS 处理器的 Linux 系统上运行。V8 可以独立运行,也可以嵌入到任何 C++ 应用程序中。

V8整体执行流程

image.png

名词解释:

  1. source code: Javascript
  2. Parser 处理为AST的Parser(解析器)
  3. AST 抽象语法树
  4. Ignition 解释器 将AST转换为byteCode
  5. Sparkplug 无优化编译器 可以理解为将byteCode预编译(非常的快速)
  6. byteCode execute 字节码 可以理解为跨平台的一种编码(非平台机器码)
  7. Turbofan 优化编译器 对于byteCode进行编译并对于代码进行优化
  8. Machine Code 机器码 各平台执行的代码

V8 流程细节分析

Source Code

就是指Javascript源代码 至于你开发中使用的是TypeScript,在进入浏览器之前也是需要编译成Js的 可以理解为V8只识别JS。
下边拿一个函数进行分析:
function add(x,y){   // <- top level code  解析环节。
    return x + y;    // <- non top level
}

parser

parser部分,了解过编译的同学都知道有词法分析,语法分析...

image.png

image.png

AST

AST是指源代码的抽象语法结构的树状表现形式.
image.png

Ignition ==> byteCode

Parser过后就是生成字节码 这个是V8内部的类BytecodeGenerator进行生成的。
image.png

Turbofan

image.png
Turbofan是根据字节码和热点函数反馈类型生成优化后的机器码,Turbofan很多优化过程,基本和编译原理的后端优化差不多,采用的sea-of-node。

Sparkplug

Sparkplug 旨在快速编译。 非常快。 速度如此之快,几乎可以随时编译,所以能够比 TurboFan 代码更积极地对 Sparkplug 代码进行分层。
image.png
  1. Sparkplug所编译的是byteCode
  2. Sparkplug编译不做优化
  3. Sparkplug只需要与解析器Ignition行为镜像 不需要某种状态的映射
  4. ...

最后

俩件事:

  1. 可视化相关的架构设计,源码学习,日常开发。我会逐步进行深入分享。如果对你有帮助请关注我后续的内容。有需要的同学可以加一下我的联系方式(在我的主页,拉你进群聊)。
  2. javascript相关内容进阶联系我主页微信,嗯就这样。 bye~

    哦对, 还有一件事 祝各位女神,女神节快乐。 BYE~

wlove
6.9k 声望1.8k 粉丝

wx:wywin2023