[摘譯]js內存泄漏常見的四種情況
本文主要選取了 4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 這篇文章中的一小部分來說明一下js中產生內存泄漏的常見情況. 對于較難理解的第四種情況, 參考了一些文章來進行說明.
意外的全局變量
js中如果不用 var 聲明變量,該變量將被視為 window 對象(全局對象)的屬性,也就是全局變量.
function foo(arg) {
bar = "this is a hidden global variable";
}
// 上面的函數等價于
function foo(arg) {
window.bar = "this is an explicit global variable";
}
所以,你調用完了函數以后,變量仍然存在,導致泄漏.
如果不注意 this 的話,還可能會這么漏:
function foo() {
this.variable = "potential accidental global";
}
// 沒有對象調用foo, 也沒有給它綁定this, 所以this是window
foo();
你可以通過加上 'use strict' 啟用嚴格模式來避免這類問題, 嚴格模式會組織你創建意外的全局變量.
被遺忘的定時器或者回調
var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
這樣的代碼很常見, 如果 id 為 Node 的元素從 DOM 中移除, 該定時器仍會存在, 同時, 因為回調函數中包含對 someResource 的引用, 定時器外面的 someResource 也不會被釋放.
沒有清理的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'));
// 雖然我們用removeChild移除了button, 但是還在elements對象里保存著#button的引用
// 換言之, DOM元素還在內存里面.
}
閉包
先看這樣一段代碼:
var theThing = null;
var replaceThing = function () {
var someMessage = '123'
theThing = {
someMethod: function () {
console.log(someMessage);
}
};
};
調用 replaceThing 之后, 調用 theThing.someMethod , 會輸出 123 , 基本的閉包, 我想到這里應該不難理解.
解釋一下的話, theThing 包含一個 someMethod 方法, 該方法引用了函數中的 someMessage 變量, 所以函數中的 someMessage 變量不會被回收, 調用 someMethod 可以拿到它正確的 console.log 出來.
接下來我這么改一下:
var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var someMessage = '123'
theThing = {
longStr: new Array(1000000).join('*'), // 大概占用1MB內存
someMethod: function () {
console.log(someMessage);
}
};
};
我們先做一個假設, 如果函數中所有的私有變量, 不管 someMethod 用不用, 都被放進閉包的話, 那么會發生什么呢.
第一次調用 replaceThing , 閉包中包含 originalThing = null 和 someMessage = '123' , 我們設函數結束時, theThing 的值為 theThing_1 .
第二次調用 replaceThing , 如果我們的假設成立, originalThing = theThing_1 和 someMessage = '123' .我們設第二次調用函數結束時, theThing 的值為 theThing_2 .注意, 此時的 originalThing 保存著 theThing_1 , theThing_1 包含著和 theThing_2 截然不同的 someMethod , theThing_1 的 someMethod 中包含一個 someMessage , 同樣如果我們的假設成立, 第一次的 originalThing = null 應該也在.
所以, 如果我們的假設成立, 第二次調用以后, 內存中有 theThing_1 和 theThing_2 , 因為他們都是靠 longStr 把占用內存撐起來, 所以第二次調用以后, 內存消耗比第一次多1MB.
如果你親自試了(使用Chrome的Profiles查看每次調用后的內存快照), 會發現我們的假設是不成立的, 瀏覽器很聰明, 它只會把 someMethod 用到的變量保存下來, 用不到的就不保存了, 這為我們節省了內存.
但如果我們這么寫:
var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var unused = function () {
if (originalThing)
console.log("hi");
};
var someMessage = '123'
theThing = {
longStr: new Array(1000000).join('*'),
someMethod: function () {
console.log(someMessage);
}
};
};
unused 這個函數我們沒有用到, 但是它用了 originalThing 變量, 接下來, 如果你一次次調用 replaceThing , 你會看到內存1MB 1MB的漲.
也就是說, 雖然我們沒有使用 unused , 但是因為它使用了 originalThing , 使得它也被放進閉包了, 內存漏了.
強烈建議讀者親自試試在這幾種情況下產生的內存變化.
這種情況產生的原因, 通俗講, 是因為無論 someMethod 還是 unused , 他們其中所需要用到的在 replaceThing 中定義的變量是保存在一起的, 所以就漏了.
如果我沒有說明第四種情況, 可以參考以下鏈接, 或是在評論區評論.