2.V8工作原理

数据在内存中的存放

• JavaScript 是什么类型的语言
  • 每种编程语言都具有内建的数据类型，但它们的数据类型常有不同之处，使用方式也很不一样
  • 在使用之前就需要确认其变量数据类型的称为静态语言。
  • 在运行过程中需要检查数据类型的语言称为动态语言。
  • JavaScript 就是动态语言，因为在声明变量之前并不需要确认其数据类型。
  • JavaScript 是一种弱类型的、动态的语言。
    • 弱类型，意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型，JavaScript 引擎在运行代码的时候自己会计算出来。
    • 动态，意味着你可以使用同一个变量保存不同类型的数据。
• 隐式转换

int a = 1
bool b = true
b = a

• 编译器会把 int 型的变量悄悄转换为 bool 型的变量，我们通常把这种偷偷转换的操作称为隐式类型转换。
• 支持隐式类型转换的语言称为弱类型语言，不支持隐式类型转换的语言称为强类型语言。
• C 和 JavaScript 都是弱类型语言。

• 内存空间
  • js的数据类型
    • Boolean | Null | Undefined | Number | BigInt | String | Symbol | Object
    • 前7种为原始类型 Object为引用类型 它们在内存中存放的位置不一样
    • 原始类型的数据值都是直接保存在“栈”中的，引用类型的值是存放在“堆”中的。
  • 代码空间
    • 存储可执行代码的
  • 栈空间
    • 调用栈:存储执行上下文
  • 堆空间
    • 存储对象 存储之后对象会有一个在堆中的地址，再把这个地址写进对应变量的值。
    • 所以在栈中只是保存着变量对象的引用地址，当js需要访问该数据时，是通过栈中的引用地址来访问的，相当于多了一道流程。
  • 不把所有数据都存放在栈中的原因：
    • JavaScript 引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。
    • 通常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。
    • 而引用类型的数据占用的空间都比较大，所以这一类数据会被存放到堆中，堆空间很大，能存放很多大的数据，不过缺点是分配内存和回收内存都会占用一定的时间。

赋值操作

• 原始类型的赋值会完整复制变量值，而引用类型的赋值是复制引用地址。

闭包

• 当外部函数的执行上下文销毁时，由于该外部函数产生了闭包，所以被引用的变量并没有被销毁，而是保存在内存中。
• 分析：
  • 当 JavaScript 引擎执行到该外部函数时，首先会编译，并创建一个空执行上下文。
  • 在编译过程中，遇到内部函数，JavaScript 引擎还要对内部函数做一次快速的词法扫描，发现该内部函数引用了外部函数中的变量，由于是内部函数引用了外部函数的变量，所以 JavaScript 引擎判断这是一个闭包，于是在堆空间创建一个“closure(外部函数)”的对象（这是一个内部对象，JavaScript 是无法访问的），用来保存被引用的变量。
  • 当执行到外部函数时，闭包就产生了；当外部函数执行结束之后，返回的内部函数都引用“clourse(外部函数)”对象，所以即使外部函数退出了，“clourse(外部函数)”依然被其内部函数引用。所以在下次调用内部函数时，创建的执行上下文中就包含了“clourse(外部函数)”。
  • 产生闭包的核心有两步：第一步是需要预扫描内部函数；第二步是把内部函数引用的外部变量保存到堆中。

垃圾回收

• 有些数据被使用之后，可能就不再需要了，我们把这种数据称为垃圾数据。
• 如果这些垃圾数据一直保存在内存中，那么内存会越用越多，所以我们需要对这些垃圾数据进行回收，以释放有限的内存空间。
• 内存泄漏
  • 一段数据已经不再需要了，但是又没有销毁，那么这种情况就被称为内存泄漏。
• 垃圾回收策略
  • 手动回收
    • 何时分配内存、何时销毁内存都是由代码控制的。
  • 自动回收
    • 由垃圾回收器来释放的。
• 调用栈中的数据是如何回收的
  • 记录当前执行状态的指针（称为 ESP）
  • 指向调用栈中的func函数的执行上下文，表示当前正在执行的func函数。
  • 当func函数执行完成之后，函数执行流程就进入了 foo 函数，那这时就需要销毁 func函数的执行上下文了。ESP 这时候就帮上忙了，JavaScript 会将 ESP 下移到 foo 函数的执行上下文，这个下移操作就是销毁 func函数执行上下文的过程。
  • 当 func函数执行结束之后，ESP 向下移动到 foo 函数的执行上下文中，上面 func的执行上下文虽然保存在栈内存中，但是已经是无效内存了。
  • 当 foo 函数再次调用另外一个函数时，这块内容会被直接覆盖掉，用来存放另外一个函数的执行上下文。
  • 总结：当一个函数执行结束之后，JavaScript 引擎会通过向下移动 ESP 来销毁该函数保存在栈中的执行上下文。
