浏览器执行原理-V8引擎

浏览器内核

不同浏览器的内核组成

• Gecko:早起被Netscape和Mozilla Firefox浏览器使用

• Trident:微软开发，被IE4-IE11浏览器器使用，但在Edge已经转向Blink

• Webkit:苹果基于KHTML开发、开源的，用于Safari,Google Chrome之前也在使用

• Blink:是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等

其他叫法

• 排版引擎（layout engine）

• 浏览器引擎（browser engine）

• 页面渲染引擎（rendering engine）

• 排版引擎

浏览器渲染过程

流程图

• 问题1：执行过程中，HTML解析的时候遇到了JavaScript标签，怎么办？

  • 停止解析HTML，加载和执行JavaScript

• 问题2：js代码由谁执行？

  • JavaScript引擎

认识JavaScript

浏览器内核和JS引擎的关系

V8引擎的原理

1. Parse过程

   • Parse模块：会将JavaScript代码转换成AST,这是因为解释器并不认识JavaScript代码

     • 如果函数没有被调用，那么不会被转换成AST的

     • Parse的V8官方文档

   • 通过对JavaScript源代码的进行词法分析、语法分析，生成抽象语法树

   • 抽象语法树

     • 理解：中转站

     • 举例

       1、在bable将TypeScript转换为JavaScript过程中

       ts => AST => (调整)新的AST => generate code(编译) => js代码

       2、vue

       template => AST => createVNode

     • ast可视化网站

       左侧选择JavaScript右侧生成便是对应的抽象语法树

2. Ignition过程（指向字节码）

   • Ignition：是一个解释器，会将AST转换成ByteCode(字节码)

     • 同时收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）

     • 如果函数只调用一次，Ignition会执行ByteCode

     • Igintion官方文档

   • 问题来了：为什们不将AST 直接转化为CPU可以直接识别的机器码？

     首先js代码运行的平台不固定，而不同的平台其CPU架构并非统一，对应执行的机器指令不统一，字节码的定义是跨平台的，所以当在不同的平台运行的时候，V8引擎将字节码转化为对应的机器指令，相比于将AST直接转化为机器指令，其效率更高。

     同时在字节码转换为机器码的过程中回经过一层汇编语言执行对应CPU的指令，从而得到最终的机器码

3. TruboFan过程

   • TruboFan是一个编译器，可以将字节码编译为CPU可直接执行的机器码

     如果一个函数被多次调用，那么会被标记为热点函数和，经过TruboFan转换成优化的机器码，提高执行性能

   • 背景：

     字节码在进行转换为机器码的过程中同样需要花费时间，考虑能否将AST直接转换为机器码，同时对于一些仅仅执行一次的函数考虑其分配内存为题，即执行结束释放内存，基于此V8引擎中添加TruboFan过程

4. Deoptimization过程

   • 背景：

     机器码实际上也应该能被还原为字节码，因为如果后续执行函数的过程中，类型发生了变化（比如num函数原来执行的是number类型，后来执行变成了string类型）,之前优化的机器码并不能 正确处理运算，需要逆向转换成字节码

   • 特点

     通过这个反向操作的过程一定程度的降低了效率

   • 问题来了：如何避免这个过程

     函数传参的过程中尽量控制参数的数据类型，会在V8引擎底层转化的过程中效率得到提高，即性能更好

   • 结论

     TypeScript相对于原生的JavaScript，其参数类型的判断V8引擎的执行更加友好，在一定会程度上运行效率会高一些