《图解 Google V8》

[astak16]

第一篇

这是《图解 Google V8》第一篇/共三篇：设计思想篇

这个专栏的优点是：写的通俗易懂，没有涉及 V8 源码部分，对于前端还是比较友好的，学完之后能够知道写下一段 js 代码后，V8 背后都做了哪些事情

这个专栏的不足之处是：没有对技术进行深入讲解，只讲了这个技术是用来解决什么问题的，以及它是怎么工作的

所以这个专栏比较时候对 V8 还不了解的同学去学习，增加自己的知识面

下面是我自己学习每一章的总结，主要记录我在这章中学到内容，并不是对这章完整的总结

我会分为三篇来写，这是第一篇：设计思想篇

如何学习谷歌高性能 JavaScript 引擎 V8？

V8 主要涉及三个技术：编译流水线、事件循环系统、垃圾回收机制

1. V8 执行 JavaScript 完整流程称为：编译流水线
   
   编译流水线涉及到的技术有：
   • JIT
     • V8 混合编译执行和解释执行
   • 惰性解析
     • 加快代码启动速度
   • 隐藏类(Hide Class)
     • 将动态类型转为静态类型，消除动态类型执行速度慢的问题
   • 内联缓存
2. 事件循环系统
   • JavaScript 中的难点：异步编程
   • 调度排队任务，让 JavaScript 有序的执行
3. 垃圾回收机制
   • 内存分配
   • 内存回收

01 | V8 是如何执行一段 JavaScript 代码的？

1. 准备基础环境：
   • 全局执行上下文：全局作用、全局变量、内置函数
   • 初始化内存中的堆和栈结构
   • 初始化消息循环系统：消息驱动器和消息队列
2. 结构化 JavaScript 源代码
   • 生成抽象语法树（AST）
   • 生成相关作用域
3. 生成字节码：字节码是介于 AST 和机器码的中间代码
   • 解释器可以直接执行
   • 编译器需要将其编译为二进制的机器码再执行
4. 解释器和监控机器人
   • 解释器：按照顺序执行字节码，并输出执行结果
   • 监控机器人：如果发现某段代码被重复多次执行，将其标记为热点代码
5. 优化热点代码
   • 优化编译器将热点代码编译为机器码
   • 对编译后的机器码进行优化
   • 再次执行到这段代码时，将优先执行优化后的代码
6. 反优化
   • JavaScript 对象在运行时可能会被改变，这段优化后的热点代码就失效了
   • 进行反优化操作，给到解释器解释执行

02 | 函数即对象：一篇文章彻底搞懂 JavaScript 的函数特点

V8 内部为函数对象添加了两个隐藏属性：name，code：

• name 为函数名
  • 如果是匿名函数，name 为 anonymous
• code 为函数代码，以字符串的形式存储在内存中

当执行到一个函数调用语句时，V8 从函数对象中取出 code 属性值，然后解释执行这段函数代码

什么是闭包：将外部变量和函数绑定起来的技术

参考资料：

1. The story of a V8 performance cliff in React

03 | 快属性和慢属性：V8 是怎样提升对象属性访问速度的？

V8 在实现对象存储时，没有完全采用字典的存储方式，因为字典是非线性的数据结构，查询效率会低于线性的数据结构

常规属性和索引属性

• 索引属性（elements）：数字属性按照索引值的大小升序排列
• 常规属性（properties）：字符串根据创建时的顺序升序排列

它们都是线性数据结构，分别为 elements 对象和 properties 对象

执行一次查询：先从 elements 对象中按照顺序读出所有元素，然后再从 properties 对象中读取所有的元素

快属性和慢属性

在访问一个属性时，比如：foo.a，V8 先查找出 properties，然后在从 properties 中查找出 a 属性

V8 为了简化这一步操作，把部分 properties 存储到对象本身，默认是 10 个，这个被称为对象内属性

线性数据结构通常被称为快属性

线性数据结构进行大量数据的添加和删除，执行效率是非常低的，所以 V8 会采用慢属性策略

慢属性的对象内部有独立的非线性数据结构（字典）

参考资料：

1. V8 是怎么跑起来的 —— V8 中的对象表示
2. Fast properties in V8

04 | 函数表达式：涉及大量概念，函数表达式到底该怎么学？

变量提升

在 js 中有函数声明的方式有两种：

• 函数声明

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

• 函数表达式

  var foo = function () {
    console.log("foo");
  };

在编译阶段 V8 解析到函数声明和函数表达式（变量声明）时：

• 函数声明，将其转换为内存中的函数对象，并放到作用域中
• 变量声明，将其值设置为 undefined，并当道作用域中

因为在编译阶段，是不会执行表达式的，只会分析变量的定义、函数的声明

所以如果在声明前调用 foo 函数：

• 使用函数声明不会报错
• 使用函数表达式会报错

在编译阶段将所有的变量提升到作用域的过程称为变量提升

立即执行函数

js 的圆括号 () 可以在中间放一个表达式

中间如果是一个函数声明，V8 就会把 (function(){}) 看成是函数表达式，执行它会返回一个函数对象

如果在函数表达式后面加上()，就被称为立即调用函数表达式