• 堆中的数据是如何回收的
  • 要回收堆中的垃圾数据，就需要用到 JavaScript 中的垃圾回收器了。
  • 代际假说和分代收集
    • 代际假说 (The Generational Hypothesis)
      • 两个特点：
      • 第一个是大部分对象在内存中存在的时间很短，简单来说，就是很多对象一经分配内存，很快就变得不可访问；
      • 第二个是不死的对象，会活得更久。
    • 分代收集
      • 新生代
        • 存放的是生存时间短的对象
        • 通常只支持 1～8M 的容量
      • 老生代
        • 存放的生存时间久的对象
        • 支持的容量更大
      • V8 分别使用两个不同的垃圾回收器，以便更高效地实施垃圾回收。
        • 副垃圾回收器，主要负责新生代的垃圾回收。
        • 主垃圾回收器，主要负责老生代的垃圾回收。
      • 垃圾回收器的工作流程
        • 第一步是标记空间中活动对象和非活动对象。
          • 所谓活动对象就是还在使用的对象，非活动对象就是可以进行垃圾回收的对象。
        • 第二步是回收非活动对象所占据的内存。
          • 其实就是在所有的标记完成之后，统一清理内存中所有被标记为可回收的对象。
        • 第三步是做内存整理。
          • 一般来说，频繁回收对象后，内存中就会存在大量不连续空间，我们把这些不连续的内存空间称为内存碎片。当内存中出现了大量的内存碎片之后，如果需要分配较大连续内存的时候，就有可能出现内存不足的情况。所以最后一步需要整理这些内存碎片，但这步其实是可选的，因为有的垃圾回收器不会产生内存碎片。
      • 主垃圾回收器
        • 主要负责老生区中的垃圾回收
        • 除了新生区中晋升的对象，一些大的对象会直接被分配到老生区。
        • 老生区中的对象有两个特点，一个是对象占用空间大，另一个是对象存活时间长。
        • 主垃圾回收器是采用标记 - 清除（Mark-Sweep）的算法进行垃圾回收的。
        • 垃圾回收过程：
          • 首先是标记过程阶段。标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。即遍历调用栈，没有找到引用 1003 地址的变量，也就意味着 1003 这块数据为垃圾数据，被标记为红色。由于 1050 这块数据被变量引用了，所以这块数据会被标记为活动对象。
          • 接下来是垃圾的清除过程。是清除掉红色标记数据的过程。
          • 会产生大量不连续的内存碎片，碎片过多会导致大对象无法分配到足够的连续内存，
          • 于是又产生了另外一种算法——标记 - 整理（Mark-Compact），这个标记过程仍然与标记 - 清除算法里的是一样的，但后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动，然后直接清理掉端边界以外的内存。
      • 副垃圾回收器
        • 主要负责新生区的垃圾回收
        • 大多数小的对象都会被分配到新生区，所以说这个区域虽然不大，但是垃圾回收还是比较频繁的。
        • 新生代中用 Scavenge 算法来处理。所谓 Scavenge 算法，是把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域。
        • 新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作。
        • 垃圾回收过程：
          • 首先要对对象区域中的垃圾做标记
          • 标记完成之后，就进入垃圾清理阶段，副垃圾回收器会把这些存活的对象复制到空闲区域中，同时它还会把这些对象有序地排列起来，所以这个复制过程，也就相当于完成了内存整理操作，复制后空闲区域就没有内存碎片了。
          • 完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。这样就完成了垃圾对象的回收操作，同时这种角色翻转的操作还能让新生代中的这两块区域无限重复使用下去。
          • 由于新生代中采用的 Scavenge 算法，所以每次执行清理操作时，都需要将存活的对象从对象区域复制到空闲区域。但复制操作需要时间成本，如果新生区空间设置得太大了，那么每次清理的时间就会过久，所以为了执行效率，一般新生区的空间会被设置得比较小。
          • 也正是因为新生区的空间不大，所以很容易被存活的对象装满整个区域。为了解决这个问题，JavaScript 引擎采用了对象晋升策略，也就是经过两次垃圾回收依然还存活的对象，会被移动到老生区中。

全停顿

• JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）。
• 问题：
  • 如果时间花销过大，那么应用的性能和响应能力都会直线下降。
  • 在 V8 新生代的垃圾回收中，因其空间较小，且存活对象较少，所以全停顿的影响不大，但老生代就不一样了。如果在执行垃圾回收的过程中，占用主线程时间过久，就像上面图片展示的那样，花费了 200 毫秒，在这 200 毫秒内，主线程是不能做其他事情的。比如页面正在执行一个 JavaScript 动画，因为垃圾回收器在工作，就会导致这个动画在这 200 毫秒内无法执行的，这将会造成页面的卡顿现象。
• 解决：
  • 为了降低老生代的垃圾回收而造成的卡顿，V8 将标记过程分为一个个的子标记过程，同时让垃圾回收标记和 JavaScript 应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法。
  • 使用增量标记算法，可以把一个完整的垃圾回收任务拆分为很多小的任务，这些小的任务执行时间比较短，可以穿插在其他的 JavaScript 任务中间执行，这样当执行上述动画效果时，就不会让用户因为垃圾回收任务而感受到页面的卡顿了。

• 两害相权取其轻，两利相权取其重。没有一种算法适合所有的场景。

内存泄漏

