【JavaScript由浅入深】深入理解JavaScript的运行原理之V8引擎与内存管理

【JavaScript由浅入深】深入理解JavaScript的运行原理之V8引擎与内存管理

一、认识V8引擎

1.1 JavaScript代码的执行

• JavaScript代码下载好之后，是如何一步步被执行的呢？
• 我们知道，浏览器内核是由两部分组成的，以webkit为例：
• WebCore：负责HTML解析、布局、渲染等等相关的工作；
• JavaScriptCore：解析、执行JavaScript代码；
• 另外一个强大的JavaScript引擎就是V8引擎。

1.2 V8引擎的执行原理

官方定义：

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

1.3 V8引擎的架构

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

• 词法分析（英文lexical analysis）
  • 将字符序列转换成token序列的过程。
  • token是记号化 （tokenization）的缩写
  • 词法分析器（lexical analyzer，简称lexer），也叫扫描器（scanner）
• 语法分析（英语：syntactic analysis，也叫 parsing）
  • 语法分析器也可以称之为 parser

二、v8引擎执行代码的大致流程

v8引擎执行流程：

• ⾸先会编译JavaScript 编译过程分为三步
• 1 词法分析(scanner)
  • 会将对应的每⼀⾏的代码的字节流分解成有意义的代码块 代码块被称为词法单元(token 进⾏ 记号化)
• 2 语法分析(parser)
  • 将对应的tokens分析成⼀个元素逐级嵌套的树 这个树称之为 抽象语法树(Abstract Syntax Tree AST) 这⾥也有对应的 pre-parser
• 3 将AST 通过Ignition解释器转换成对应的字节码(ByteCode) 交给CPU执⾏ 同时收集信息
  • 将可优化的信息 通过TurBoFan编译器 编译成更好使⽤的机器码交给CPU执⾏
  • 如果后续代码的参数类型发⽣改变 则会逆优化(Deoptimization)为字节码

三、认识内存管理

1.1 认识内存管理

• 不管什么样的编程语言，在代码的执行过程中都是需要给它分配内存的，不同的是某些编程语言需要我们自己手动的管理内存， 某些编程语言会可以自动帮助我们管理内存：
• 不管以什么样的方式来管理内存，内存的管理都会有如下的生命周期：
  • 第一步：分配申请你需要的内存（申请）；
  • 第二步：使用分配的内存（存放一些东西，比如对象等）；
  • 第三步：不需要使用时，对其进行释放；
• 不同的编程语言对于第一步和第三步会有不同的实现：
  • 手动管理内存：比如C、C++，包括早期的OC，都是需要手动来管理内存的申请和释放的（malloc和free函数）；
  • 自动管理内存：比如Java、JavaScript、Python、Swift、Dart等，它们有自动帮助我们管理内存；
• 对于开发者来说，JavaScript 的内存管理是自动的、无形的。
• 我们创建的原始值、对象、函数……这一切都会占用内存；
• 但是我们并不需要手动来对它们进行管理，JavaScript引擎会帮助我们处理好它；

1.2 JavaScript的内存管理

JavaScript会在定义数据时为我们分配内存

• JS对于原始数据类型内存的分配会在执行时， 直接在栈空间进行分配；
• JS对于复杂数据类型内存的分配会在堆内存中开辟一块空间，并且将这块空间的指针返回值 变量引用；

以下代码在内存结构中的表现形式如下：

  const name = "zhang"
  const age = 20
  const stu = {
    name: "lisa",
    age: 18
  }

1.3 JavaScript的垃圾回收

• 因为内存的大小是有限的，所以当内存不再需要的时候，我们需要对其进行释放，以便腾出更多的内存空间。
• 在手动管理内存的语言中，我们需要通过一些方式自己来释放不再需要的内存，比如free函数：
  • 但是这种管理的方式其实非常的低效，影响我们编写逻辑的代码的效率；
  • 并且这种方式对开发者的要求也很高，并且一不小心就会产生内存泄露；
• 所以大部分现代的编程语言都是有自己的垃圾回收机制：
  • 垃圾回收的英文是Garbage Collection，简称GC；
  • 对于那些不再使用的对象，我们都称之为是垃圾，它需要被回收，以释放更多的内存空间；
  • 而我们的语言运行环境，比如Java的运行环境JVM，JavaScript的运行环境js引擎都会内存垃圾回收器；
  • 垃圾回收器我们也会简称为GC，所以在很多地方你看到GC其实指的是垃圾回收器；