因为函数立即表达式也是表达式，所以不会创建函数对象，就不会污染环境

05 ｜原型链：V8 是如何实现对象继承的？

• 作用域链是沿着函数的作用域一级一级来查找变量的
• 原型链是沿着对象的原型一级一级来查找属性的

js 中实现继承，是将 __proto__ 指向对象，但是不推荐使用，主要原因是：

• 这是隐藏属性，不是标准定义的
• 使用该属性会造成严重的性能问题

继承

1. 用构造函数实现继承：

   function DogFactory(color) {
     this.color = color;
   }
   DogFactory.prototype.type = "dog";
   const dog = new DogFactory("Black");
   dog.hasOwnProperty("type"); // false

2. ES6 之后可以通过 Object.create 实现继承

   const animalType = { type: "dog" };
   const dog = Object.create(animalType);
   dog.hasOwnProperty("type"); // false

new 背后做了这些事情

1. 帮你在内部创建一个临时对象
2. 将临时对象的 __proto__ 设置为构造函数的原型，构造函数的原型统一叫做 prototype
3. return 临时对象

function NEW(fn) {
  return function () {
    var o = { __proto__: fn.prototype };
    fn.apply(o, arguments);
    return o;
  };
}

__proto__、prototype、constructor 区别

prototype 是函数的独有的；__proto__ 和 constructor 是对象独有的

由于函数也是对象，所以函数也有 __proto__ 和 constructor

constructor 是函数；prototype 和 __proto__ 是对象

typeof Object.__proto__; // "object"
typeof Object.prototype; // "object"
typeof Object.constructor; // "function"

let obj = new Object();
obj.__proto__ === Object.prototype;
obj.constructor === Object;

obj 是 Object 的实例，所以 obj.constructor === Object

obj 的是对象，Object 是函数，所以 obj.__proto__ === Object.prototype

参考资料：

1. 用自己的方式（图）理解 constructor、prototype、__proto__ 和原型链
2. 面试官问：JS 的继承

06 ｜作用域链：V8 是如何查找变量的？

全局作用域是在 V8 启动过程中就创建了，且一直保存在内存中不会被销毁的，直至 V8 退出

而函数作用域是在执行该函数时创建的，当函数执行结束之后，函数作用域就随之被销毁掉了

因为 JavaScript 是基于词法作用域的，词法作用域就是指，查找作用域的顺序是按照函数定义时的位置来决定的。

词法作用域是静态作用域，根据函数在代码中的位置来确定的，作用域是在声明函数时就确定好了

动态作用域链是基于调用栈的，不是基于函数定义的位置的，可以认为 this 是用来弥补 JavaScript 没有动态作用域特性的

07 ｜类型转换：V8 是怎么实现 1+“2”的？

V8 会提供了一个 ToPrimitive 方法，其作用是将 a 和 b 转换为原生数据类型

1. 先检测该对象中是否存在 valueOf 方法，如果有并返回了原始类型，那么就使用该值进行强制类型转换
2. 如果 valueOf 没有返回原始类型，那么就使用 toString 方法的返回值
3. 如果 valueOf 和 toString 两个方法都不返回基本类型值，便会触发一个 TypeError 的错误。

[astak16]

第二篇

这是《图解 Google V8》第二篇/共三篇：编译流水线

学习下来最大的收获有两点：

1. V8 如何提升 JavaScript 执行速度
   • 早期缓存机器码，之后重构为缓存字节码
2. 在 JavaScript 中访问一个属性时，V8 做了哪些优化
   • 隐藏类
   • 内联缓存

特别是第二点，让我看到了使用 TypeScript 的好处，动态语言存在的问题，静态语言都可以解决

09 | 运行时环境：运行 JavaScript 代码的基石

运行时环境包括：堆空间和栈空间、全局执行上下文、全局作用域、内置的内建函数、宿主环境提供的扩展函数和对象，还有消息循环系统

宿主

浏览器为 V8 提供基础的消息循环系统、全局变量、Web API

V8 的核心是实现 ECMAScript 标准，比如：Object、Function、String，还提供垃圾回收、协程等

构造数据存储空间：堆空间和栈空间

在 Chrome 中，只要打开一个渲染进程，渲染进程便会初始化 V8，同时初始化堆空间和栈空间。

栈是内存中连续的一块空间，采用“先进后出”的策略。

在函数调用过程中，涉及到上下文相关的内容都会存放在栈上，比如原生类型、引用的对象的地址、函数的执行状态、this 值等都会存在栈上

当一个函数执行结束，那么该函数的执行上下文便会被销毁掉。

堆空间是一种树形的存储结构，用来存储对象类型的离散的数据，比如：函数、数组，在浏览器中还有 window、document 等

全局执行上下文和全局作用域

执行上下文中主要包含三部分，变量环境、词法环境和 this 关键字

全局执行上下文在 V8 的生存周期内是不会被销毁的，它会一直保存在堆中

在 ES6 中，同一个全局执行上下文中，都能存在多个作用域：

var x = 5;
{
  let y = 2;
  const z = 3;
}

构造事件循环系统

V8 需要一个主线程，用来执行 JavaScript 和执行垃圾回收等工作

