前端知识：JS内存泄漏

目录

一、什么是内存泄漏

二、垃圾回收机制

1、标记清除——JS最常用的垃圾回收机制

2、引用计数

 三、常见的内存泄漏情况

1、意外的全局变量

2、定时器

3、闭包

4、没有清理DOM元素

---

一、什么是内存泄漏

在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存，并非指内存在物理内存泄漏是上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费。
C语言中，由于是手动管理内存，因此内存泄漏是经常出现的事情。

C语言中，malloc用来申请内存，使用完毕后，比较自己用free方法释放内存。这显然很不智能，所以大多数语言提供自动内存管理，减轻程序员负担，这被称为“垃圾回收机制”。

二、垃圾回收机制

JS具有自动垃圾回收机制（GC：Garbage Collecation），也就是说，执行环境会负责管理代码执行过程中使用的内存。
原理：垃圾收集器会定期找出那些不再继续使用的变量，然后释放其内存；
通常情况下有两种实现方式：
标记清除；
引用计数

1、标记清除——JS最常用的垃圾回收机制

当变量进入执行环境时，就标记这个变量为“进入环境”。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境”。
垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后会将所有在上下文的变量，以及被在上下文中变量引用的变量的标记去掉。
在此之后再被加上标记的变量就是待删除的了，原因时任何在上下文中变量都访问不到它们了；
随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回他们的内存。
 

var m = 0,n = 19 // 把 m,n,add() 标记为进入环境。
add(m, n) // 把 a, b, c标记为进入环境。
console.log(n) // a,b,c标记为离开环境，等待垃圾回收。
function add(a, b) {
  a++
  var c = a + b
  return c
}

2、引用计数

语言引擎有一张“引用表”，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

如果一个值不再需要了，引用数却不为0，垃圾回收机制无法释放这块内存，从而导致内存泄漏。

const arr = [1, 2, 3, 4]; //数组是一个值，会占用内存，变量arr是仅有的对这个值的引用，因此引用次数为1。
console.log('hello world');  //这里并没有用到arr，但还是会持续占用内存

• 如果需要这块代码被垃圾回收机制释放，那么只需要设置arr=null，数组的引用次数就为0了，就被垃圾回收了。

 三、常见的内存泄漏情况

1、意外的全局变量

// 情况1，没有修饰符
function foo(arg) {
    bar = "this is a hidden global variable";
}

// 情况2，this创建的全局变量
function foo() {
    this.variable = "potential accidental global";
}
// foo 调用自己，this 指向了全局对象（window）
foo();

2、定时器

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        // 处理 node 和 someResource
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

如果id为Node的元素从DOM中移除，该定时器仍会存在，同时，因为回调函数中包含对someResource的引用，定时器外面的someResource也不会被释放

3、闭包

function bindEvent() {
  var obj = document.createElement('XXX');
  var unused = function () {
    console.log(obj, '闭包内引用obj obj不会被释放');
  };
  obj = null; // 解决方法
}

闭包维持函数内局部变量，使其得不到释放。

4、没有清理DOM元素

const refA = document.getElementById('refA');
document.body.removeChild(refA); // dom删除了
console.log(refA, 'refA'); // 但是还存在引用能console出整个div 没有被回收
refA = null;
console.log(refA, 'refA'); // 解除引用

没有清理对DOM元素的引用同样造成内存泄露，包括使用事件监听addEventListener监听的时候，在不监听的情况下使用removeEventListener取消对事件监听。