JavaScript内存相关知识(内存泄露、垃圾回收机制)

素颜马尾好姑娘i 2022-11-14 13:28 206阅读 0赞

### 文章目录 ###

*  一、内存
 *  二、生命周期
 *  三、内存泄漏
 *  四、内存回收(垃圾回收)机制
 *   *  1.引用计数垃圾收集
     *  2.标记-清除算法
 *  五、JavaScript的内存分配
 *  六、内存泄漏场景
 *   *  1.意外的全局变量
     *  2.被遗忘的计时器
     *  3.被遗忘的事件监听器
     *  4.被遗忘的Set
     *  5.其他
 *  六、泄漏定位

# 一、内存 #

在硬件级别上，计算机内存由大量触发器组成。每个触发器包含几个晶体管，能够存储一个位。单个触发器可以通过唯一标识符寻址，因此我们可以读取和覆盖它们。因此，从概念上讲，我们可以把我们的整个计算机内存看作是一个巨大的位数组，我们可以读和写。

在JavaScript中我们无需在意内存的读写操作，因为这些Chrome都会帮我们处理好，我们需要做的就是避免变量或属性不能被正常回收即可。

# 二、生命周期 #

无论是什么程序语言，大家对内存的生命周期规定基本一致。

1.  分配你所需要的内存
2.  使用分配到的内存（读、写）
3.  不需要时将其释放\\归还

分配 使用 释放

# 三、内存泄漏 #

现代的高级语言绝大部分都是具备自动GC的能力的，如果发生了内存的泄漏，最大可能是由于疏忽或错误造成程序未能释放已经不再使用的内存导致的。

如果内存不需要的时候，如果此时没有被释放，那么就会造成内存泄漏了。

简单总结一下：内存泄漏就是无用的变量占据着内存，无法释放归还内存。严重的时候甚至造成页面卡顿，崩溃。

*  堆栈溢出  
     当储存的数据导到某一限制时就会造成堆栈溢出
 *  内存泄漏  
     当不断向堆中存储数据，而不进行清理，这就是内存泄漏

# 四、内存回收(垃圾回收)机制 #

内存回收我们一般也称为垃圾回收即GC（Garbage Collection）。

内存泄漏一般都是发生在这一步，虽说现在的GC机制已经能回收绝大部分垃圾内存，但是还是存在回收不了的情况，此时我们就需要去手动清理。

下面说一下两种常见的GC算法

[参考文章][Link 1]

## 1.引用计数垃圾收集 ##

这是最初级的垃圾收集算法。  
此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。  
如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。

例子：

var o = {
      a: {
        b:2
      }
    };
    // 两个对象被创建，一个作为另一个的属性被引用，另一个被分配给变量o
    // 很显然，没有一个可以被垃圾收集
    
    
    var o2 = o; // o2变量是第二个对“这个对象”的引用
    
    o = 1;      // 现在，“这个对象”只有一个o2变量的引用了，“这个对象”的原始引用o已经没有
    
    var oa = o2.a; // 引用“这个对象”的a属性
                   // 现在，“这个对象”有两个引用了，一个是o2，一个是oa
    
    o2 = "yo"; // 虽然最初的对象现在已经是零引用了，可以被垃圾回收了
               // 但是它的属性a的对象还在被oa引用，所以还不能回收
    
    oa = null; // a属性的那个对象现在也是零引用了
               // 它可以被垃圾回收了

**限制：循环引用**：

该算法有个限制：无法处理循环引用的事例。在下面的例子中，两个对象被创建，并互相引用，形成了一个循环。它们被调用之后会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收。

function f(){
      var o = {};
      var o2 = {};
      o.a = o2; // o 引用 o2
      o2.a = o; // o2 引用 o
    
      return "azerty";
    }
    
    f();

**循环引用实际例子**：

IE 6, 7 使用引用计数方式对 DOM 对象进行垃圾回收。该方式常常造成对象被循环引用时内存发生泄漏：

var div;
    window.onload = function(){
      div = document.getElementById("myDivElement");
      div.circularReference = div;
      div.lotsOfData = new Array(10000).join("*");
    };

在上面的例子里，myDivElement 这个 DOM 元素里的 circularReference 属性引用了 myDivElement，造成了循环引用。如果该属性没有显示移除或者设为 null，引用计数式垃圾收集器将总是且至少有一个引用，并将一直保持在内存里的 DOM 元素，即使其从DOM 树中删去了。如果这个 DOM 元素拥有大量的数据 (如上的 lotsOfData 属性)，而这个数据占用的内存将永远不会被释放。