V8 是寄生在宿主环境中的，V8 所执行的代码都是在宿主的主线程上执行的

如果主线程正在执行一个任务，这时候又来了一个新任务，把新任务放到消息队列中，等待当前任务执行结束后，再从消息队列中取出正在排列的任务，执行完这个任务之后，再重复这个过程

10 | 机器代码：二进制机器码究竟是如何被 CPU 执行的？

将汇编语言转换为机器语言的过程称为“汇编”；反之，机器语言转化为汇编语言的过程称为“反汇编”

在程序执行之前，需要将程序装进内存中（内存中的每个存储空间都有独一无二的地址）

二进制代码被装载进内存后，CPU 便可以从内存中取出一条指令，然后分析该指令，最后执行该指令。

把取出指令、分析指令、执行指令这三个过程称为一个 CPU 时钟周期

CPU 中有一个 PC 寄存器，它保存了将要执行的指令地址，到下一个时钟周期时，CPU 便会根据 PC 寄存器中的地址，从内存中取出指令。

PC 寄存器中的指令取出来之后，系统要做两件事：

1. 将下一条指令的地址更新到 PC 寄存器中
2. 分析该指令，识别出不同类型的指令，以及各种获取操作数的方法

因为 CPU 访问内存的速度很慢，所以需要通用寄存器，用来存放 CPU 中数据的（通用寄存器容量小，读写速度快，内存容量大，读写速度慢。）

通用寄存器通常用来存放数据或者内存中某块数据的地址，我们把这个地址又称为指针

• ebp 寄存器通常是用来存放栈帧指针
• esp 寄存器用来存放栈顶指针
• PC 寄存器用来存放下一条要执行的指令

常用的指令类型：

1. 加载指令：从内存中复制指定长度的内容到通用寄存器中，并覆盖寄存器中原来的内容
2. 存储指令：和加载类型的指令相反，作用是将寄存器中的内容复制到内存中的某个位置，并覆盖掉内存中的这个位置上原来的内容
3. 更新指令：作用是复制两个寄存器中的内容到 ALU 中
4. 跳转指令：从指令本身抽取出一个字，这个字是下一条要执行的指令地址，并将该字复制到 PC 寄存器中，并覆盖掉 PC 寄存器中原来的值

11 | 堆和栈：函数调用是如何影响到内存布局的？

函数有两个主要的特性：

1. 可以被调用
2. 具有作用域机制

所以：

• 函数调用者的生命周期比被调用者的长（后进），被调用者的生命周期先结束 (先出)
• 从函数资源分配和回收角度来看，
  • 被调用函数的资源分配晚于调用函数 (后进)，
  • 被调用函数资源的释放先于调用函数 (先出)

栈的状态从 add 中恢复到 main 函数的上次执行时的状态，这个过程称为恢复现场

function main() {
  add();
}
function add(num1, num2) {
  return num1 + num2;
}

怎么恢复 main 函数的执行现场呢：

1. 在 esp 寄存器中保存一个永远指向当前栈顶的指针
   • 告诉你往哪个位置添加新元素
2. ebp 寄存器，保存当前函数的起始位置（也叫栈帧指针）
   • 告诉 CPU 移动到这个地址

栈帧：每个栈帧对应着一个未运行完的函数，栈帧中保存了该函数的返回地址和局部变量。

12 | 延迟解析：V8 是如何实现闭包的？

在编译阶段，V8 不会对所有代码进行编译，采用一种“惰性编译”或者“惰性解析”，也就是说 V8 默认不会对函数内部的代码进行编译，只有当函数被执行前，才会进行编译。

闭包的问题指的是：由于子函数使用到了父函数的变量，导致父函数在执行完成以后，它内部被子函数引用的变量无法及时在内存中被释放。

而闭包问题产生的根本原因是 JavaScript 中本身的特性：

1. 可以在函数内部定义新的函数
2. 内部函数可以访问父函数的变量
3. 函数是一等公民，所以函数可以作为返回值

既然由于 JavaScript 的这种特性就会出现闭包的问题，那么就需要解决闭包问题，“预编译“ 或者 “预解析” 就出现了

预编译具体方案： 在编译阶段，V8 会对函数函数进行预解析

1. 判断函数内语法是否正确
2. 子函数是否引用父函数中的变量，如果有的话，将这个变量复制一份到堆中，同时子函数本身也是一个对象，也会被放到堆中
   • 父函数执行完成后，内存会被释放
   • 子函数在执行时，依然可以从堆内存中访问复制过来的变量

13 | 字节码（一）：V8 为什么又重新引入字节码？

在 V8 中，字节码有两个作用：

1. 解释器可以直接执行字节码
2. 优化编译器可以将字节码编译为机器码，然后再执行机器码

早期的 V8

V8 团队认为“先生成字节码再执行字节码”，会牺牲代码的执行速度，便直接将 JavaScript 代码编译成机器码

使用了两个编译器：

1. 基线编译器：将 JavaScript 代码编译为没有优化过的机器码
2. 优化编译器：将一些热点代码（执行频繁的代码）优化为执行效率更高的机器码

执行 JavaScript：