回收机制：

• Javascript 具有自动垃圾回收机制，会定期对那些不再使用的变量、对象所占用的内存进行释放，原理就是找到不再使用的变量，然后释放掉其占用的内存。
• JavaScript中存在两种变量：局部变量和全局变量。全局变量的生命周期会持续要页面卸载；而局部变量声明在函数中，它的生命周期从函数执行开始，直到函数执行结束，在这个过程中，局部变量会在堆或栈中存储它们的值，当函数执行结束后，这些局部变量不再被使用，它们所占有的空间就会被释放。
• 不过，当局部变量被外部函数使用时，其中一种情况就是闭包，在函数执行结束后，函数外部的变量依然指向函数内部的局部变量，此时局部变量依然在被使用，所以不会回收。

1.4 常见的垃圾回收的方法

1.4.1 引用计数

• 当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是加1。

• 相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。

• 当这个引用次数变为0时，说明这个变量已经没有价值，因此，在在机回收期下次再运行时，这个变量所占有的内存空间就会被释放出来。

• 这个算法有一个很大的弊端就是会产生循环引用

  function fun() {
      let obj1 = {};
      let obj2 = {};
      obj1.a = obj2; // obj1 引用 obj2
      obj2.a = obj1; // obj2 引用 obj1
  }
  

obj1和obj2通过属性进行相互引用，两个对象的引用次数都是2。当使用循环计数时，由于函数执行完后，两个对象都离开作用域，函数执行结束，obj1和obj2还将会继续存在，因此它们的引用次数永远不会是0，就会引起循环引用。

这种情况下，就要手动释放变量占用的内存：

obj1.a =  null
obj2.a =  null

1.4.2 标记清除

• 标记清除的核心思路是可达性（Reachability）
• 这个算法是设置一个根对象（root object），垃圾回收器会定期从这个根开始，找所有从根开始有引用到的对象，对于哪些 没有引用到的对象，就认为是不可用的对象；
• 这个算法可以很好的解决循环引用的问题

1.4.3 V8引擎中的垃圾回收的方法

• JS引擎比较广泛的采用的就是可达性中的标记清除算法，当然类似于V8引擎为了进行更好的优化，它在算法的实现细节上也会 结合一些其他的算法。
• 标记整理（Mark-Compact） 和“标记－清除”相似；
  • 不同的是，回收期间同时会将保留的存储对象搬运汇集到连续的内存空间，从而整合空闲空间，避免内存碎片化；
• 分代收集（Generational collection）—— 对象被分成两组：“新的”和“旧的”。
  • 许多对象出现，完成它们的工作并很快死去，它们可以很快被清理；
  • 那些长期存活的对象会变得“老旧”，而且被检查的频次也会减少；
• 增量收集（Incremental collection）
  • 如果有许多对象，并且我们试图一次遍历并标记整个对象集，则可能需要一些时间，并在执行过程中带来明显的延迟。
  • 所以引擎试图将垃圾收集工作分成几部分来做，然后将这几部分会逐一进行处理，这样会有许多微小的延迟而不是一个大的 延迟；
• 闲时收集（Idle-time collection）
  • 垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。

1.5 减少垃圾回收

虽然浏览器可以进行垃圾自动回收，但是当代码比较复杂时，垃圾回收所带来的代价比较大，所以应该尽量减少垃圾回收。

• 对数组进行优化： 在清空一个数组时，最简单的方法就是给其赋值为[ ]，但是与此同时会创建一个新的空对象，可以将数组的长度设置为0，以此来达到清空数组的目的。
• 对object进行优化： 对象尽量复用，对于不再使用的对象，就将其设置为null，尽快被回收。
• 对函数进行优化： 在循环中的函数表达式，如果可以复用，尽量放在函数的外面。

四、导致内存泄漏的情况

• 意外的全局变量： 由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。
• 被遗忘的计时器或回调函数： 设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
• 脱离 DOM 的引用： 获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。
• 闭包： 不合理的使用闭包，从而导致某些变量一直被留在内存当中。