[浏览器工作原理与实践] Day 07 | V8工作原理相关知识点整理

宋00
550 阅读10分钟

前言

学习资源来自极客时间 - 李兵老师 《浏览器工作原理与实践》。接下来，让我们一起每日打卡，check完成所有课程吧 ~

内容预告

阅读本文你会学到什么？

  1. 栈空间和堆空间：数据是如何存储的？
  2. 垃圾回收：垃圾数据是如何自动回收的？
  3. 编译器和解释器：V8是如何执行一段JavaScript代码的？

JavaScript的内存机制

记住下面的概念：

1. JavaScript是弱类型的、动态的语言。

  • 把在使用之前需要确认其变量数据类型的称为静态语言。

  • 把在运行过程中需要检查数据类型的语言称为动态语言。

  • JavaScript是动态语言，因为在声明变量之前并不需要确认其数据类型。

支持隐式类型转换的语言称为弱类型语言，不支持隐式类型转换的语言称为强类型语言。

这些特点意味着什么？

  • 弱类型，意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型，JavaScript 引擎在运行代码的时候自己会计算出来。

  • 动态，意味着你可以使用同一个变量保存不同类型的数据。动态，意味着你可以使用同一个变量保存不同类型的数据。

2. JavaScript的三种类型内存空间：代码空间、栈空间、堆空间

  • 代码空间：主要存储可执行代码的
  • 栈空间：保存原始类型的数据值
  • 堆空间： 保存引用类型的值

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

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

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

3. JavaScript 中的赋值操作

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

再谈闭包

function foo() {
    var myName = "极客时间"
    let test1 = 1
    const test2 = 2
    var innerBar = { 
        setName:function(newName){
            myName = newName
        },
        getName:function(){
            console.log(test1)
            return myName
        }
    }
    return innerBar
}
var bar = foo()
bar.setName("极客邦")
bar.getName()
console.log(bar.getName())

执行这段代码的时候，有过这样的分析：

由于变量myName、test1、test2 都是原始类型数据，所以在执行 foo 函数的时候，它们会被压入到调用栈中；当 foo 函数执行结束之后，调用栈中 foo 函数的执行上下文会被销毁，其内部变量 myName、test1、test2 也应该一同被销毁。

但是，当foo函数的执行上下文销毁时，由于foo函数产生了闭包，所以变量myName 和 test1 并没有被销毁，而是保存在内存中，那么应该如何解释这个现象呢？

  1. 当JavaScript引擎执行到foo函数时，首先会编译，并创建一个空执行上下文。
  2. 在编译过程中，遇到内部函数setName, JavaScript引擎还要对内部函数做一次快速词法扫描，发现该内部函数引用了foo函数中的myName变量，由于内部函数引用了外部函数的变量，所以JavaScript引擎判断这是个闭包，于是在堆空间创建换一个“closure(foo)”的对象（这是一个内部对象，JavaScript 是无法访问的），用来保存 myName 变量。
    • 遇到变量之所以有查找过程，是因为该变量的地址还没确定，需要通过作用域链来查找正确的地址，但是闭包中的变量的地址是确定的，就不在需要再查找作用域了，直接将闭包中地址写在了执行代码中，正是由于该地址引用，结束时才不会将闭包销毁。所以从内存模型来理解闭包的话，闭包就是堆中一块地址，且该地址只能被引用的函数持有。从语言角度理解的话，闭包是堆内存+引用函数，也就说的过去了。毕竟除了引用函数，没有谁可以再访问这块内存了。
  3. 接着继续扫描到 getName 方法时，发现该函数内部还引用变量 test1，于是 JavaScript 引擎又将 test1 添加到“closure(foo)”对象中。这时候堆中的“closure(foo)”对象中就包含了 myName 和 test1 两个变量了。
  4. 由于 test2 并没有被内部函数引用，所以 test2 依然保存在调用栈中。 通过上面的分析，可以画出执行到foo函数中“return innerBar”语句时的调用栈状态，如下图所示：

image.png 从上图你可以清晰地看出，当执行到 foo 函数时，闭包就产生了；当 foo 函数执行结束之后，返回的 getName 和 setName 方法都引用“clourse(foo)”对象，所以即使 foo 函数退出了，“clourse(foo)”依然被其内部的 getName 和 setName 方法引用。所以在下次调用bar.setName或者bar.getName时，创建的执行上下文中就包含了“clourse(foo)”。

总的来说，产生闭包的核心有两步：第一步是需要预扫描内部函数；第二步是把内部函数引用的外部变量保存到堆中。

垃圾回收

栈垃圾回收：

当函数执行结束，JS引擎通过想下移动ESP指针（记录调用栈当前执行状态的指针），来销毁该函数保存在栈中的执行上下文（变量环境、词法环境、this、outer）

堆垃圾回收：

  1. 代际假说

    • 大部分对象存活时间很短
    • 不被销毁的对象，会活的更久

  2. 分类

V8中把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。

  1. 新生代 算法：Scavenge 算法。

原理：

  • 1）把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域。
  • 2）新加入的对象都会存放到对象区域，当对象区域快写满时，就需要执行一次垃圾清理操作。
  • 3）先对对象区域的垃圾做标记，标记完成后，把这些存活的对象复制到空闲区域中。
  • 4）完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。

对象晋升策略： 经过两次垃圾回收依然还存活的对象，会被移动到老生区中。

  1. 老生带 算法：标记 - 清除（Mark-Sweep）算法：

原理：

  • 1）标记：标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。
  • 2）清除：将垃圾数据进行清除。

碎片：

对一块内存多次执行标记 - 清除算法后，会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存。

算法：标记 - 整理（Mark-Compact）算法：

原理：

  • 1）标记：和标记 - 清除的标记过程一样，从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素标记为活动对象。
  • 2）整理：让所有存活的对象都向内存的一端移动
  • 3）清除：清理掉端边界以外的内存

优化算法：增量标记（Incremental Marking）算法 原理：

  • 1）为了降低老生代的垃圾回收而造成的卡顿
  • 2）V8把一个完整的垃圾回收任务拆分为很多小的任务
  • 3）让垃圾回收标记和 JavaScript 应用逻辑交替进行

全停顿

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

编译器、解释器

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

AST的一些应用：

  • 代码转换器Babel
  • ESLint

AST如何生成的？

第一阶段. 分词（tokenize），又称词法分析

  • token指语法上不可能再分的、最小的单个字符或字符串

第二阶段. 解析（parse），又称为语法分析

  • 将上一步生成的token数据，根据语法规则转为AST

生成字节码

字节码：介于AST与机器码之间的一种代码。需要通过解释器将其转换为机器码后才能执行。

执行代码

第一次执行的字节码：解释器Ignition会逐条解释执行。

解释器的作用：

  • 生成字节码
  • 解释执行字节码

解释执行字节码的过程中：

  • 发现热点代码（HotSpot）（比如一段代码被重复执行多次），后台的编译器TurboFan就会把该热点的字节码编译为高效的机器码
  • 当再次执行这段被优化的代码时，只需执行编译后的机器码，这样就大大提升了代码的执行效率。

即时编译（JIT） 具体到 V8，就是指解释器 Ignition 在解释执行字节码的同时，收集代码信息，当它发现某一部分代码变热了之后，TurboFan 编译器便闪亮登场，把热点的字节码转换为机器码，并把转换后的机器码保存起来，以备下次使用。

下图为JIT的工作过程： image.png

JavaScript 的性能优化

对于优化 JavaScript 执行效率， 你应该将优化的中心聚焦在单次脚本的执行时间和脚本的网络下载上：

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