1. 将 JavaScript 代码转换为抽象语法树（AST）
2. 基线编译器将 AST 编译为未优化过的机器码，然后 V8 执行这些未优化过的机器代码
3. 在执行未优化的机器代码时，将一些热点代码优化为执行效率更高的机器代码，然后执行优化过的机器码
4. 如果优化过的机器码不满足当前代码的执行，V8 会进行反优化操作

问题

1. 机器码缓存

V8 执行一段 JavaScript 代码，编译时间和执行时间差不多

如果再 JavaScript 没有改变的情况下，每次都编译这段代码，就会浪费 CPU 资源

所以 V8 引入机器码缓存：

1. 将源代码编译成机器码后，放在内存中（内存缓存）
2. 下次再执行这段代码，就先去内存中查找是否存在这段代码的机器码，有的话就执行这段机器码
3. 将编译后的机器码存入硬盘中，关闭浏览器后，下次重新打开，可以直接用编译好的机器码

时间缩短了 20% ~ 40%

这是用空间换时间的策略，在移动端非常吃内存

2. 惰性编译

V8 采用惰性编译，只会编译全局执行上下文的代码

由于 ES6 之前，没有块级作用域，为了实现各模块之间的隔离，会采用立即执行函数

这会产生很多闭包，闭包模块中的代码不会被缓存，所以只缓存顶层代码是不完美的

所以 V8 就进行了大重构

现在的 V8

字节码 + 解释器 + 编译器

5K 的源代码 JavaScript -> 40K 字节码 -> 10M 的机器码

字节码的体积远小于机器码，浏览器就可以实现缓存所有的字节码，而不仅仅是全局执行上下文的字节码

优点：

1. 降低了内存
2. 提升代码启动速度
3. 降低了代码的复杂度

缺点：

1. 执行效率下降

解释器的作用是将源代码转换成字节码

V8 的解释器是：lgnition；V8 的编译器是：TurboFan

如何降低代码复杂度

机器码在不同 CPU 中是不一样的，直接将 AST 转换成不同的机器码，就需要基线编译器和优化编译器编写大量适配各 CPU 的代码

先将 AST 转换成字节码，再将字节码转换成机器码，由于字节码（消除了平台的差异性）和 CPU 执行机器码过程类似，将字节码转换成机器码就会容易很多

14 ｜字节码（二）：解释器是如何解释执行字节码的？

生成字节码

function add(x, y) {
  var z = x + y;
  return z;
}
console.log(add(1, 2));

生成 AST

[generating bytecode for function: add]
--- AST ---
FUNC at 12
  KIND 0
  LITERAL ID 1
  SUSPEND COUNT 0
  NAME "add"
  PARAMS
    VAR (0x7fa7bf8048e8) (mode = VAR, assigned = false) "x"
    VAR (0x7fa7bf804990) (mode = VAR, assigned = false) "y"
  DECLS
    VARIABLE (0x7fa7bf8048e8) (mode = VAR, assigned = false) "x"
    VARIABLE (0x7fa7bf804990) (mode = VAR, assigned = false) "y"
    VARIABLE (0x7fa7bf804a38) (mode = VAR, assigned = false) "z"
  BLOCK NOCOMPLETIONS at -1
    EXPRESSION STATEMENT at 31
      INIT at 31
        VAR PROXY local[0] (0x7fa7bf804a38) (mode = VAR, assigned = false) "z"
        ADD at 32
          VAR PROXY parameter[0] (0x7fa7bf8048e8) (mode = VAR, assigned = false) "x"
          VAR PROXY parameter[1] (0x7fa7bf804990) (mode = VAR, assigned = false) "y"
  RETURN at 37
    VAR PROXY local[0] (0x7fa7bf804a38) (mode = VAR, assigned = false) "z"

将 AST 图形化

将函数拆成了 4 部分

1. 参数声明（PARAMS）：包括声明中的所有参数，这里是 x 和 y，也可以使用 arguments
2. 变量声明节点（DECLS）：出现了 3 个变量：x、y、z，你会发现 x 和 y 的地址和 PARAMS 中是相同的，说明他们是同一块数据
3. 表达式节点：ADD 节点下有 VAR PROXY parameter[0] 和 VAR PROXY parameter[1]
4. RETURN 节点：指向了 z 的值，这里是 local[0]

生成 AST 的同时，还生成了 add 函数的作用域

Global scope:
function add (x, y) { // (0x7f9ed7849468) (12, 47)
  // will be compiled
  // 1 stack slots
  // local vars:
  VAR y;  // (0x7f9ed7849790) parameter[1], never assigned
  VAR z;  // (0x7f9ed7849838) local[0], never assigned
  VAR x;  // (0x7f9ed78496e8) parameter[0], never assigned
}

在解析阶段，普通变量默认值是 undefined，函数声明指向实际的函数对象；执行阶段，变量会指向栈和堆相应的数据

AST 作为输入传到自己字节码生成器中（BytecodeGenerator），它是 lgnition 的一部分，生成以函数为单位的字节码

