V8 工作原理

Question

栈空间和堆空间：数据是如何存储的

JavaScript是一种弱类型的、动态的语言

• 弱类型：支持隐式类型转换，不需要告诉 js 引擎变量是什么类型，js 引擎在运行代码的是偶会自己计算出来。
• 动态：运行过程中需要检查数据类型的语言称为动态语言，使用之前就需要确定其变量的数据类型的语言称为静态语言。

JavaScript的数据类型有8中，分别是：Boolean、Number、Undefined、BigInt、String、Symbol、Null 和 Object

前面7种数据类型称为原始类型，最后一个对象类型称为引用类型。

内存空间

JavaScript 执行过程中，主要有三种类型的内存空间，分别是代码空间（主要是存储可执行代码的）、栈空间和堆空间。

栈空间和堆空间

这里的栈空间就是之前所说的调用栈，是用来存储执行上下文的。

有如下代码：

function foo(){
//原始类型的赋值会完整复制变量值，而引用类型的赋值是复制引用地址。
    var a = "极客时间"
    var b = a
    var c = {name:"极客时间"}
    var d = c
}
foo()

由此可见，原始类型的数据值都是直接保存在“栈”中的，引用类型的值是存放在“堆”中的。

为什么一定要分为“堆”和”栈“两个存储空间呢？

• 因为 JavaScript 引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。

比如，例子中的foo函数执行结束了，JavaScript 引擎需要离开当前的执行上下文，只需要将指针下移到上个执行上下文的地址就可以了，foo 函数执行上下文栈区空间全部回收

所以通常情况下，**栈空间都不会设置太大，主要用来存放一些原始类型的小数据。**而引用类型的数据占用的空间都比较大，所以这一类数据会被存放到堆中，堆空间很大，能存放很多大的数据，不过缺点是分配内存和回收内存都会占用一定的时间。

再说闭包

function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope();
foo();

分析：变量 scope 是原始数据类型，在执行 checkscope 时，它会被压入调用栈中，当 checkscope 函数执行完毕，调用栈中 checkscope 函数的执行上下文会被销毁，其内变量 scope 也应该一同被销毁。但由于checkscope 函数产生了闭包，所以变量 scope 并没有被销毁，而是保存在内存中。如何解释？

要解释这个现象，需要站在内存模型的角度分析代码的执行流程。

1. 在 js 引擎执行到 checkscope 函数时，首先会编译，并创建一个空执行上下文。
2. 在编译过程中，遇到内部函数 f， js 引擎还要对内部函数做一次快速的词法扫描，发现该内部函数引用了 checkscope 函数中的 scope 变量，由于内部函数引用了外部函数的变量，所以 js 引擎判断这是一个闭包，于是在堆空间创建了一个 “clourse(checksope)” 的对象（这是一个内部对象，JavaScript无法访问），用来保存 scope 变量。
3. checkscope 函数执行结束之后，返回的 f 方法引用了 ”clourse(checksope)” 对象，所以即使 checkscope 函数退出了，”clourse(checksope)” 依然被其内部的 f 方法引用。所以下次调用foo时，创建的执行上下文中就包含了 ”clourse(checksope)” 。

总的来说，产生闭包的核心有两步：

• 第一步是需要预扫描内部函数
• 第二步是把内部函数引用的外部变量保存到堆中。

垃圾回收：垃圾数据是如何自动回收的

调用栈中的数据是如何回收的

图中的指针即记录当前执行状态的指针（称为ESP）。指向 foo 函数的执行上下文，表示当前正在执行 foo 函数。foo函数执行结束了，JavaScript 引擎需要离开当前的执行上下文，只需要将指针下移到上个执行上下文的地址就可以了，foo 函数执行上下文栈区空间全部回收。这个下移操作就是销毁 foo 函数执行上下文的过程。

ESP指针下移后，虽然 foo 的执行上下文还保存在栈内存中，但已经是无效内存了。当全局执行上下文再调用另一个函数时，这块内容就会被直接覆盖，用来存放另一个函数的执行上下文。

JavaScript 引擎会通过向下移动 ESP 指针来销毁该函数保存在栈中的执行上下文。

堆中的数据是如何回收的（基于V8引擎）

要回收堆中的垃圾数据，就需要用到 JavaScript 中的垃圾回收器了。

**代际假说（The Generational Hypothesis）**有以下两个特点：

• 第一个是大部分对象在内存中存在的时间很短，简单来说，就是很多对象一经分配内存，很快就变得不可访问；
• 第二个是不死的对象，会活得更久。

后续的垃圾回收策略都是建立在该假说之上的。

垃圾回收的算法有很多种，没有哪种算法能胜任所有场景，需要权衡，根据对象的生命周期的不同使用不同的算法，以达到最好效果。所以，在 V8 中，把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的是生存时间久的对象。

新生区通常只支持 1～8M 的容量，而老生区支持的容量就大很多了。对于这两块区域，V8 分别使用两个不同的垃圾回收器，以便更高效地实施垃圾回收。

