1.内存管理：

不论什么样的编程语言，在代码执行的过程中都是需要给他分配内存的，有些编程语言（C、C++）需要我们自己手动管理内存，例如C语言，他们提供了内存管理的接口，比如malloc()用于分配所需的内存空间，free()用于释放之前所分配的内存空间。有的编程语言（Java、JavaScript）会自动帮我们管理内存

注意： 不论是手动还是自动，内存的管理都会有如下生命周期：
第一步：内存分配：例如当我们定义变量时，系统会自动为其分配内存
第二步：内存使用：在对变量进行读写时发生，（存放一些东西，比如对象，变量）
第三步：内存回收不需要使用时，对其进行释放

let n = 34 // 给数值变量分配内存
let str = 'java' // 给字符串分配内存

let obj = {
  name: 'C语言',
  age: 18,
} // 给对象及其包含的值分配内存

// 给数组及其包含的值分配内存（类似于对象）
let arr = [1, null, 'abc']

function fun(a) {
  return a + 2
} // 给函数（可调用的对象）分配内存

// 函数表达式也能分配一个对象
Element.addEventListener(
  'click',
  event => {
    console.log(event)
  },
  false,
)

注意： 有些时候并不会重新分配内存，如下面这段代码：

// 给数组及其包含的值分配内存（类似于对象）
let arr = [1, null, 'abc']

let arr2 = [arr[0], arr[2]]
// 这里并不会重新对分配内存，而是直接存储原来的那份内存

2.Javascript的内存管理：

1.为什么要学习内存管理以及垃圾回收算法？

JavaScript中的内存释放是自动的，释放的时机就是某些值（内存地址）不在使用了，JavaScript就会自动释放其占用的内存。其实大多数内存管理的问题都在这个阶段，在这里最艰难的任务就是找到那些不需要的变量。虽然说现在打高级语言都有自己垃圾回收机制，虽然现在的垃圾回收算法很多，但是也无法智能的回收所有的极端情况。

2.JavaScript会在定义数据时为我们分配内存,但是内存分配的方式是一样的么？

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

3.如何利用工具监控内存？

由于JavaScript没有给我们提供操作内存的API，只能靠本身提供的内存管理，但是我们并不知道实际上的内存管理是什么样的。而有时我们需要时刻关注内存的使用情况，Performance工具提供了多种监控内存的方式。

(1)Performance使用步骤：
首先我们打开Chrome浏览器（这里我们使用的是Chrome浏览器，其他浏览器也是可以的），在地址栏中输入我们的目标地址，然后打开开发者工具，选择【性能】面板。选择性能面板后开启录制功能，然后去访问具体界面，模仿用户去执行一些操作，然后停止录制，最后我们可以在分析界面中分析记录的内存信息。
在这里插入图片描述

(2)出现内存的问题主要有如下几种表现：

页面出现延迟加载或经常性暂停，它的底层就伴随着频繁的垃圾回收的执行；为什么会频繁的进行垃圾回收，可能是一些代码直接导致内存爆满而且需要立刻进行垃圾回收。(后续会进行补充相关说明)

(3)通过内存变化图进行分析其原因：

页面持续性出现糟糕的性能表现，也就是说在我们使用的过程中，页面给我们的感觉就是一直不好用，它的底层我们一般认为都会存在内存膨胀，所谓的内存膨胀就是当前页面为了达到某种速度从而申请远大于本身需要的内存，申请的这个存在超过了我们设备本身所能提供的大小，这个时候我们就能感知到一个持续性的糟糕性能的体验。导致内存膨胀的问题有可能是我们代码的问题，也有可能是设备本身就很差劲，想要分析定位并解决的话需要我们在多个设备上进行反复的测试。

页面的性能随着时间的延长导致页面越来越差，加载时间越来越长，出现这种问题的原因可能是由于代码的原因出现内存泄露。想要检测内存是否泄漏，我们可以通过内存总视图来监听我们的内存，如果内存是持续升高的，就可能已经出现了内存泄露。

(4)通过浏览器监控内存的方式：

1.浏览器提供的任务管理器

在这里插入图片描述

在浏览器中按【Shift】+【ESC】键即可打开浏览器提供的任务管理器，上图中我们可以看到辅助框架标签页的【内存占用空间】表示的这个页面的DOM在浏览器中所占的内存，如果不断增加就表示有新的DOM在创建；而后面的【JavaScript使用的内存】（默认不开启，需要通过右键开启）表示的是JavaScript中的堆，而括号中的大小表示JavaScript中的所有可达对象。

2.Timeline时序图

在这里插入图片描述

可以看到内存随着时间的变化，其实就是点击之后创建数组内存飙升，随后垃圾回收，内存又被释放

3.JavaScript的垃圾回收：

JavaScript中的内存管理是自动的，在创建对象时会自动分配内存，当对象不在被引用或者不能从根上访问时，就会被当做垃圾给回收掉。

在手动管理内存的语言中，我们需要通过一些方式自己来释放不再需要的内存，比如free函数
我们语言的运行环境，比如java的运行环境JVM，javascript的运行环境js引擎，都会有垃圾回收器，也就是GC

注意：JavaScript中的可达对象简单的说就是可以访问到的对象，不管是通过引用还是作用域链的方式，只要能访问到的就称之为可达对象。可达对象的可达是有一个标准的，就是必须从根上出发是否能被找到；这里的根可以理解为JavaScript中的全局变量对象，在浏览器环境中就是window、在Node环境中就是global。

(1)为了更好的理解引用的概念，看下面这一段代码：

let person = {
  name: '一碗周',
}
let man = person
person = null

如下图：

