谈谈Js内存泄漏的那点事儿

JavaScript 是一种垃圾收集式语言，这就是说，内存是根据对象的创建分配给该对象的，并会在没有对该对象的引用时由浏览器收回。JavaScript 的垃圾收集机制本身并没有问题，但浏览器在为 DOM 对象分配和恢复内存的方式上却有些出入。

Internet Explorer 和 Mozilla Firefox 均使用引用计数来为 DOM 对象处理内存。在引用计数系统，每个所引用的对象都会保留一个计数，以获悉有多少对象正在引用它。如果计数为零，该对象就会被销毁，其占用的内存也会返回给堆。虽然这种解决方案总的来说还算有效，但在循环引用方面却存在一些盲点。

当两个对象互相引用时，就构成了循环引用，其中每个对象的引用计数值都被赋 1。在纯垃圾收集系统中，循环引用问题不大：若涉及到的两个对象中的一个对象未被任何其他对象引用，那么这两个对象都将被垃圾收集。而在引用计数系统，这两个对象都不能被销毁，原因是引用计数永远不能为零。在同时使用了垃圾收集和引用计数的混合系统中，将会发生泄漏，因为系统不能正确识别循环引用。在这种情况下，DOM 对象和 JavaScript 对象均不能被销毁。

-----------------------------------------------------------------华丽丽的分割线---------------------------------------------------------

以下是内存泄漏的几种实例：

1、给DOM对象添加的属性是一个对象的引用。范例： 

var testObject = {}; 
document.getElementById('idname').property = testObject;  //如果DOM不被消除，则testObject会一直存在，造成内存泄漏

解决方法：

在window.onunload事件中写上:

document.getElementById('idname').property = null;         //释放内存

2、DOM对象与JS对象相互引用。范例：

function testObject(element) { 
this.elementReference = element;                      // 为testObject(js)对象的属性绑定element(DOM)对象
element.property = this;                              // 为element(DOM)对象的属性绑定testObject(js)对象
} 
new testObject(document.getElementById('idname'));

解决方法： 在onunload事件中写上: 

document.getElementById('idname').property = null;

3、给DOM对象用attachEvent绑定事件。范例：

function doClick() {} 
element.attachEvent("onclick", doClick); 

解决方法： 
在onunload事件中写上:

 element.detachEvent('onclick', doClick);

4、从外到内执行appendChild。这时即使调用removeChild也无法释放。范例：

var parentDiv = document.createElement("div"); 
var childDiv = document.createElement("div"); 
document.body.appendChild(parentDiv); 
parentDiv.appendChild(childDiv); 

解决方法： 
从内到外执行appendChild: 

var parentDiv = document.createElement("div"); 
var childDiv = document.createElement("div"); 
parentDiv.appendChild(childDiv); 
document.body.appendChild(parentDiv); 

5、反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)。范例：

for(i = 0; i < 5000; i++) { 
hostElement.text = "asdfasdfasdf"; 
} 

这种方式相当于定义了5000个属性！