• 解决方法
• 确定不使用的临时变量置为null，当前es6普及场景下少使用闭包也是一种方法。

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

• 编译器和解释器
  • 之所以存在编译器和解释器，是因为机器不能直接理解我们所写的代码，所以在执行程序之前，需要将我们所写的代码“翻译”成机器能读懂的机器语言。按语言的执行流程，可以把语言划分为编译型语言和解释型语言。
  • 编译型语言
    • 在程序执行之前，需要经过编译器的编译过程，并且编译之后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译了。
  • 解释型语言
    • 解释型语言编写的程序，在每次运行时都需要通过解释器对程序进行动态解释和执行。
• 编译器和解释器是如何“翻译”代码
  • 编译器： 源代码 -(词法分析|语法分析)-> AST -(词义分析)-> 中间代码 -(代码优化)-> 二进制文件 -(直接执行)-> 执行
  • 解释器： 源代码 -(词法分析|语法分析)-> AST -(词义分析)-> 字节码 -(解释执行)-> 执行
  • 具体流程：
    • 1. 生成抽象语法树（AST）和执行上下文
      • 将源代码转换为抽象语法树，并生成执行上下文
        • 抽象语法树：
        • 无论使用的是解释型语言还是编译型语言，在编译过程中，它们都会生成一个 AST。这和渲染引擎将 HTML 格式文件转换为计算机可以理解的 DOM 树的情况类似。
        • AST 的结构和代码的结构非常相似，其实你也可以把 AST 看成代码的结构化的表示，编译器或者解释器后续的工作都需要依赖于 AST，而不是源代码。
        • AST 是非常重要的一种数据结构，在很多项目中有着广泛的应用。其中最著名的一个项目是 Babel。
          • Babel
          • Babel 是一个被广泛使用的代码转码器，可以将 ES6 代码转为 ES5 代码。
          • Babel 的工作原理就是先将 ES6 源码转换为 AST，然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST，最后利用 ES5 的 AST 生成 JavaScript 源代码。
          • ESLint
          • ESLint 是一个用来检查 JavaScript 编写规范的插件。
          • 其检测流程也是需要将源码转换为 AST，然后再利用 AST 来检查代码规范化的问题。
        • 如何生成AST
          • 第一阶段是分词（tokenize），又称为词法分析。
            • 作用是将一行行的源码拆解成一个个 token。所谓 token，指的是语法上不可能再分的、最小的单个字符或字符串。
            • var myName = “极客时间”
            • 其中关键字“var”、标识符“myName” 、赋值运算符“=”、字符串“极客时间”四个都是 token，而且它们代表的属性还不一样。
          • 第二阶段是解析（parse），又称为语法分析。
            • 将上一步生成的 token 数据，根据语法规则转为 AST。
            • 如果源码符合语法规则，这一步就会顺利完成。但如果源码存在语法错误，这一步就会终止，并抛出一个“语法错误”。
          • 这就是 AST 的生成过程，先分词，再解析。
          • 有了 AST 后，那接下来 V8 就会生成该段代码的执行上下文。
    • 2. 生成字节码
      • 解释器 (Ignition)根据 AST 生成字节码，并解释执行字节码。
      • 一开始 V8 并没有字节码，而是直接将 AST 转换为机器码，由于执行机器码的效率是非常高效的，所以这种方式在发布后的一段时间内运行效果是非常好的。
        • 随着 Chrome 在手机上的广泛普及，特别是运行在 512M 内存的手机上，内存占用问题也暴露出来了，因为 V8 需要消耗大量的内存来存放转换后的机器码。为了解决内存占用问题，V8 团队大幅重构了引擎架构，引入字节码，并且抛弃了之前的编译器，实现了现在的这套架构。
      • 字节码：
        • 字节码就是介于 AST 和机器码之间的一种代码。但是与特定类型的机器码无关，字节码需要通过解释器将其转换为机器码后才能执行。
        • 机器码所占用的空间远远超过了字节码，所以使用字节码可以减少系统的内存使用。
    • 3. 执行代码
      • 在 Ignition 执行字节码的过程中，如果发现有热点代码（HotSpot），比如一段代码被重复执行多次，这种就称为热点代码，那么后台的编译器 TurboFan 就会把该段热点的字节码编译为高效的机器码，然后当再次执行这段被优化的代码时，只需要执行编译后的机器码就可以了，这样就大大提升了代码的执行效率。
      • 字节码配合解释器和编译器，这种技术称为即时编译（JIT）。即“字节码 +JIT”技术。
      • 具体到 V8，就是指解释器 Ignition 在解释执行字节码的同时，收集代码信息，当它发现某一部分代码变热了之后，TurboFan 编译器便闪亮登场，把热点的字节码转换为机器码，并把转换后的机器码保存起来，以备下次使用。
      • 引入了字节码，就有弹性空间了，可以在内存和执行速度之间做调节。相比之前的V8，将JS代码全部编译成字节码，这种模式就没有协商的空间。

JavaScript 的性能优化

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

笔记内容来自极客时间李兵老师的《浏览器工作原理与实践》 学习收获了很多 感谢老师