[generated bytecode for function: add (0x079e0824fdc1 <SharedFunctionInfo add>)]
Parameter count 3
Register count 2
Frame size 16
         0x79e0824ff7a @    0 : a7                StackCheck
         0x79e0824ff7b @    1 : 25 02             Ldar a1
         0x79e0824ff7d @    3 : 34 03 00          Add a0, [0]
         0x79e0824ff80 @    6 : 26 fb             Star r0
         0x79e0824ff82 @    8 : 0c 02             LdaSmi [2]
         0x79e0824ff84 @   10 : 26 fa             Star r1
         0x79e0824ff86 @   12 : 25 fb             Ldar r0
         0x79e0824ff88 @   14 : ab                Return
Constant pool (size = 0)
Handler Table (size = 0)
Source Position Table (size = 0)

这里 Parameter count 3 表示显示的参数 x 和 y，及隐式参数 this

最终的字节码

StackCheck
Ldar a1
Add a0, [0]
Star r0
LdaSmi [2]
Star r1
Ldar r0
Return

理解字节码

有两种解释器：

• 基于栈（State-based）
  • 使用栈来保存函数参数、中间运算结果、变量
• 基于寄存器（Register-based）
  • 支持寄存器的指令操作，使用寄存器保存参数、中间计算结果

基于栈的解释器：Java 虚拟机、.Net 虚拟机，早期的 V8 虚拟机；优点：在处理函数调用、解决递归问题和切换上下文时简单快速

现在的 V8 采用了基于寄存器的设计

• Ladr a1 指令：将 a1 寄存器中的值加载到累加器中
• Star r0 指令：把累加器中的值保存到 r0 寄存器中
• Add a0, [0] 指令：
  • 从 a0 寄存器加载值并与累加器中的值相加，再将结果放入累加器中
  • [0]：成为反馈向量槽（feedback vector slot），
    • 目的是了给优化编译器（TurboFan）提供优化信息，它是一个数组，解释器将解释执行过程中的一些数据类型的分析信息保存在反馈向量槽中
• LadSmi [2] 指令：将小整数（Smi）2 加载到累加器中
• Return 指令：结束当前函数的执行，并将控制权还给调用方，返回的值是累加器中的值
• StackCheck 指令：检查是栈是否到达溢出的上限

15 | 隐藏类：如何在内存中快速查找对象属性？

• 为了提升对象属性访问速度，引入隐藏类
• 为了加速运算引入内联缓存

为什么静态语言效率高

JavaScript 在运行时，对象的属性可以被修改，所以 V8 在解析对象时，比如：解析 start.x 时，它不知道 start 中是否有 x，也不知道 x 相对于 start 的偏移量是多少，简单说 V8 不知道 start 对象的具体行状

所以当 JavaScript 查询 start.x 时，过程非常慢

静态语言，比如 C++ 在声明对象之前需要定义该对象的结构（行状），执行之前会被编译，编译的时候，行状是固定的，也就是说在执行过程中，对象的行政是无法改变的

所以当 C++ 查询 start.x 使，编译器在编译的时候，会直接将 x 相对于 start 对象的地址写进汇编指令中，查询时直接读取 x 的地址，没有查找环节

隐藏类

V8 为了做到这点，做了两个假设：

1. 对象创建好了之后不会添加新的属性
2. 对象创建好了之后也不会删除属性

然后 V8 为每个对象创建一个隐藏类，记录基础的信息

1. 对象中所包含的所有属性
2. 每个属性相对于对象的偏移量。

在 V8 中隐藏类有称为 map，即每个对象都有一个 map 属性，指向内存中的隐藏类

有了 map 之后，当访问 start.x 时，V8 会先去 start.map 中查询 x 相对 start 的偏移量，然后将 point 对象的地址加上偏移量就得到了 x 属性的值在内存中的地址了

如果两个对象行状相同，V8 会为其复用同一个隐藏类：

1. 减少隐藏类的创建次数，也间接加速了代码的执行速度
2. 减少了隐藏类的存储空间

两个对象的形状相同，要满足：

1. 相同的属性名称
2. 相同的属性顺序
3. 相同的属性类型
4. 相等的属性个数

如果动态改变了对象的行状，V8 就会重新构建新的隐藏类

参考资料：

1. 利用 V8 深入理解 JavaScript 对象存储策略

16 | 答疑：V8 是怎么通过内联缓存来提升函数执行效率的？

function loadX(o) {
  return o.x;
}
var o = { x: 1, y: 3 };
var o1 = { x: 3, y: 6 };
for (var i = 0; i < 90000; i++) {
  loadX(o);
  loadX(o1);
}

V8 获取 o.x 的流程：查找对象 o 的隐藏类，再通过隐藏类查找 x 属性偏移量，然后根据偏移量获取属性值

这段代码里 o.x 会被反复执行，那么查找流程也会被反复执行，那么 V8 有没有做这优化呢

内联缓存（Inline Cache，简称 IC）

V8 在执行函数的过程中，会观察函数中的一些调用点（CallSite）上的关键数据（中间数据），然后将它们缓存起来，当下次再执行该函数时，V8 可以利用这些中间数据，节省再次获取这些数据的过程

IC 会为每个函数维护一个反馈向量（FeedBack Vector），反馈向量记录了函数在执行过程中的一些关键的中间数据

