浏览器原理-v8引擎-js执行原理

•  当拉取到js、css等资源后就通过浏览器内核来解析
• 浏览器内核指的是浏览器的排版引擎：排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样板引擎

浏览器渲染过程

在这个执行过程中，HTML解析的时候遇到了Javascript标签，

会停止解析HTML，而去加载和执行Javascript代码

        

Javascript代码由谁来执行：JavaScript引擎

为什么需要JavaScript引擎？

1. 高级的编辑语言都是需要转成最终的机器指令来执行的
2. 事实上编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的
3. 但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行
4. 所以我们需要Javascript引擎来帮助我们将JavaScript代码翻译成CPU指令来执行

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

      这里先以WebKit为例，WebKit事实上由两部分组成的：

1. WebCore：负责HTML解析、布局、渲染等等相关的工作
2. JavaScriptCore：解析、执行JavaScript代码
3. 在小程序中编写的JavaScript代码就是被JSCore执行的

        

 V8引擎的原理

• V8是用C++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.JS等。
• 它实现ECMAScript和WebAssembly，并在Windows7或更高版本，macOS10.12+和使用x64，IA-32，ARM或MIPS处理器的Linux系统上运行
• V8可以独立运行，也可以嵌入到任何C++应用程序中

1.  parse：词法分析、语法分析=>AST抽象语法树
2. 抽象语法树可以转为ES5或者字节码，通过Ignition实现，因为V8可能跑在不同的环境下，机器指令不一样，就先生成字节码
3. 再通过V8判断在什么平台上，就转为该平台所支持的汇编指令（因为字节码是跨平台的）
4. TurboFan，通过Ignition判断函数是不是经常执行（经常执行的就称为热函数），热函数就会生成机器指令，这样运行速度就提升了
5. 当一个函数执行的参数类型发生变化时，V8引擎就会将机器码重新转为字节码再放到平台上运行（如果使用TS就可以加快运行）

function sum (num1,num2) {
    num1 + num 2
}
sum(20,20)
sum(30,30)
sum('aaa','bbb') // 就会触发机器码转为字节码

  V8引擎的架构（TurboFan文档：https://v8.dev/blog/turbofan-jit）

 V8引擎的解析图（官方）

 V8执行的细节

JavaScript源码是如何被解析（parse过程）

• Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换
• Scanner会进行词法分析（Lexical analysis），词法分析会将代码转换为tokens
• 接下来tokens会被转换为AST树，经过Parse和PreParse：

1. Parse就是直接将tokens转成AST树架构；
2. PreParse称之为预解析，为什么需要预解析呢？
   1. 这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会影响网页的运行效率
   2. 所有V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行
   3. 比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析

•   生成AST树后，会被Ignition转为字节码（bytecode）,之后的过程就是代码的执行过程