暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / 浏览器的工作原理与v8引擎

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

原创 瘦七斤改名字 2022-04-24
513

每次学习后，没多久就忘了，所以这次自己记录一下…

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

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

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

浏览器的工作原理

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

image.png

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

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

image.png

认识浏览器的内核

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

  • 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引擎的原理

image.png

首先浏览器把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引擎的解析图

image.png

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中是如何被执行的呢？

const name = "fuyou"
console.log(name)

function foo() {
  console.log("foo")
}

foo()

function outer() {
  function inner() {
    var inner = "inner"
    console.log(inner)
  }
}

outer()

打印结果：

image.png

初始化全局对象

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

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

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

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

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

GEC会 被放入到ECS中 执行；

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

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

全局代码执行过程

  • 1.代码被解析, v8引擎内部会帮助我们创建一个对象(GlobalObject -> go)
  • 2.运行代码
    • 2.1. v8为了执行代码, v8引擎内部会有一个执行上下文栈(Execution Context Stack, ECStack)(函数调用栈)
    • 2.2. 因为我们执行的是全局代码, 为了全局代码能够正常的执行, 需要创建 全局执行上下文(Global Execution Context)(全局代码需要被执行时才会创建)

1、仅变量的赋值无函数时

GEC被放入到ECS中

var name = "fuyou"

console.log(num1)

var num1 = 20
var num2 = 30
var result = num1 + num2

console.log(result)

var globalObject = {
  String: "类",
  Date: "类",
  setTimeount: "函数",
  window: globalObject,
  name: undefined,
  num1: undefined,
  num2: undefined,
  result: undefined
}

image.png

2、遇到函数如何执行

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

FEC中包含三部分内容：

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

foo(123)
function foo(num) {
  console.log(m)
  var m = 10
  var n = 20

  console.log(name)
}

console.log(aaaaaaa)

var globalObject = {
  String: "类",
  Date: "类",
  setTimeount: "函数",
  window: globalObject,
  name: undefined,
  num1: undefined,
  num2: undefined,
  result: undefined
}

console.log(window.window.window.window)

var GlobalObject = {
  String: "类",
  window: GlobalObject,
  name: undefined,
  foo: 
}

FEC被放入到ECS中

image.png

3、嵌套函数

foo(123)
function foo(num) {
  console.log(m)
  var m = 10
  var n = 20

  function bar() {
    console.log(name)
  }

  bar()
}


// console.log(window)

var globalObject = {
  String: "类",
  Date: "类",
  setTimeount: "函数",
  window: globalObject,
  name: undefined,
  num1: undefined,
  num2: undefined,
  result: undefined
}

console.log(window.window.window.window)

var GlobalObject = {
  String: "类",
  window: GlobalObject,
  name: undefined,
  foo: 
}

image.png

4、函数调用函数

var message = "Hello Global"

function foo() {
  console.log(message)
}

function bar() {
  var message = "Hello Bar"
  foo()
}

bar()

image.png

变量环境和记录

其实我们上面写的都是基于早期ECMA的版本规范：

image.png

在最新的ECMA的版本规范中，对于一些词汇进行了修改：

image.png

通过上面的变化我们可以知道，在最新的ECMA标准中，我们前面的变量对象VO已经有另外一个称呼了变量环境VE

作用域提升面试题

var n = 100

function foo() {
  n = 200
}

foo()

console.log(n)

打印结果是200

function foo() {
  console.log(n)
  var n = 200
  console.log(n)
}

var n = 100
foo()

打印结果是undefined和200

var a = 100

function foo() {
  console.log(a)
  return
  var a = 200
}

foo()

打印结果是undefined

function foo() {
  m = 100
}

foo()
console.log(m)

打印结果是100

function foo() {
  var a = b = 10
  // => 转成下面的两行代码
  // var a = 10
  // b = 10
}

foo()

console.log(a)
console.log(b)

打印结果是100和10

前端
「喜欢这篇文章，您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容，转载时必须标注文章的来源（墨天轮），文章链接，文章作者等基本信息，否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容，欢迎发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论