垃圾回收機(jī)制
JavaScript具有自動(dòng)垃圾回收機(jī)制囚似，來(lái)判斷哪些變量不再需要拜鹤，釋放他所占的內(nèi)存灾测。
1. 變量的生命周期
在創(chuàng)建時(shí)丰包，JavaScript會(huì)自動(dòng)為他分配內(nèi)存禁熏，然后垃圾回收機(jī)制會(huì)按照固定的時(shí)間間隔對(duì)這些變量進(jìn)行評(píng)估，看他是否有效邑彪。無(wú)效則釋放其內(nèi)存瞧毙。
2. 常見(jiàn)的垃圾回收方式：
引用計(jì)數(shù)
跟蹤每個(gè)值被引用的次數(shù)，當(dāng)引用次數(shù)為0時(shí)寄症，回收其所占內(nèi)存空間宙彪。當(dāng)聲明一個(gè)變量并將一個(gè)引用類型的值賦給該變量，則這個(gè)值的引用次數(shù)就是1有巧，如果同一個(gè)值又被賦給另一個(gè)變量释漆，該值的引用次數(shù)加1，如果包含對(duì)這個(gè)值的引用的變量又取得另一個(gè)值篮迎，這個(gè)值的引用次數(shù)減1男图。
出現(xiàn)的問(wèn)題： 循環(huán)引用，導(dǎo)致引用次數(shù)永遠(yuǎn)不為0甜橱，無(wú)法回收所占用的內(nèi)存空間逊笆，導(dǎo)致內(nèi)存泄漏。
解決：手工解除循環(huán)引用岂傲，直接置為null难裆。
注意：IE中有一部分對(duì)象并不是原生JavaScript對(duì)象。例如镊掖，其BOM和DOM中的對(duì)象就是使用C++以COM（Component Object Model乃戈，組件對(duì)象）對(duì)象的形式實(shí)現(xiàn)的，而COM對(duì)象的垃圾回收器就是采用的引用計(jì)數(shù)的策略堰乔。所以IE中只要有COM對(duì)象偏化，就會(huì)有循環(huán)引用問(wèn)題脐恩。標(biāo)記清除
1.比如镐侯，當(dāng)變量進(jìn)入執(zhí)行環(huán)境，將變量標(biāo)記為“進(jìn)入環(huán)境”，當(dāng)變量離開(kāi)環(huán)境時(shí)苟翻，將其標(biāo)記為“離開(kāi)環(huán)境”韵卤。我們不能釋放進(jìn)入環(huán)境的變量，因?yàn)橛锌赡軙?huì)用到崇猫。
2.垃圾回收器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記沈条，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包），在這些完成之后仍存在標(biāo)記的就是要?jiǎng)h除的變量了诅炉，因?yàn)榄h(huán)境中的變量已經(jīng)無(wú)法訪問(wèn)到這些變量了蜡歹，然后垃圾回收器會(huì)回收這些帶有標(biāo)記的變量機(jī)器所占空間。
出現(xiàn)的問(wèn)題：就是在清除之后涕烧，內(nèi)存空間是不連續(xù)的月而，即出現(xiàn)了內(nèi)存碎片，標(biāo)記-整理方法可以有效地解決這個(gè)問(wèn)題议纯，整理的過(guò)程就是將不連續(xù)的內(nèi)存向一端復(fù)制父款，使不連續(xù)的內(nèi)存連續(xù)起來(lái)。
內(nèi)存泄露
內(nèi)存泄漏：沒(méi)有及時(shí)的釋放不再需要的內(nèi)存瞻凤。我們已經(jīng)無(wú)法再通過(guò)js代碼來(lái)引用到某個(gè)對(duì)象憨攒，但垃圾回收器卻認(rèn)為這個(gè)對(duì)象還在被引用，因此在回收的時(shí)候不會(huì)釋放它阀参。
內(nèi)存泄露的形式
- 意外的全局變量
對(duì)未聲明的變量的引用是在全局對(duì)象內(nèi)創(chuàng)建一個(gè)新的變量
function foo(arg) {
bar = "";
}
foo();
bar的作用域是window肝集，所以函數(shù)foo執(zhí)行完后，bar不會(huì)被回收蛛壳。
- 閉包
閉包可以導(dǎo)致內(nèi)存泄漏是因?yàn)閮?nèi)部方法保持一個(gè)對(duì)外部方法變量的引用包晰，所以盡管方法返回了，內(nèi)部方法還可以繼續(xù)訪問(wèn)在外部方法中定義的私有變量炕吸。
閉包經(jīng)常會(huì)在不知不覺(jué)中創(chuàng)建出循環(huán)引用伐憾，所以它對(duì)內(nèi)存泄露有不可推卸的責(zé)任
function setHandler() {
const ele = document.getElementById('id');
ele.onclick = function() {
alert(ele.id);
};
}
創(chuàng)建一個(gè)作為ele元素事件處理程序的閉包。而閉包又創(chuàng)建了一個(gè)循環(huán)引用赫模。
- 被遺忘的計(jì)時(shí)器或回調(diào)函數(shù)
var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
在setInterval 沒(méi)有結(jié)束前树肃，回調(diào)函數(shù)里的變量以及回調(diào)函數(shù)本身都無(wú)法被回收。那什么才叫結(jié)束呢瀑罗？就是調(diào)用了 clearInterval胸嘴。如果回調(diào)函數(shù)內(nèi)沒(méi)有做什么事情，并且也沒(méi)有被 clear 掉的話斩祭，就會(huì)造成內(nèi)存泄漏劣像。setTiemout也會(huì)有同樣的問(wèn)題，需要調(diào)用clearTimeout摧玫。
- 脫離 DOM 的引用
保存 DOM 節(jié)點(diǎn)內(nèi)部數(shù)據(jù)結(jié)構(gòu)很有用耳奕。假如你想快速更新表格的幾行內(nèi)容，把每一行 DOM 存成字典（JSON 鍵值對(duì)）或者數(shù)組很有意義。此時(shí)屋群，同樣的 DOM 元素存在兩個(gè)引用：一個(gè)在 DOM 樹(shù)中闸婴，另一個(gè)在字典中。將來(lái)你決定刪除這些行時(shí)芍躏，需要把兩個(gè)引用都清除邪乍。
參考：
https://www.ibm.com/developerworks/cn/web/wa-jsmemory/index.html
http://bubkoo.com/2015/01/31/understanding-and-solving-internet-explorer-leak-patterns/
https://jinlong.github.io/2016/05/01/4-Types-of-Memory-Leaks-in-JavaScript-and-How-to-Get-Rid-Of-Them/
https://segmentfault.com/a/1190000007616791#articleHeader4
