JS高级之V8引擎和代码执行原理

云牧code
359 阅读5分钟

1.浏览器工作原理

当我们输入域名址会由DNS解析成IP地址，然后到对应服务器请求index.html

解析当前index.html的时候遇见css、js、img等文件会继续前往服务器下载相关文件

2.浏览器的内核

chromeBlink
OperaBlink
IETrident
Safariwebkit
firefoxGecko

浏览器内核分或两部分:渲染引擎和JS引擎。

渲染染引擎：将代码转换成页面输出到浏览器界面。

JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和Js引擎并没有区分得很明确，后来JS引擎越来越独，内核就倾向于只指渲染引擎、也称为排版引擎（layout engine）、浏览器引擎（browser engine）、页面渲染引擎（rendering engine）。

3.浏览器渲染过程

image-20220206231636527

当我们HTML解析时遇见script标签会停止解析转而去通过JavaScript引擎加载执行JavaScript代码

4.JavaScript引擎

高级的编程语言都是需要转成最终的机器指令来执行的

所以上我们编写的JavaScript无论交给浏览器或者Node执行，最后都是需要被CPU执行的

但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行

所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行

最强大的JavaScript引擎当属Google开发的V8

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

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

  • WebCore：负责HTML解析、布局、渲染等等相关的工作
  • JavaScriptCore：解析、执行JavaScript代码

小程序编写的JavaScript代码实际也是被JSCore执行的

image-20220206233830495

6.V8引擎

V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等

V8可以独立运行，也可以嵌入到任何C ++应用程序中

底层解析过程

image-20220206234121678

架构

V8引擎本身的源码非常复杂，大概有超过100w行C++代码，我们可以学习其架构更好了解JS执行

Parse模块会将JavaScript代码转换成AST（抽象语法树）

  • 这是因为解释器并不直接认识JavaScript代码，如果函数没有被调用，那么是不会被转换成AST的，

Ignition解释器，会将AST转换成ByteCode（字节码）

  • 同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）
  • 如果函数只调用一次，Ignition会执行解释执行ByteCode

TurboFan编译器，可以将字节码编译为CPU可以直接执行的机器码

  • 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能
  • 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是 number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码

官方解析图

image-20220207001548721

Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换

Scanner会进行词法分析（lexical analysis），词法分析会将代码转换成tokens

接下来tokens会被转换成AST树，经过Parser和PreParser：

  • Parser就是直接将tokens转成AST树架构
  • PreParser则是预解析
    • 因为不是所有Javascript代码在一开始必须全部解析执行，这样会影响网页运行效率
    • 所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行
    • 比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析

生成AST树后，会被Ignition转成字节码（bytecode）匹配对应平台CPU指令进行代码执行

7.一段代码如何解析？

当js引擎会在执行代码之前，会在堆内存中创建一个全局对象：Global Object（GO）

  • 该对象 所有的作用域（scope）都可以访问
  • 里面会包含Date、Array、String、Number、setTimeout、setInterval等等
  • 其中还有一个window属性指向自己

js引擎内部有一个执行上下文栈（Execution Context Stack，简称ECS），它是用于执行代码的调用栈

当它执行全局代码块的时候会构建一个全局执行上下文 Global Execution Context（GEC）

GEC会 被放入到ECS中 执行，其中包含两部分内容

  • 第一部分：在代码执行前，在parser转成AST的过程中，会将全局定义的变量、函数等加入到GlobalObject中， 但是并不会赋值，此过程也叫变量的作用域提升（hoisting）
  • 第二部分：在代码执行中，对变量赋值，或者执行其他的函数

在执行的过程中执行到一个函数时，就会根据函数体创建一个函数执行上下文（Functional Execution Context， 简称FEC），并且压入到EC Stack中

FEC中包含三部分内容：

  • 第一部分：在解析函数成为AST树结构时，会创建一个Activation Object（AO）
    • AO中包含形参、arguments、函数定义和指向函数对象、定义的变量
  • 第二部分：作用域链：由VO（在函数中就是AO对象）和父级VO组成，查找时会一层层查找
  • 第三部分：根据不同情况this绑定值
avatar
文章
阅读
粉丝