浏览器的工作原理与v8引擎

**JavaScript是一门高级的编程语言。**那么有高级编程语言，就有低级编程语言，从编程语言发展历史来说，可以划分为三个阶段：

• 机器语言：1000100111011000，一些机器指令；
• 汇编语言：mov ax,bx，一些汇编指令；
• 高级语言：C、C++、Java、JavaScript、Python；

但是计算机它本身是不认识这些高级语言的，所以我们的代码最终还是需要被转换成机器指令：

浏览器的工作原理

那么javaScript代码在浏览器中是如何被执行的？

首先当我们输入一个url，这时候我们向服务器发送http请求，服务器收到请求，会把我们请求的数据返回给我们，这个时候我们就接受到了服务器返回给我们的html页面，浏览器会把相应的css文件和js文件下载下来，这个时候浏览器内核开始对html页面进行解析，解析什么？解析的过程是什么？

• 首先会对页面中的所有标签进行解析，会生成一颗DOM树，将标签转换成DOM树中的DOM节点，我们叫内容树。
• 接下来构建渲染树，会解析页面中的css样式文件，那么这些样式文件和对应的DOM节点就会形成渲染树，继续接下来的操作。
• 有了这些还不够，因为我们要知道相应的DOM节点在页面中的位置，因此我们要生成布局渲染树，浏览器会根据浏览器窗口的大小，计算每一个元素的大小，位置，给出在页面上的精确坐标。
• 接下来就是绘制渲染树，遍历渲染树，在页面上呈现。
• 正如下面这张图所示，一个url从请求到显示页面的过程。
• 但是我们还没有解析js文件，所以当我们解析html过程中如果遇到js文件，这个时候就会终止html页面的解析，去解析js文件来操作DOM，那么怎么解析javaScript代码？下面来介绍…

认识浏览器内核

我们经常会说：不同的浏览器有不同的内核组成

• 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）

或样版引擎。

认识JavaScript引擎

为什么需要JavaScript引擎呢？

我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的；

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

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

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

比较常见的JavaScript引擎有哪些呢？

SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；

Chakra：微软开发，用于IE浏览器；

JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；

V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；

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

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

**WebCore：**负责HTML解析、布局、渲染等等相关的工作；

**JavaScriptCore：**解析、执行JavaScript代码；

看到这里，学过小程序的同学有没有感觉非常的熟悉呢？

在小程序中编写的JavaScript代码就是被JSCore执行的；

另外一个强大的JavaScript引擎就是V8引擎。

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

v8引擎的原理

​ 首先浏览器把js代码下载下来，这时候v8引擎的Parse模块会对js代码进行词法解析和语法解析，词法解析会生成一个tokens(是一个数组，里面是一个个json对象)，接下来tokens会被转化成AST（抽象语法树），这个时候在经过v8引擎的Ignition模块，会把AST转化字节码，字节码在转话成汇编语言，最后转化成CPU能够识别的机器语言（0,1），之后就是代码的执行过程。

​ 之所以要转化成字节码，是因为在不同的执行环境中(Mac系统,windows系统)，CPU能够执行的机器语言是不同的，但是字节码能够跨平台使用。

V8引擎架构

V8引擎本身的源码非常复杂，大概有超过100w行C++代码，通过了解它的架构，我们可以知道它是如何对JavaScript执行的：

• Parse模块会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识JavaScript代码；如果函数没有被调用，那么是不会被转换成AST的；

  • Parse的V8官方文档：https://v8.dev/blog/scanner

• Ignition是一个解释器，会将AST转换成ByteCode（字节码），同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；如果函数只调用一次，Ignition会执行解释执行ByteCode；

  • Ignition的V8官方文档：https://v8.dev/blog/ignition-interpreter

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

  • TurboFan的V8官方文档：https://v8.dev/blog/turbofan-jit

v8引擎官方图

V8执行的细节

那么我们的JavaScript源码是如何被解析（Parse过程）的呢？

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

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

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

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

• 生成AST树后，会被Ignition转成字节码（bytecode），之后的过程就是代码的执行过程（后续会详细分析）

JavaScript的执行过程

假如我们有下面一段代码，它在JavaScript中是如何被执行的呢？

初始化全局对象

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

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

执行上下文栈（调用栈）

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

那么现在它要执行谁呢？执行的是全局的代码块：

全局的代码块为了执行会构建一个 Global Execution Context（GEC）– 全局执行栈

GEC会 被放入到ECS中 执行；

GEC被放入到ECS中里面包含两部分内容：

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

GEC被放入到ECS中

GEC开始执行代码

遇到函数如何执行？

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

FEC中包含三部分内容：

• 第一部分：在解析函数成为AST树结构时，会创建一个Activation Object（AO）：
  • AO中包含形参、arguments、函数定义和指向函数对象、定义的变量；
• 第二部分：作用域链：由VO（在函数中就是AO对象）和父级VO组成，查找时会一层层查找；
• 第三部分：this绑定的值：这个我们后续会详细解析；

FEC开始执行代码

AO对象）和父级VO组成，查找时会一层层查找；

• 第三部分：this绑定的值：这个我们后续会详细解析；

FEC被放入到ECS中

FEC开始执行代码