Javascript 内存（三）：内存泄漏常见场景及分析

前言

内存泄漏问题，对于 Web H5 开发者来说，因为每次刷新页面，浏览器就会将当前页面的内存进行释放，影响较小。但是，对于持续不间断执行的程序，比如Nodejs。如果存在内存泄漏问题，那么内存占用会随着时间影响越来越大，直至达到内存限制，进程崩溃。

常见的内存泄漏场景

内存泄漏问题，一般是因为 GC 导致未使用的内存，没有及时被释放造成的。而容易导致内存泄漏的地方，主要是指堆内存区域。

1、循环引用

下面的例子是两个对象，互相引用对方。如果持续调用下面的函数，会导致内存不断升高。

 function f() {
   var objA = {
     reference: null,
     value: new Array(1000).fill("*")
   }
   var objB = {
	 reference: null,
     value: new Array(1000).fill("*")
   }
   objA.reference = objB
   objB.reference = objA
   return objA
 }
 f()

可以看到，连续调用之后，堆内存占用越来越高，没有及时释放，这样就造成了内存泄漏。

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')
  obj.onclick=function(){
    // Even if it is a empty function
  }
}

闭包可以维持函数内局部变量，使其得不到释放。上例定义事件回调时，由于是函数内定义函数，并且内部函数–事件回调引用外部函数，形成了闭包。

// 将事件处理函数定义在外面
function bindEvent() {
  var obj = document.createElement('xxx')
  obj.onclick = onclickHandler
}
// 或者在定义事件处理函数的外部函数中，删除对dom的引用
function bindEvent() {
  var obj = document.createElement('xxx')
  obj.onclick = function() {
    // Even if it is a empty function
  }
  obj = null
}

4、DOM 引用

有时，保存 DOM 节点内部数据结构很有用。假如你想快速更新表格的几行内容，把每一行 DOM 存成字典（JSON 键值对）或者数组很有意义。此时，同样的 DOM 元素存在两个引用：一个在 DOM 树中，另一个在字典中。将来你决定删除这些行时，需要把两个引用都清除。

var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};
function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
}
function removeButton() {
    document.body.removeChild(document.getElementById('button'));
    // 此时，仍旧存在一个全局的 #button 的引用
    // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
}

虽然我们用removeChild移除了button，但是还在elements对象里保存着#button的引用，换言之，DOM元素还在内存里面。

垃圾回收场景优化

1. 数组复用

let arr = [1,2,3]
// 数组清空
arr.length = 0
// arr = []
// 上面的操作也能置空，但是同时又在堆上创建了一个空数组

2. 对象复用

var t = {} // 每次循环都会创建一个新对象。
for (var i = 0; i < 10; i++) {
  // var t = {};// 每次循环都会创建一个新对象。
  t.age = 19
  t.name = '123'
  t.index = i
  console.log(t)
}
t = null //对象如果已经不用了，那就立即设置为null；等待垃圾回收。