## 2.标记-清除算法 ##

这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。

这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……从根开始，垃圾回收器将找到所有可以获得的对象和收集所有不能获得的对象。

这个算法比前一个要好，因为“有零引用的对象”总是不可获得的，但是相反却不一定，参考“循环引用”。

从2012年起，所有现代浏览器都使用了标记-清除垃圾回收算法。所有对JavaScript垃圾回收算法的改进都是基于标记-清除算法的改进，并没有改进标记-清除算法本身和它对“对象是否不再需要”的简化定义。

**循环引用不再是问题了**  
在上面引用计数的示例中，函数调用返回之后，两个对象从全局对象出发无法获取。因此，他们将会被垃圾回收器回收。第二个示例同样，一旦 div 和其事件处理无法从根获取到，他们将会被垃圾回收器回收。

**限制: 那些无法从根对象查询到的对象都将被清除**  
尽管这是一个限制，但实践中我们很少会碰到类似的情况，所以开发者不太会去关心垃圾回收机制。

# 五、JavaScript的内存分配 #

JavaScript不需要程序员手动分配内存，绝大多数情况下都能够自动完成内存的分配，使用，和回收等操作。

JavaScript对内存的管理机制是和内存的生命周期对应的，分配，使用，释放。

1.  记住JavaScript 定义变量就会自动分配内存的。我们只需了解 JavaScript 的内存是自动分配的就足够了。
2.  使用值的过程实际上是对分配内存进行读取与写入的操作。读取与写入可能是写入一个变量或者一个对象的属性值，甚至传递函数的参数。

# 六、内存泄漏场景 #

JavaScript 的内存回收机制虽然能回收绝大部分的垃圾内存，但是还是存在回收不了的情况。

## 1.意外的全局变量 ##

// 在全局作用域下定义
    function count(number) {
      // basicCount 相当于 window.basicCount = 2;
      basicCount = 2;
      return basicCount + number;
    }

使用eslint静态代码检查工具可以有效地避免  
相关文章：  
[前端项目(React)接入eslint静态代码检查及一些问题解决方案][React_eslint]

## 2.被遗忘的计时器 ##

当一个计时器启动的时候，无论外部怎么销毁内部是无法清理的，我们需要调用专门的清除函数去手动清理。

this.refreshInterval = setInterval(function() {
      // 轮询获取数据
      this.refresh()
    }, 2000)
    
    .........
    
    componentWillUnmount() {
       if(this.refreshInterval ){
           clearInterval(this.refreshInterval );
       }
    }

## 3.被遗忘的事件监听器 ##

<template>
      <div></div>
    </template>
    
    <script>
    export default {
      mounted() {
        window.addEventListener('resize', () => {
          // 这里做一些操作
        })
      },
    }
    </script>

组件销毁的时候，resize 事件还是在监听中，里面涉及到的内存都是没法回收的（浏览器会认为这是必须的内存，不是垃圾内存）  
这里我们需要

window.removeEventListener('resize', this.resizeEventCallback)

去完成对Listener的卸载。

## 4.被遗忘的Set ##

let map = new Set();
    let value = { test: 22};
    map.add(value);
    
    value= null;

需要改成

let map = new Set();
    let value = { test: 22};
    map.add(value);
    
    map.delete(value);
    value = null;

## 5.其他 ##

Map，订阅发布事件监听器，闭包，脱离 DOM 的引用等。  
[参考文章][Link 2]

# 六、泄漏定位 #

内存泄漏时，内存一般都是会周期性的增长，我们可以借助谷歌浏览器的开发者工具进行判别。

1.  通过google的开发者工具，切换到Performance选中Memory，点击录制。  
    如果内存平稳，不再递增，那么就是正常的，如果出现一直递增那么就有可能出现内存泄漏。
2.  查找位置，利用Memory录制快照，查找Shallow Size比较大的进行分析。

[参考文章][Link 2]

[参考文章https://blog.csdn.net/qq\_39903567/article/details/115010640][Link 1]

[Link 1]: https://blog.csdn.net/qq_39903567/article/details/115010640
[React_eslint]: https://blog.csdn.net/qq_39903567/article/details/115294455
[Link 2]: https://segmentfault.com/a/1190000020231307