• 副垃圾回收器，主要负责新生代的垃圾回收。
• 主垃圾回收器，主要负责老生代的垃圾回收。

垃圾回收器的工作流程

其实不论什么类型的垃圾回器，它们都有一套共同的执行流程。

1. 标记空间中活动对象和非活动对象。
2. 回收非活动对象所占据的内存。
3. 内存整理。一般来说，频繁回收对象后，内存中就会存在大量不连续空间，我们把这些不连续的内存空间称为内存碎片。当内存中出现了大量的内存碎片之后，如果需要分配较大连续内存的时候，就有可能出现内存不足的情况。所以最后一步需要整理这些内存碎片，但这步其实是可选的，因为有的垃圾回收器不会产生内存碎片，比如接下来要介绍的副垃圾回收器。

副垃圾回收器

副垃圾回收器主要负责新生区的垃圾回收。而通常情况下，大多数小的对象都会被分配到新生区，所以说这个区域虽然不大，但是垃圾回收还是比较频繁的。

新生代中使用Scavenge 算法。该算法把新生代空间分成对象区域和空闲区域两部分。新加入的对象会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作。

在垃圾回收过程中，首先要对对象区域中的垃圾做标记；标记完成之后，就进入垃圾清理阶段，副垃圾回收器会把这些存活的对象复制到空闲区域中，同时它还会把这些对象有序地排列起来，所以这个复制过程，也就相当于完成了内存整理操作，复制后空闲区域就没有内存碎片了。

完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。这样就完成了垃圾对象的回收操作，同时这种角色翻转的操作还能让新生代中的这两块区域无限重复使用下去。

由于新生代中采用的 Scavenge 算法，所以每次执行清理操作时，都需要将存活的对象从对象区域复制到空闲区域。但复制操作需要时间成本，如果新生区空间设置得太大了，那么每次清理的时间就会过久，所以为了执行效率，一般新生区的空间会被设置得比较小。

也正是因为新生区的空间不大，所以很容易被存活的对象装满整个区域。为了解决这个问题，JavaScript 引擎采用了对象晋升策略，也就是经过两次垃圾回收依然还存活的对象，会被移动到老生区中。

主垃圾回收器

主垃圾回收器主要负责老生区中的垃圾回收。除了新生区中晋升的对象，一些大的对象会直接被分配到老生区。因此老生区中的对象有两个特点，一个是对象占用空间大，另一个是对象存活时间长。

由于老生区的对象比较大，若要在老生区中使用 Scavenge 算法进行垃圾回收，复制这些大的对象将会花费比较多的时间，从而导致回收执行效率不高，同时还会浪费一半的空间。因而，主垃圾回收器是采用**标记 - 清除（Mark-Sweep）**的算法进行垃圾回收的。

下面我们来看看该算法是如何工作的。

首先是标记过程阶段。标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。（即查找堆中的地址是否被引用）

接下来就是垃圾的清除过程。它和副垃圾回收器的垃圾清除过程完全不同，你可以理解这个过程是清除掉红色标记数据的过程，可参考下图大致理解下其清除过程：

上面的标记过程和清除过程就是标记 - 清除算法，不过对一块内存多次执行标记 - 清除算法后，会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存，于是又产生了另外一种算法——标记 - 整理（Mark-Compact），这个标记过程仍然与标记 - 清除算法里的是一样的，但后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动，然后直接清理掉端边界以外的内存。你可以参考下图：

全停顿

由于 JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）。

比如堆中的数据有 1.5GB，V8 实现一次完整的垃圾回收需要 1 秒以上的时间，这也是由于垃圾回收而引起 JavaScript 线程暂停执行的时间，若是这样的时间花销，那么应用的性能和响应能力都会直线下降。主垃圾回收器执行一次完整的垃圾回收流程如下图所示：

在 V8 新生代的垃圾回收中，因其空间较小，且存活对象较少，所以全停顿的影响不大，但老生代就不一样了。如果在执行垃圾回收的过程中，占用主线程时间过久，就像上面图片展示的那样，花费了 200 毫秒，在这 200 毫秒内，主线程是不能做其他事情的。比如页面正在执行一个 JavaScript 动画，因为垃圾回收器在工作，就会导致这个动画在这 200 毫秒内无法执行的，这将会造成页面的卡顿现象。

为了降低老生代的垃圾回收而造成的卡顿，V8 将标记过程分为一个个的子标记过程，同时让垃圾回收标记和 JavaScript 应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法。如下图所示：

使用增量标记算法，可以把一个完整的垃圾回收任务拆分为很多小的任务，这些小的任务执行时间比较短，可以穿插在其他的 JavaScript 任务中间执行，这样当执行上述动画效果时，就不会让用户因为垃圾回收任务而感受到页面的卡顿了。

如何判断 JavaScript 内存泄漏

