整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
S自帶一套內(nèi)存管理引擎，負(fù)責(zé)創(chuàng)建對象、銷毀對象，以及垃圾回收。這期探討一下垃圾回收機(jī)制。垃圾回收機(jī)制主要是由一個(gè)叫垃圾收集器（garbage collector，簡稱GC）的后臺進(jìn)程負(fù)責(zé)監(jiān)控、清理對象，并及時(shí)回收空閑內(nèi)存。
和C#、Java一樣JavaScript有自動垃圾回收機(jī)制，也就是說執(zhí)行環(huán)境會負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存，在開發(fā)過程中就無需考慮內(nèi)存分配及無用內(nèi)存的回收問題了。
而 JavaScript 在創(chuàng)建對象(對象、字符串等)時(shí)會為它們分配內(nèi)存，不再使用時(shí)會“自動”釋放內(nèi)存，這個(gè)過程稱為垃圾收集。
內(nèi)存生命周期中的每一個(gè)階段:
分配內(nèi)存 —? 內(nèi)存是由操作系統(tǒng)分配的，它允許您的程序使用它。在低級語言(例如 C 語言)中，這是一個(gè)開發(fā)人員需要自己處理的顯式執(zhí)行的操作。然而，在高級語言中，系統(tǒng)會自動為你分配內(nèi)在。
使用內(nèi)存 — 這是程序?qū)嶋H使用之前分配的內(nèi)存，在代碼中使用分配的變量時(shí)，就會發(fā)生讀和寫操作。
釋放內(nèi)存 — 釋放所有不再使用的內(nèi)存,使之成為自由內(nèi)存,并可以被重新利用。與分配內(nèi)存操作一樣,這一操作在低級語言中也是需要顯式地執(zhí)行。
JS會在創(chuàng)建變量時(shí)自動分配內(nèi)存，在不使用地時(shí)候會自動周期性的釋放內(nèi)存，釋放的過程就叫 "垃圾回收"。這個(gè)機(jī)制有好的一面，當(dāng)然也也有不好的一面。一方面自動分配內(nèi)存減輕了開發(fā)者的負(fù)擔(dān)，開發(fā)者不用過多的去關(guān)注內(nèi)存使用，但是另一方面，正是因?yàn)橐驗(yàn)槭亲詣踊厥眨匀绻磺宄厥盏臋C(jī)制，會很容易造成混亂，而混亂就很容易造成"內(nèi)存泄漏".由于是自動回收，所以就存在一個(gè) "內(nèi)存是否需要被回收的" 的問題，但是這個(gè)問題的判定在程序中意味著無法通過某個(gè)算法去準(zhǔn)確完整的解決，后面探討的回收機(jī)制只能有限地去解決一般的問題。
垃圾回收對是否需要回收的問題主要依賴于對變量的判定是否可訪問，由此衍生出兩種主要的回收算法：
標(biāo)記清理是js最常用的回收策略，2012年后所有瀏覽器都使用了這種策略，此后的對回收策略的改進(jìn)也是基于這個(gè)策略的改進(jìn)。其策略是：
引用計(jì)數(shù)策略相對而言不常用，因?yàn)楸锥溯^多。其思路是對每個(gè)值記錄它被引用的次數(shù)，通過最后對次數(shù)的判斷(引用數(shù)為0)來決定是否保留，具體的規(guī)則有
最重要的問題就是，循環(huán)引用 的問題
function refProblem () {
let a=new Object();
let b=new Object();
a.c=b;
b.c=a; //互相引用
}
復(fù)制代碼根據(jù)之前提到的規(guī)則，兩個(gè)都互相引用了，引用計(jì)數(shù)不為0，所以兩個(gè)變量都無法回收。如果頻繁地調(diào)用改函數(shù)，則會造成很嚴(yán)重的內(nèi)存泄漏。
V8的回收機(jī)制基于 分代回收機(jī)制 ，將內(nèi)存分為新生代（young generation）和老生代（tenured generation），新生代為存活時(shí)間較短的對象，老生代為存活時(shí)間較長或者常駐內(nèi)存的變量。
V8將堆分成了幾個(gè)不同的區(qū)域
Scavenge 算法是新生代空間中的主要算法，該算法由 C.J. Cheney 在 1970 年在論文 A nonrecursive list compacting algorithm 提出。 Scavenge 主要采用了 Cheney算法，Cheney算法新生代空間的堆內(nèi)存分為2塊同樣大小的空間，稱為 Semi space，處于使用狀態(tài)的成為 From空間 ，閑置的稱為 To 空間。垃圾回收過程如下：
之前說過，標(biāo)記清除策略會產(chǎn)生內(nèi)存碎片，從而影響內(nèi)存的使用，這里 標(biāo)記整理算法（Mark-Compact）的出現(xiàn)就能很好的解決這個(gè)問題。標(biāo)記整理算法是在 標(biāo)記清除（Mark-Sweep ）的基礎(chǔ)上演變而來的，整理算法會將活躍的對象往邊界移動，完成移動后，再清除不活躍的對象。
由于需要移動移動對象，所以在處理速度上，會慢于Mark-Sweep。
為了避免應(yīng)用邏輯與垃圾回收器看到的邏輯不一樣，垃圾回收器在執(zhí)行回收時(shí)會停止應(yīng)用邏輯，執(zhí)行完回收任務(wù)后，再繼續(xù)執(zhí)行應(yīng)用邏輯。這種行為就是 全停頓，停頓的時(shí)間取決于不同引擎執(zhí)行一次垃圾回收的時(shí)間。這種停頓對新生代空間的影響較小，但對老生代空間可能會造成停頓的現(xiàn)象。
為了解決全停頓的現(xiàn)象，2011年V8推出了增量標(biāo)記。V8將標(biāo)記過程分為一個(gè)個(gè)的子標(biāo)記過程，同時(shí)讓垃圾回收標(biāo)記和JS應(yīng)用邏輯交替進(jìn)行，直至標(biāo)記完成。
內(nèi)存泄漏的問題難以察覺，在函數(shù)被調(diào)用很多次的情況下，內(nèi)存泄漏可能是個(gè)大問題。常見的內(nèi)存泄漏主要有下面幾個(gè)場景。
function hello （）{
name='tom'
}
hello();
復(fù)制代碼未聲明的對象會被綁定在全局對象上，就算不被使用了，也不會被回收，所以寫代碼的時(shí)候，一定要記得聲明變量。
let name='Tom';
setInterval(()=> {
console.log(name);
}, 100);
復(fù)制代碼定時(shí)器的回調(diào)通過閉包引用了外部變量，如果定時(shí)器不清除，name會一直占用著內(nèi)存，所以用定時(shí)器的時(shí)候最好明白自己需要哪些變量，檢查定時(shí)器內(nèi)部的變量，另外如果不用定時(shí)器了，記得及時(shí)清除定時(shí)器。
let out=function() {
let name='Tom';
return function () {
console.log(name);
}
}
復(fù)制代碼由于閉包會常駐內(nèi)存，在這個(gè)例子中，如果out一直存在，name就一直不會被清理，如果name值很大的時(shí)候，就會造成比較嚴(yán)重的內(nèi)存泄漏。所以一定要慎重使用閉包。
mounted() {
window.addEventListener("resize", ()=> {
//do something
});
}
復(fù)制代碼在頁面初始化時(shí)綁定了事件監(jiān)聽，但是在頁面離開的時(shí)候未清除事監(jiān)聽，就會導(dǎo)致內(nèi)存泄漏。
文章為參考資料總結(jié)的筆記文章，我最近在重學(xué)js，會將復(fù)習(xí)總結(jié)的文章記錄在Github，有想一起復(fù)習(xí)的小伙伴可私信一起參與復(fù)習(xí)總結(jié)！
過去，我們?yōu)g覽靜態(tài)網(wǎng)站時(shí)無須過多關(guān)注內(nèi)存管理，因?yàn)榧虞d新頁面時(shí)，之前的頁面信息會從內(nèi)存中刪除。 然而，隨著單頁Web應(yīng)用（SPA）的興起，應(yīng)用程序消耗的內(nèi)存越來越多，這不僅會降低瀏覽器性能，甚至?xí)?dǎo)致瀏覽器卡死。
因此，在編碼實(shí)踐中，開發(fā)人員需要更加關(guān)注與內(nèi)存相關(guān)的內(nèi)容。因此，小編今天將為大家介紹JavaScript內(nèi)存泄漏的編程模式，并提供一些內(nèi)存管理的改進(jìn)方法。
JavaScript對象被保存在瀏覽器內(nèi)存的堆中，并通過引用方式訪問。值得一提的是，JavaScript垃圾回收器則運(yùn)行于后臺，并通過識別無法訪問的對象來釋放并恢復(fù)底層存儲空間，從而保證JavaScript引擎的良好運(yùn)行狀態(tài)。
當(dāng)內(nèi)存中的對象在垃圾回收周期中應(yīng)該被清理時(shí)，若它們被另一個(gè)仍然存在于內(nèi)存中的對象通過一個(gè)意外的引用所持有，就會引發(fā)內(nèi)存泄漏問題。這種情況下，冗余對象會繼續(xù)占據(jù)內(nèi)存空間，導(dǎo)致應(yīng)用程序消耗過多的內(nèi)存資源，并可能導(dǎo)致性能下降和表現(xiàn)不佳的情況出現(xiàn)。因此，及時(shí)清理無用對象并釋放內(nèi)存資源是至關(guān)重要的，以確保應(yīng)用程序的正常運(yùn)行和良好的性能表現(xiàn)。
那么如何知道代碼中是否存在內(nèi)存泄漏？內(nèi)存泄漏往往隱蔽且很難檢測和定位。即使代碼中存在內(nèi)存泄漏，瀏覽器在運(yùn)行時(shí)也不會返回任何錯(cuò)誤。如果注意到頁面的性能逐漸下降，可以使用瀏覽器內(nèi)置的工具來確定是否存在內(nèi)存泄漏以及是哪個(gè)對象引起的。
任務(wù)管理器（不要與操作系統(tǒng)的任務(wù)管理器混淆）提供了瀏覽器中所有選項(xiàng)卡和進(jìn)程的概覽。Chrome 中，可以通過在 Linux 和 Windows 操作系統(tǒng)上按 Shift+Esc 來打開任務(wù)管理器；而在 Firefox 中，通過在地址欄中鍵入 about:performance 則可以訪問內(nèi)置的管理器，它可以顯示每個(gè)標(biāo)簽的 JavaScript 內(nèi)存占用情況。如果網(wǎng)站停留在那里什么都不做，但 JavaScript內(nèi)存使用量逐漸增加，那很可能是存在內(nèi)存泄漏。
開發(fā)者工具提供了一些先進(jìn)的內(nèi)存管理方法，例如，使用Chrome瀏覽器的性能記錄工具，可以對頁面的性能進(jìn)行可視化分析。在這個(gè)過程中，可以通過一些指標(biāo)來判斷是否存在內(nèi)存泄漏問題，比如堆內(nèi)存使用量增加的情況，并及時(shí)采取措施解決這些問題，以確保應(yīng)用程序的正常運(yùn)行和良好的性能表現(xiàn)。
另外，通過Chrome和Firefox的開發(fā)者工具提供的內(nèi)存工具，可以進(jìn)一步探索內(nèi)存使用情況。隊(duì)列內(nèi)存使用快照的比較可以顯示在兩個(gè)快照之間分配了多少內(nèi)存以及分配的位置，并提供額外信息來幫助識別代碼中存在問題的對象。這些工具為開發(fā)者提供了便利，能夠更好地進(jìn)行內(nèi)存管理和性能優(yōu)化，提高應(yīng)用程序的質(zhì)量和性能。
研究內(nèi)存泄漏問題就相當(dāng)于尋找符合垃圾回收機(jī)制的編程方式，有效避免對象引用的問題。下面小編就為大家介紹幾個(gè)常見的容易導(dǎo)致內(nèi)存泄漏的地方：
全局變量始終存儲在根目錄下，且永遠(yuǎn)不會被回收。而在JavaScript的開發(fā)中，一些錯(cuò)誤會導(dǎo)致局部變量被轉(zhuǎn)換到了全局，尤其是在非嚴(yán)格的代碼模式下。下面是兩個(gè)常見的局部變量被轉(zhuǎn)化到全局變量的情況：
function createGlobalVariables() {
leaking1='I leak into the global scope'; // 為未聲明的變量賦值
this.leaking2='I also leak into the global scope'; // 使用this指向全局對象
};
createGlobalVariables();
window.leaking1;
window.leaking2; 注意：嚴(yán)格模式（"use strict"）將幫助您避免上面示例中的內(nèi)存泄漏和控制臺錯(cuò)誤。
函數(shù)中定義的變量會在函數(shù)退出調(diào)用棧并且在函數(shù)外部沒有指向它的引用時(shí)被清除。而閉包則會保持被引用的變量一直存在，即便函數(shù)的執(zhí)行已經(jīng)終止。
function outer() {
const potentiallyHugeArray=[];
return function inner() {
potentiallyHugeArray.push('Hello'); // function inner is closed over the potentiallyHugeArray variable
console.log('Hello');
};
};
const sayHello=outer(); // contains definition of the function inner
function repeat(fn, num) {
for (let i=0; i < num; i++){
fn();
}
}
repeat(sayHello, 10); // each sayHello call pushes another 'Hello' to the potentiallyHugeArray
// now imagine repeat(sayHello, 100000)在這個(gè)例子中，potentiallyHugeArray從未被任何函數(shù)返回，也無法被訪問，但它的大小會隨著調(diào)用 inner 方法的次數(shù)而增長。
在JavaScript中，使用使用 setTimeout 或 setInterval函數(shù)引用對象是防止對象被垃圾回收的最常見方法。當(dāng)在代碼中設(shè)置循環(huán)定時(shí)器（可以使 setTimeout 表現(xiàn)得像 setInterval，即使其遞歸）時(shí)，只要回調(diào)可調(diào)用，定時(shí)器回調(diào)對象的引用就會永遠(yuǎn)保持活動狀態(tài)。
例如下面的這段代碼，只有在移除定時(shí)器后，data對象才會被垃圾回收。在沒有移除setInterval之前，它永遠(yuǎn)不會被刪除，并且data.hugeString 會一直保留在內(nèi)存中，直到應(yīng)用程序停止。
function setCallback() {
const data={
counter: 0,
hugeString: new Array(100000).join('x')
};
return function cb() {
data.counter++; // data object is now part of the callback's scope
console.log(data.counter);
}
}
setInterval(setCallback(), 1000); // how do we stop it?那么應(yīng)該如何避免上述這種情況的發(fā)生呢？可以從以下兩個(gè)方法入手：
如下方的代碼所示：
function setCallback() {
// 'unpacking' the data object
let counter=0;
const hugeString=new Array(100000).join('x'); // gets removed when the setCallback returns
return function cb() {
counter++; // only counter is part of the callback's scope
console.log(counter);
}
}
const timerId=setInterval(setCallback(), 1000); // saving the interval ID
// doing something ...
clearInterval(timerId); // stopping the timer i.e. if button pressed活動的事件監(jiān)聽器會阻止其范圍內(nèi)的所有變量被回收。一旦添加，事件監(jiān)聽器會一直生效，直到下面兩種情況的發(fā)生：
在下面的示例中，使用匿名內(nèi)聯(lián)函數(shù)作為事件監(jiān)聽器，這意味著它不能與 removeEventListener() 一起使用。此外，由于document 不能被移除，觸發(fā)方法中的內(nèi)容會一直駐留內(nèi)存，即使只使用它觸發(fā)一次。
const hugeString=new Array(100000).join('x');
document.addEventListener('keyup', function() { // anonymous inline function - can't remove it
doSomething(hugeString); // hugeString is now forever kept in the callback's scope
});那么如何避免這種情況呢？可以通過removeEventListener()釋放監(jiān)聽器：
function listener() {
doSomething(hugeString);
}
document.addEventListener('keyup', listener); // named function can be referenced here...
document.removeEventListener('keyup', listener); // ...and here 如果事件監(jiān)聽器只需要運(yùn)行一次，addEventListener() 可以帶有第三個(gè)參數(shù)，一個(gè)提供附加選項(xiàng)的對象。只要將 {once: true} 作為第三個(gè)參數(shù)傳遞給 addEventListener()，監(jiān)聽器將在事件處理一次后自動刪除。
document.addEventListener('keyup', function listener() {
doSomething(hugeString);
}, {once: true}); // listener will be removed after running once如果不斷向緩存中添加內(nèi)容，而未使用的對象也沒有移除，也沒有限制緩存的大小，那么緩存的大小就會無限增長：
let user_1={ name: "Peter", id: 12345 };
let user_2={ name: "Mark", id: 54321 };
const mapCache=new Map();
function cache(obj){
if (!mapCache.has(obj)){
const value=`${obj.name} has an id of ${obj.id}`;
mapCache.set(obj, value);
return [value, 'computed'];
}
return [mapCache.get(obj), 'cached'];
}
cache(user_1); // ['Peter has an id of 12345', 'computed']
cache(user_1); // ['Peter has an id of 12345', 'cached']
cache(user_2); // ['Mark has an id of 54321', 'computed']
console.log(mapCache); // ((…)=> "Peter has an id of 12345", (…)=> "Mark has an id of 54321")
user_1=null; // removing the inactive user
// Garbage Collector
console.log(mapCache); // ((…)=> "Peter has an id of 12345", (…)=> "Mark has an id of 54321") // first entry is still in cache為了解決這個(gè)問題，需要清除不需要的緩存：
一種有效的解決內(nèi)存泄漏問題的方法是使用WeakMap。它是一種數(shù)據(jù)結(jié)構(gòu)，其中鍵引用被保持為弱引用，并且僅接受對象作為鍵。如果使用對象作為鍵，并且它是唯一引用該對象的引用，相關(guān)條目將從緩存中移除，并進(jìn)行垃圾回收。在下面的示例中，當(dāng)替換user_1后，與之關(guān)聯(lián)的條目將在下一次垃圾回收時(shí)自動從WeakMap中移除。
let user_1={ name: "Peter", id: 12345 };
let user_2={ name: "Mark", id: 54321 };
const weakMapCache=new WeakMap();
function cache(obj){
// ...same as above, but with weakMapCache
return [weakMapCache.get(obj), 'cached'];
}
cache(user_1); // ['Peter has an id of 12345', 'computed']
cache(user_2); // ['Mark has an id of 54321', 'computed']
console.log(weakMapCache); // ((…)=> "Peter has an id of 12345", (…)=> "Mark has an id of 54321"}
user_1=null; // removing the inactive user
// Garbage Collector
console.log(weakMapCache); // ((…)=> "Mark has an id of 54321") - first entry gets garbage collected對于復(fù)雜的應(yīng)用程序，檢測和修復(fù) JavaScript 內(nèi)存泄漏問題可能是一項(xiàng)非常艱巨的任務(wù)。了解內(nèi)存泄漏的常見原因以防止它們發(fā)生是非常重要的。在涉及內(nèi)存和性能方面，最重要的是用戶體驗(yàn)，這才是最重要的。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
