本文主要選取了4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them?這篇文章中的一小部分來說明一下js中產(chǎn)生內(nèi)存泄漏的常見情況. 對于較難理解的第四種情況, 參考了一些文章來進(jìn)行說明.

意外的全局變量

js中如果不用var聲明變量,該變量將被視為window對象(全局對象)的屬性,也就是全局變量.

function?foo(arg)?{bar?=?"this?is?a?hidden?global?variable"; }//?上面的函數(shù)等價于 function?foo(arg)?{window.bar?=?"this?is?an?explicit?global?variable"; }

所以,你調(diào)用完了函數(shù)以后,變量仍然存在,導(dǎo)致泄漏.

如果不注意this的話,還可能會這么漏:

function?foo()?{this.variable?=?"potential?accidental?global"; }//?沒有對象調(diào)用foo,?也沒有給它綁定this,?所以this是window foo();

你可以通過加上'use strict'啟用嚴(yán)格模式來避免這類問題, 嚴(yán)格模式會組織你創(chuàng)建意外的全局變量.

被遺忘的定時器或者回調(diào)

?

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

這樣的代碼很常見, 如果id為Node的元素從DOM中移除, 該定時器仍會存在, 同時, 因?yàn)榛卣{(diào)函數(shù)中包含對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元素還在內(nèi)存里面. }

閉包

先看這樣一段代碼:

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

調(diào)用replaceThing之后, 調(diào)用theThing.someMethod, 會輸出123, 基本的閉包, 我想到這里應(yīng)該不難理解.

解釋一下的話,?theThing包含一個someMethod方法, 該方法引用了函數(shù)中的someMessage變量, 所以函數(shù)中的someMessage變量不會被回收, 調(diào)用someMethod可以拿到它正確的console.log出來.

接下來我這么改一下:

var?theThing?=?null; var?replaceThing?=?function?()?{var?originalThing?=?theThing;var?someMessage?=?'123'theThing?=?{longStr:?new?Array(1000000).join('*'),????????//?大概占用1MB內(nèi)存someMethod:?function?()?{console.log(someMessage);}}; };

我們先做一個假設(shè), 如果函數(shù)中所有的私有變量, 不管someMethod用不用, 都被放進(jìn)閉包的話, 那么會發(fā)生什么呢.

第一次調(diào)用replaceThing, 閉包中包含originalThing = null和someMessage = '123', 我們設(shè)函數(shù)結(jié)束時,?theThing的值為theThing_1.

第二次調(diào)用replaceThing, 如果我們的假設(shè)成立,?originalThing = theThing_1和someMessage = '123'.我們設(shè)第二次調(diào)用函數(shù)結(jié)束時,?theThing的值為theThing_2.注意, 此時的originalThing保存著theThing_1,?theThing_1包含著和theThing_2截然不同的someMethod,?theThing_1的someMethod中包含一個someMessage, 同樣如果我們的假設(shè)成立, 第一次的originalThing = null應(yīng)該也在.

所以, 如果我們的假設(shè)成立, 第二次調(diào)用以后, 內(nèi)存中有theThing_1和theThing_2, 因?yàn)樗麄兌际强縧ongStr把占用內(nèi)存撐起來, 所以第二次調(diào)用以后, 內(nèi)存消耗比第一次多1MB.

如果你親自試了(使用Chrome的Profiles查看每次調(diào)用后的內(nèi)存快照), 會發(fā)現(xiàn)我們的假設(shè)是不成立的, 瀏覽器很聰明, 它只會把someMethod用到的變量保存下來, 用不到的就不保存了, 這為我們節(jié)省了內(nèi)存.

但如果我們這么寫:

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這個函數(shù)我們沒有用到, 但是它用了originalThing變量, 接下來, 如果你一次次調(diào)用replaceThing, 你會看到內(nèi)存1MB 1MB的漲.

也就是說, 雖然我們沒有使用unused, 但是因?yàn)樗褂昧薿riginalThing, 使得它也被放進(jìn)閉包了, 內(nèi)存漏了.

強(qiáng)烈建議讀者親自試試在這幾種情況下產(chǎn)生的內(nèi)存變化.

這種情況產(chǎn)生的原因, 通俗講, 是因?yàn)闊o論someMethod還是unused, 他們其中所需要用到的在replaceThing中定義的變量是保存在一起的, 所以就漏了.

總結(jié)

以上是生活随笔為你收集整理的js内存泄漏常见的四种情况（From LeuisKen）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。