js中的内存泄漏

简版

• 内存泄漏一般是指变量的内存没有及时的回收，导致内存资源浪费。一般有三种情况出现内存泄露比较多。（1）常见的声明了一个全局变量，但是又没有用上，那么就有点浪费内存了，（2）定时器没清除 （3）循环引用：A 对象里面有一个属性指向 B 对象，B 对象有一个属性指向 A 对象。互相引用
• 解决内存泄露：我们编译器有一个自动的内存清理。常见的主要是引用记数 和 标记清除。 谷歌浏览器主要是用标记清除，大概流程是给每一个变量添加一个标记，通过内部算法计算引用情况，当不使用的时候就会自动清除。如果遇到定时器的话，我一般会在页面关闭的时候手动清除。如果遇到循环引用，我一般会手动把变量赋值为 null 来清除

一、是什么

内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存

并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费

程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存

对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃

在

C

语言中，因为是手动管理内存，内存泄露是经常出现的事情。

char * buffer;
buffer = (char*) malloc(42);

// Do something with buffer

free(buffer);

上面是 C 语言代码，

malloc

方法用来申请内存，使用完毕之后，必须自己用

free

方法释放内存。

这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"

二、垃圾回收机制

Javascript 具有自动垃圾回收机制（GC：Garbage Collecation），也就是说，执行环境会负责管理代码执行过程中使用的内存

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存

通常情况下有两种实现方式：

• 标记清除
• 引用计数

标记清除

JavaScript

最常用的垃圾收回机制

当变量进入执行环境是，就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“

垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉

在此之后再被加上标记的变量就是待删除的了，原因是任何在上下文中的变量都访问不到它们了

随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存

举个例子：

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
}

引用计数

语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是

0

，就表示这个值不再用到了，因此可以将这块内存释放

如果一个值不再需要了，引用数却不为

0

，垃圾回收机制无法释放这块内存，从而导致内存泄漏

const arr = [1, 2, 3, 4]
console.log('hello world')

面代码中，数组

[1, 2, 3, 4]

是一个值，会占用内存。变量

arr

是仅有的对这个值的引用，因此引用次数为

1

。尽管后面的代码没有用到

arr

，它还是会持续占用内存

如果需要这块内存被垃圾回收机制释放，只需要设置如下：

arr = null

通过设置

arr

为

null

，就解除了对数组

[1,2,3,4]

的引用，引用次数变为 0，就被垃圾回收了

小结

有了垃圾回收机制，不代表不用关注内存泄露。那些很占空间的值，一旦不再用到，需要检查是否还存在对它们的引用。如果是的话，就必须手动解除引用

三、常见内存泄露情况

意外的全局变量

function foo(arg) {
  bar = 'this is a hidden global variable'
}

另一种意外的全局变量可能由

this

创建：

function foo() {
  this.variable = 'potential accidental global'
}
// foo 调用自己，this 指向了全局对象（window）
foo()

上述使用严格模式，可以避免意外的全局变量

定时器也常会造成内存泄露

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

也不会被释放

包括我们之前所说的闭包，维持函数内局部变量，使其得不到释放

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

没有清理对

DOM

元素的引用同样造成内存泄露

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

包括使用事件监听

addEventListener

监听的时候，在不监听的情况下使用

removeEventListener

取消对事件监听