反馈向量是一个表结构，有很多项，每一项称为一个插槽 (Slot)

function loadX(o) {
  o.y = 4;
  return o.x;
}

当 V8 执行这段函数时，它判断 o.y = 4 和 return o.x 是调用点 (CallSite)，因为它们使用了对象和属性，那么 V8 会在 loadX 函数的反馈向量中为每个调用点分配一个插槽。

插槽中包括了：

• 插槽的索引 (slot index)
• 插槽的类型 (type)
• 插槽的状态 (state)
• 隐藏类 (map) 的地址
• 属性的偏移量

function loadX(o) {
  return o.x;
}
loadX({ x: 1 });

// 字节码
StackCheck // 检查是否溢出
LdaNamedProperty a0, [0], [0] // 取出参数 a0 的第一个属性值，并将属性值放到累加器中
Return // 返回累加器中的属性

LdaNameProperty 有三个参数：

• a0 是 loadX 的第一参数
• 第一个 [0] 表示取出对象 a0 的第一个属性值
• 第二个 [0] 和反馈向量有关，表示将 LdaNameProperty 操作的中间数据写到反馈向量中，这里 0 表示第一个插槽

• map：缓存了 o 的隐藏类的地址
• offset：缓存了属性 x 的偏移量
• type：缓存了操作类型，这里是 LOAD 类型。在反馈向量中，我们把这种通过 o.x 来访问对象属性值的操作称为 LOAD 类型。

function foo() {}
function loadX(o) {
  o.y = 4;
  foo();
  return o.x;
}
loadX({ x: 1, y: 4 });

// 字节码
StackCheck
// 下面两行是 o.y = 4，STORE 类型
LdaSmi [4]
StaNamedProperty a0, [0], [0]
// 下面三行是 调用 foo 函数，CALL
LdaGlobal [1], [2]
Star r0
CallUndefinedReceiver0 r0, [4]
// 下面一行是 o.x
LdaNamedProperty a0, [2], [6]
Return

多态和超态

function loadX(o) {
  return o.x;
}
// o 和 o1 行状不同
var o = { x: 1, y: 3 };
var o1 = { x: 3, y: 6, z: 4 };
for (var i = 0; i < 90000; i++) {
  loadX(o);
  loadX(o1);
}

• 第一次执行 loadX 时，V8 将 o 的隐藏类记录在反馈向量中，同时记录 x 的偏移量
• 第二次执行 loadX，V8 先取出反馈向量中的隐藏类，和 o1 的隐藏类进行比较，不是同一个隐藏类，那么就无法使用反馈向量中缓存的偏移量了

• 一个插槽只有 1 个隐藏类，称为单态 (monomorphic)
• 一个插槽有 2 ～ 4 个隐藏类，称为为多态 (polymorphic)
• 一个插槽中超过 4 个隐藏类，称为超态 (magamorphic)。

如果一个插槽中存在多态或者超态时，执行效率是低于单态的（多了比较的过程）

参考资料：

1. V8 中的多态内联缓存 PIC

[astak16]

第三篇

这是《图解 Google V8》第三篇/共三篇：事件循环和垃圾回收

这里主要讲了 2 点：

1. 事件循环：宏任务和微任务
   • 什么是微任务
   • 微任务的执行时机
2. 垃圾回收
   • 垃圾回收运行过程
   • 垃圾回收算法

通过这个专栏的学习，V8 不在是个陌生的黑盒了，变成了一个熟悉的黑盒，因为这个专栏让你了解了 V8 的大致原理，面试时吹吹牛皮还是可以的，不过也就仅此而已，细节方面还需要自己去深入

17 | 消息队列：V8 是怎么实现回调函数的？

• 同步回调函数是在执行函数内部被执行的
• 异步回调函数是在执行函数外部被执行的

UI 线程是运行窗口的线程，也叫主线程

当鼠标点击了页面，系统会将该事件交给 UI 线程来处理，但是 UI 线程不能立即响应来处理

针对这种情况，浏览器为 UI 线程提供了消息队列，然后 UI 线程会不断的从消息队列中取出事件和执行事件，如果当前没有任何消息等待被处理，那么这个循环就会被挂起

setTimeout

在执行 setTimeout，浏览器会将回调函数封装成一个事件，添加到消息队列中，然后 UI 线程会不间断的从消息队列中取出任务，执行任务，在合适的时机取出 setTimeout 的回调函数

XMLHttpRequest

在 UI 线程执行 XMLHttpRequest，会阻塞 UI 线程，所以 UI 线程会将它分配给网络线程（是网络进程中的一个线程）：

1. UI 线程从消息队列中取出任务，分析
2. 发现是一个下载任务，就会交给网络线程去执行
3. 网络线程接到下载请求后，会和服务器建立联系，发出下载请求
4. 网络线程不断从服务器接收数据
5. 网络请求在收到数据后，会将返回的数据和回调函数封装成一个事件，放在消息队列中
6. UI 线程循环读取消息队列，如果是下载状态的事件，UI 线程就会执行回调函数
7. 直到下载事件结束，页面显示下载完成

18 | 异步编程（一）：V8 是如何实现微任务的？

