内存泄漏的多种情况

本文总结自: http://www.jianshu.com/p/24874469dafd

内存泄漏常见的是如下四种情况，在此只做记录，方便参考，详情可查看以上链接

1.意外的全局变量

常见情况如下:

function a(){
    b= '111'
}

根据js语法可知，变量未声明就赋值将视为其作用域为全局作用域

或者

function a(){
    this.b= '111'
}
a()

这也会创建一个全局变量

解决方法:

可使用"use strict"，其禁止全局变量的隐形声明及禁止this关键字指向全局作用域。

2.被遗忘的定时器或监听器

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

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

同理: 

var element = document.getElementById('button');

 

var a= 1;

function onClick(event) { element.innerHtml = 'text'; a= 100}

element.addEventListener('click', onClick);

也会找出内存泄漏

解决方案:

使用完毕后记得清除定时器及监听器

3.没有清理的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'));

}

这会导致此dom元素不能被回收

4.闭包

var theThing = null;
var replaceThing = function () {
  var someMessage = '123'
  theThing = {
    someMethod: function () {
      console.log(someMessage);
    }
  };
};
replaceThing()

由于闭包的特性，内部能访问外部定义的变量，因此theThing无法回收

解决方案:

在replaceThing函数最后加上someMessage= null