通过chrome的Perfomance面板记录页面的活动，然后在页面上进行各种交互操作，过一段时间后（时间越长越好），停止记录，生成统计数据，然后看timeline下部的内存变化趋势图，如果是有规律的周期平稳变化，则不存在内存泄漏，如果整体趋势上涨则说明存在内存泄漏。

编译器和解释器：V8 是如何执行一段 JavaScript 代码的？

要深入了解V8工作原理，需要清除这些概念。编译器（Compiler）、解释器（Interpreter）、抽象语法树（AST）、字节码（Bytecode）、即时编译器（JIT）。

编译器和解释器

机器不能直接理解我们的代码，需要借助编译器和解释器“翻译”成机器能读懂的代码。按照语言的执行流程，可以把语言分为编译型语言和解释型语言。

• **编译型语言在程序执行之前，需要经过编译器的编译过程，并且编译之后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译了。**比如 C/C++、GO 等都是编译型语言。
• **而由解释型语言编写的程序，在每次运行时都需要通过解释器对程序进行动态解释和执行。**比如 Python、JavaScript 等都属于解释型语言。

编译器与解释器工作流程：

• 在编译型语言的编译过程中，编译器首先会依次对源代码进行词法分析、语法分析，生成抽象语法树（AST），然后是优化代码，最后再生成处理器能够理解的机器码。如果编译成功，将会生成一个可执行的文件。但如果编译过程发生了语法或者其他的错误，那么编译器就会抛出异常，最后的二进制文件也不会生成成功。
• 在解释型语言的解释过程中，同样解释器也会对源代码进行词法分析、语法分析，并生成抽象语法树（AST），不过它会再基于抽象语法树生成字节码，最后再根据字节码来执行程序、输出结果。

V8 如何执行一段 JavaScript 代码

V8 在执行过程中既有解释器 Ignition，又有编译器 TurboFan。

执行流程

1. 生成抽象语法树（AST）和执行上下文

AST 是编译器和解释器能理解的结构。

可以在javascript-ast查看将代码转成的AST。

AST 是非常重要的一种数据结构，在很多项目中有着广泛的应用。其中最著名的一个项目是 Babel。Babel 是一个被广泛使用的代码转码器，可以将 ES6 代码转为 ES5 代码，这意味着你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持 ES6。Babel 的工作原理就是先将 ES6 源码转换为 AST，然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST，最后利用 ES5 的 AST 生成 JavaScript 源代码。除了 Babel 外，还有 ESLint 也使用 AST。ESLint 是一个用来检查 JavaScript 编写规范的插件，其检测流程也是需要将源码转换为 AST，然后再利用 AST 来检查代码规范化的问题。

生成AST的两个阶段：

• 分词（tokenize），又称词法分析：将一行行的源码拆解成一个个 token。所谓 token，指的是语法上不可能再分的、最小的单个字符或字符串。
• 解析（parse），又称语法分析：将上一步生成的 token 数据，根据语法规则转为 AST。如果源码符合语法规则，这一步就会顺利完成。但如果源码存在语法错误，这一步就会终止，并抛出一个“语法错误”。

有了 AST 后，那接下来 V8 就会生成该段代码的执行上下文。

2. 生成字节码

解释器 Ignition 会根据 AST 生成字节码，并解释执行字节码。

其实一开始 V8 并没有字节码，而是直接将 AST 转换为机器码，由于执行机器码的效率是非常高效的，所以这种方式在发布后的一段时间内运行效果是非常好的。但是随着 Chrome 在手机上的广泛普及，特别是运行在 512M 内存的手机上，内存占用问题也暴露出来了，因为 V8 需要消耗大量的内存来存放转换后的机器码。为了解决内存占用问题，V8 团队大幅重构了引擎架构，引入字节码，并且抛弃了之前的编译器，最终花了将进四年的时间，实现了现在的这套架构。

字节码就是介于 AST 和机器码之间的一种代码。但是与特定类型的机器码无关，字节码需要通过解释器将其转换为机器码后才能执行。

3. 执行代码

如果有一段第一次执行的字节码，解释器会逐条解释执行。在解释器执行字节码过程中，如果发现有热点代码（HotSpot）【热点代码指的是一段被重复执行多次的代码】，后台的编译器 TurboFan 就会把该热点的字节码编译成机器码，然后当再次执行这段被优化的代码时，只需要执行编译后的机器码就可以了，这样大大提升了代码的执行效率。这种技术称为即时编译(JIT).**

JavaScript 性能优化

对于优化 JavaScript 执行效率，你应该将优化的中心聚焦在单次脚本的执行时间和脚本的网络下载上，主要关注以下三点内容：

• 提升单次脚本的执行速度，避免 JavaScript 的长任务霸占主线程，这样可以使得页面快速响应交互；
• 避免大的内联脚本，因为在解析 HTML 的过程中，解析和编译也会占用主线程；
• 减少 JavaScript 文件的容量，因为更小的文件会提升下载速度，并且占用更低的内存。