宏任务是消息队列中等待被主线程执行的事件，每个宏任务在执行的时候都会创建栈，宏任务结束，栈也会被清空

微任务是一个需要异步执行的函数，执行时机是在主函数执行结束之后，当前宏任务结束之前

微任务执行的时机：

1. 如果当前任务中产生了一个微任务，不会再当前的函数中被执行，所以执行微任务时，不会导致栈的无限扩张
2. 微任务会在当前任务执行结束之前被执行
3. 微任务结束执行之前，不会执行其他的任务

参考资料

1. V8 Promise 源码全面解读
2. JavaScript Event Loop vs Node JS Event Loop

19 ｜异步编程（二）：V8 是如何实现 async/await 的？

生成器 Generator

带星号的函数配合 yield 可以实现函数的暂停和恢复，这个叫生成器

function* getResult() {
  console.log("getUserID before");
  yield "getUserID";
  console.log("getUserName before");
  yield "getUserName";
  console.log("name before");
  return "name";
}

let result = getResult();

console.log(result.next().value);
console.log(result.next().value);
console.log(result.next().value);

在生成器内部，如果遇到 yield 关键词，那么 V8 将 yield 后面的内容返回给外部，并暂停函数的执行

生成器暂停后，外面代码开始执行，如果想要继续恢复生成器的执行，就可以使用 result.next() 方法

在暂停和恢复之间切换，这背后的原理是协程，协程是比线程更加轻量级，它是跑在线程上的任务

一个线程有多个协程，但只能执行一个协程，如果 A 协程启动 B 协程，那 A 协程就是 B 协程的父协程

使用生成器编写同步代码

function* getResult() {
  let id_res = yield fetch(id_url);
  console.log(id_res);
  let id_text = yield id_res.text();
  console.log(id_text);

  let new_name_url = name_url + "?id=" + id_text;
  console.log(new_name_url);

  let name_res = yield fetch(new_name_url);
  console.log(name_res);
  let name_text = yield name_res.text();
  console.log(name_text);
}
let result = getResult();
result
  .next()
  .value.then((response) => {
    return result.next(response).value;
  })
  .then((response) => {
    return result.next(response).value;
  })
  .then((response) => {
    return result.next(response).value;
  })
  .then((response) => {
    return result.next(response).value;
  });

把执行生成器代码的函数称为执行器（可参考著名的 co 框架）

function* getResult() {
  let id_res = yield fetch(id_url);
  console.log(id_res);
  let id_text = yield id_res.text();
  console.log(id_text);

  let new_name_url = name_url + "?id=" + id_text;
  console.log(new_name_url);

  let name_res = yield fetch(new_name_url);
  console.log(name_res);
  let name_text = yield name_res.text();
  console.log(name_text);
}
co(getResult());

async/await

async 是异步执行并隐式返回 Promise 作为结果的函数。

await 后面可以接两种类型的表达式：

• 任何普通表达式
• Promise 对象的表达式

如果 await 等待的是一个 Promise 对象，它会暂停执行生成器函数，直到 Promise 对象变成 resolve 才会恢复执行，然后 resolve 的值作为 await 表达式的运算结果

function NeverResolvePromise() {
  return new Promise((resolve, reject) => {});
}
function ResolvePromise() {
  return new Promise((resolve, reject) => resolve("resolve"));
}
async function getResult() {
  let a = await NeverResolvePromise();
  console.log(a); // 不会输出
}
async function getResult2() {
  let b = await ResolvePromise();
  console.log(b); // "resolve"
}
getResult();
getResult2();
console.log(0);

async 是一个异步执行的函数，不会阻塞主线程的执行

async 函数在执行时，是一个单独的协程，可以用 await 来暂停，由于等待的是一个 Promise 对象，就可以用 resolve 来恢复该协程

参考资料

1. 学习 koa 源码的整体架构，浅析 koa 洋葱模型原理和 co 原理

20 | 垃圾回收（一）：V8 的两个垃圾回收器是如何工作的？

1. 通过 GC Root 标记内存中活动对象和非活动对象。
   • V8 采用可访问性（reachability）算法判断堆中的对象是是否为活动对象
     • GC Root 能够遍历到的对象，是可访问的（reachable），称为活动对象
     • GC Root 不能遍历到的对象，认为是不可访问的（unreachable），称为非活动对象
   • 浏览器环境中有很多 GC Root
     • window 对象（位于每个 iframe 中）
     • DOM，由可以通过遍历文档到达的所有原生 DOM 节点组成
     • 存放栈上变量
2. 回收非活动对象所占用的内存
3. 回收后，做内存整理（可选，有些垃圾回收器不会产生内存碎片，比如副垃圾回收器）
   • 回收结束后，内存中会出现大量不连续的空间，这空间被称为内存碎片
   • 如果内存碎片太多的话，当需要较大连续的内存时，就会出现内存不足

V8 受代际假说影响，使用了两个垃圾回收器：主垃圾回收器(Major GC)，副垃圾回收器（Minor GC）

代际假说：

