小白了解浏览器V8

编译与解释

计算机只能识别二进制的机器语言，高级语言要想识别需要先翻译成机器语言，这种翻译有两种方式：

1. 编译：将代码一次性转换成目标代码的过程。执行编译过程的程序叫编译器（Compiler）。
2. 解释：将源代码逐条转换成目标代码，同时逐条运行的过程。执行解释过程的程序叫解释器（Interpreter）。

两种方式的大致过程类似：词法分析 -> 语法分析 -> 语义分析 -> 性能优化 -> 生成可执行文件。期间涉及到复杂的算法和硬件架构。

3.编译型语言（静态语言）：

• 使用编译器执行的语言，例如C、C++、java；
• 翻译过程：预处理 > 编译 > 汇编 > 可执行的二进制文件。
• 优点：一次编译，永久执行；无需源代码，只需要可执行的源文件；运行速度快。
• 缺点：不同系统可识别的二进制文件不同，跨平台兼容性差。

4.解释型语言（动态语言）：

• 使用解释器执行的语言，如Python、Javascript、PHP等。
• 翻译过程：解释器 > 翻译成与平台无关的中间代码；
• 优点：与平台无关，可以跨平台。
• 缺点：每次都需要解释执行；需要源文件按句执行；执行效率差。

V8引擎是什么

1. V8引擎是由C++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。
2. V8可以独立运行，也可以嵌入到任何C++应用程序中。
3. V8支持众多操作系统，如Windows、linux、android等，也支持其他硬件架构，如IA32,X64,ARM等，具有很好的可移植和跨平台特性。

V8引擎的应用

在浏览器中应用

先看一下浏览器的大致结构,此处以Chrome浏览器为例：

浏览器的内核是浏览器的一部分，例如：Webkit是苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；Blink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等。关于JavaScript引擎目前网上有两种说法，有说JavaScript引擎例如V8是包含在Blink里面的，Blink即浏览器内核;还有一种说浏览器内核是包含渲染引擎和JavaScript引擎的。此处我也搞不清楚，希望有有大神帮忙解答一下。

浏览器工作的大致流程：

在执行过程中，HTML解析的时候如果遇到了JavaScript标签，会停止解析HTML，而去加载和执行JavaScript代码，因为JavaScript代码会通过API操作DOM和样式，所以浏览器希望将HTML解析的DOM和JavaScript操作之后的DOM放到一起来生成最终的DOM树，而不是频繁的去生成新的DOM树。

在Node.js架构中应用

先看一下Node.js的大致架构图：

• 我们编写的JavaScript代码会经过V8引擎，再通过Node.js的Bindings，将任务放到Libuv的事件循环中；
• libuv（Unicorn Velociraptor—独角伶盗龙）是使用C语言编写的库；
• libuv提供了事件循环、文件系统读写、网络IO、线程池等等内容；

V8引擎如何运行

1.Parser解析器：由于解释器并不认识JavaScript代码，所以需要Parser先将JavaScript代码解析为AST抽象语法树；

2.Ignition解释器：

• • 将AST(抽象语法树)转换成ByteCode(字节码)；
  • 收集TurboFan(编译器)优化所需要的信息
  • • 比如函数参数类型信息，有了类型才能进行真实的运算；
    • 记录代码运行的次数等信息，如果一段代码执行了很多次，会被标记为“HotSpot”热点代码，然后把这段代码发送给 编译器TurboFan；

3.TurboFan编译器：

• • 将字节码编译为CPU可以直接执行的机器码并存储起来，等下次再执行到这段代码时，就会用现在的机器码替换原来的字节码执行，提高效率。
  • 当TurboFan判断一段代码不再为热点代码的时候（比如函数参数的类型发生了变化），会执行去优化的过程，把优化的机器码丢掉，然后执行过程回到字节码。

JIT 即时编译技术

V8引擎采用了解释执行和编译执行这两种方式，解释器在解释执行字节码时，会收集代码信息，标记热点代码（hotSpot）,热点代码(hotspot)就是一段代码被重复执行多次，TurboFan会将热点代码直接编译成机器码，缓存起来，下次调用直接运行对应的二进制的机器码，加速执行速度。这种字节码配合解释器和编译器的技术设计，称为JIT，即时编译技术。

参考文档

Google V8 引擎

浅析V8引擎，让你更懂JavaScript！

Node.js系列一 - JavaScript运行原理

浏览器渲染原理