在这里插入图片描述
根据上面那个图我们可以看到，最终这个{ name: ‘一碗周’ }是不会被当做垃圾给回收掉的，因为还具有一个引用。

(2)现在我们来理解一下可达对象，代码如下：

function groupObj(obj1, obj2) {
  obj1.next = obj2
  obj2.prev = obj1

  return {
    obj1,
    obj2,
  }
}
let obj = groupObj({ name: '大明' }, { name: '小明' })

调用groupObj()函数的的结果obj是一个包含两个对象的一个对象，其中obj.obj1的next属性指向obj.obj2；而obj.obj2的prev属性又指向obj.obj2。最终形成了一个无限套娃。

如下图：
在这里插入图片描述
(3)现在来看下面这段代码：

delete obj.obj1
delete obj.obj2.prev

如下图：
在这里插入图片描述

此时的obj1就被当做垃圾给回收了。

注意：GC是怎么知道哪些对象不再使用呢？

这里就要用到GC的实现以及对应的算法

3.1 常见的GC算法

(1)引用计数

引用计数算法的核心就是引用计数器，由于引用计数器的存在，也就导致该算法与其他GC算法有所差别。引用计数器的改变是在引用关系发生改变时就会发生变化，当引用计数器变为0的时候，该对象就会被当做垃圾回收。

当一个对象有一个引用指向它时，那么这个对象的引用就+1
当一个对象的引用为0时，这个对象就可以被销毁掉

我们通过一段代码来看一下：

// { name: '一碗周' } 的引用计数器 + 1
let person = {
  name: '一碗周',
}
// 又增加了一个引用，引用计数器 + 1
let man = person
// 取消一个引用，引用计数器 - 1
person = null
// 取消一个引用，引用计数器 - 1。此时 { name: '一碗周' } 的内存就会被当做垃圾回收
man = null

引用计数算法的优点如下：

最大限度减少程序暂停，这里因为发现垃圾就立刻回收了，减少了程序因内存爆满而被迫停止的现象。
发现垃圾时立即回收；

引用计数算法的缺点如下：

无法回收循环引用的对象；

就比如下面这段代码,就无法解决循环引用的问题

function fun() {
  const obj1 = {}
  const obj2 = {}
  obj1.next = obj2
  obj2.prev = obj1
  return '一碗周'
}
fun()

上面的代码中，当函数执行完成之后函数体的内容已经是没有作用的了，但是由于obj1和obj2都存在不止1个引用，导致两种都无法被回收，就造成了空间内存的浪费。并且时间开销大，这是因为引用计数算法需要时刻的去监控引用计数器的变化。

(2)标记清除

标记清除算法解决了引用计数算法的⼀些问题，并且实现较为简单，在V8引擎中会有被⼤量的使⽤到。

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

在这里插入图片描述
**注意：**对于上图的M、N就会被认为不可用的对象，就会被清除掉

执行过程： 将整个垃圾回收操作分为标记和清除两个阶段完成。第一个阶段就是遍历所有对象，标记所有的可达对象；第二个阶段就是遍历所有对象清除没有标记的对象，同时会抹掉所有已经标记的对象，便于下次的工作。为了区分可用对象与垃圾对象,我们需要在每⼀个对象中记录对象的状态。因此，我们在每⼀个对象中加⼊了⼀个特殊的布尔类型的域，叫做marked。默认情况下，对象被创建时处于未标记状态。所以， marked 域被初始化为false。

标记清除算法的图解如下图所示：
在这里插入图片描述
总结： 标记清除算法最大的优点就是解决了引用计数算法无法回收循环引用的对象的问题。

就比如下面这段代码：

function fun() {
  const obj1 = {},
    obj2 = {},
    obj3 = {},
    obj4 = {},
    obj5 = {},
    obj6 = {}
  obj1.next = obj2

  obj2.next = obj3
  obj2.prev = obj6

  obj4.next = obj6
  obj4.prev = obj1

  obj5.next = obj4
  obj5.prev = obj6
  return obj1
}
const obj = fun()

当函数执行完毕后obj4的引用并不是0，但是使用引用计数算法并不能将其作为垃圾回收掉，而使用标记清除算法就解决了这个问题,而标记清除算法的缺点也是有的，这种算法会导致内存碎片化，地址不连续；还有就是使用标记清除算法即使发现了垃圾对象不能立刻清除，需要到第二次去清除。

(3)标记整理

标记整理算法可以看做是标记清除算法的增强型，其步骤也是分为标记和清除两个阶段。但是标记整理算法那的清除阶段会先进行整理，移动对象的位置，最后进行清除。

步骤如下图：

在这里插入图片描述
回收期间的同时会将保留的存储对象搬运汇集到连续的内存空间，从而整合空闲空间，避免内存碎片化）

3.2 其他GC算法优化补充

JS引擎比较广泛的采用的就是可达性中的标记清除算法，当然类似于V8引擎为了进行更好的优化，它在算法的实现细节上也会结合一些其他的算法。

分代收集：对象被分成两组：“新的"和"旧的”（许多对象出现，完成他们的工作并很快死去，他们可以很快被清理，那些长期存活的对象会变得老旧，而且被检查的频次也会减少）
增量收集：如果有许多对象，并且我们试图一次遍历并标记整个对象集，则可能需要一段时间，并在执行过程中带来明显的延迟，所以引擎试图将垃圾收集工作分成几部分来做，然后将这几部分会逐一进行处理，这样会有许多微小的延迟而不是一个大的延迟
闲时收集：垃圾收集器只会在CPU空闲的时候尝试运行，以减少可能对代码执行的影响

原文链接：https://blog.csdn.net/m0_49662897/article/details/126619566