1. 大部分对象都是“朝生夕死”的，也就是说大部分对象在内存中存活的时间很短，比如函数内部声明的变量，或者块级作用域中的变量，当函数或者代码块执行结束时，作用域中定义的变量就会被销毁。因此这一类对象一经分配内存，很快就变得不可访问
2. 不死的对象，会活得更久，比如：window、DOM、Web API 等

V8 把堆分为两个区域：

• 新生代：存放生存时间短的对象
  • 容量小，1~8M
  • 使用副垃圾回收器（Minor GC）
  • 使用 Scavenge 算法，将新生代区域分成两部分
    • 对象区域 (from-space)
    • 空闲区域 (to-space)
      1. 对象区域放新加入的对象
      2. 对象区域快满的时候，执行垃圾清理（先标记，再清理）
      3. 清理的把活动对象复制到空闲区域，并且排序（空闲区域就没有内存碎片了）
      4. 复制完之后，把对象区域和空闲区域进行翻转
      5. 重复执行上面的步骤
      6. 经过两次垃圾回收后还存在的对象，移动到老生代中
• 老生代：存放生存时间久的对象
  • 容量大
    • 对象占用空间大
    • 对象存活时间长
  • 使用主垃圾回收器（Major GC）
  • 使用标记 - 清除算法（Mark-Sweep）
    • 标记：从根元素开始，找到活动对象，找不到的就是垃圾
    • 清理：直接清理垃圾（会产生垃圾碎片）
  • 或者使用标记 - 整理算法（Mark-Compact）
    • 标记：从根元素开始，找到活动对象，找不到的就是垃圾
    • 整理：把活动对象向同一端移动，另一端直接清理（不会产生垃圾碎片）

参考资料

1. Understanding Garbage Collection and hunting Memory Leaks in Node.js
2. 深入理解 Node.js：核心思想与源码分析
3. When and How JavaScript garbage collector works
4. V8 引擎的内存管理
5. Trash talk: the Orinoco garbage collector

21 | 垃圾回收（二）：V8 是如何优化垃圾回收器执行效率的？

JavaScript 是运行在主线程上的，一旦执行垃圾回收算法，JavaScript 会暂停执行，等垃圾回收完毕后再恢复执行，这种行为成为全停顿（Stop-The-World）

V8 团队向现有的垃圾回收器添加并行、并发、增量等垃圾回收技术

这些技术主要从两方面解决垃圾回收效率的问题：

1. 将一个完整的垃圾回收任务拆分成多个小的任务
2. 将标记对象、移动对象等任务转移到后端线程进行

并行回收（在主线程执行，全停顿）

在主线程执行垃圾回收的任务时，开启多个协助线程，同时执行回收工作

采用并行回收，垃圾回收所消耗的时间 = 辅助线程数 * 单个线程所消耗的时间

在执行垃圾标记的过程中，主线程不会同时执行 JavaScript 代码，因此代码不会改变回收过程

假设内存状态是静态的，因此只要确保同时只有一个辅助线程在访问对象就好了

这是 V8 副垃圾回收器采用的策略

它在执行垃圾回收的过程中，启动多个线程来负责新生代中的垃圾清理，同时将对象空间中的数据移动到空闲区域，这操作会导致数据地址变了，所以还需要同步更新这些对象的指针

增量回收（在主线程执行，穿插在各个任务之间）

将标记工作分解为更小的块，穿插在主线程不同的任务之间执行

采用增量回收，垃圾回收器没必要一次执行完成的垃圾回收流程，每次执行的只是一小部分工作

增量回收是并发的，需要满足两点要求：

1. 垃圾回收可以随时被暂停和重启，暂停的时候需要保留扫描结果，等待下一次回收
2. 在暂停期间，被标记好的垃圾数据，如果被修改了，垃圾回收器需要正确的处理

在垃圾回收的时候，V8 使用三色标记法：

• 黑色：表示所有能访问到的数据（活动数据），且子节点已经都标记完成
• 白色：表示还没有被访问到，如果在一轮遍历结束还是白色，这个数据就会被回收
• 灰色：表示正在处理这个节点，且子节点还没被处理

垃圾回收器会根据有没有灰色的节点来判断这一轮遍历有没有结束

• 没有灰色：一轮遍历结束，可以清理垃圾
• 有灰色：一轮遍历还没结束，从灰色的节点继续执行

标记为黑色的数据被修改了，也就是说黑色的节点引用了一个白色的节点，但是黑色的节点是已经完成标记的，这是它后面还有一个白色的节点是不会被标记为黑色的

这就需要一个约束条件：不能让黑色节点指向白色节点

这个约束条件是：写屏障机制（Write-barrier）：

• 当发生黑色节点引用白色节点，写屏障机制会强制将这个白色节点变为灰色的，从而保证黑色节点不能指向白色节点

这种方法被称为强三色不变性

并发回收（不在主线程执行）

在主线程执行 JavaScript 时，辅助线程在后台执行垃圾回收操作

优点：主线程不会被挂起（JavaScript 可以自由执行，同时辅助线程可以执行垃圾回收）

但有两点导致它很难实现：

1. 主线程执行 JavaScript 时，堆中的内容随时会变化，就会使得辅助线程之前的工作白做
2. 主线程和辅助线程可能会在同一时间去修改同一个对象，这就需要额外实现读写锁的功能