如何避免JavaScript的記憶體洩露及記憶體管理技巧

自動垃圾收集是不能代替有效的記憶體管理的，特別是在大型，長時間執行的Web應用程式中。在這次講座中，我們將演示如何通過Chrome的DevTools對記憶體進行有效的管理。

並瞭解如何解決效能問題，如記憶體洩漏，頻繁的垃圾收集暫停，和整體記憶體膨脹，那些真正讓你耗費精力的東西。

Addy Osmani在他的PPT中展示了很多會在Chrome V8中產生記憶體洩漏的示例：

1) Delete一個Object的屬性會讓此物件變慢（多耗費15倍的記憶體）

varo = { x:'y'};
deleteo.x;//此時o會成一個慢物件
o.x;//

varo = { x:'y'};
o =null;//應該這樣

2) 閉包

在閉包中引入閉包外部的變數時，當閉包結束時此物件無法被垃圾回收（GC）。

vara =function() {
varlargeStr =newArray(1000000).join('x');
returnfunction() {
returnlargeStr;
}
}();

3) DOM洩露

varselect = document.querySelector;
vartreeRef = select('#tree');

//在COM樹中leafRef是treeFre的一個子結點
varleafRef = select('#leaf');
varbody = select('body');

body.removeChild(treeRef);

//#tree不能被回收入，因為treeRef還在
//解決方法:
treeRef =null;

//tree還不能被回收，因為葉子結果leafRef還在
leafRef =null;

//現在#tree可以被釋放了。

4) Timers計（定）時器洩露

定時器也是常見產生記憶體洩露的地方：

for(vari = 0; i < 90000; i++) {
varbuggyObject = {
callAgain:function() {
varref =this;
varval = setTimeout(function() {
ref.callAgain();
}, 90000);
}
}

buggyObject.callAgain();
//雖然你想回收但是timer還在
buggyObject =null;
}

5) 除錯記憶體

Chrome自帶的記憶體除錯工具可以很方便地檢視記憶體使用情況和記憶體洩露：

在 Timeline -> Memory 點選record即可：