一文讀懂 JS 內(nèi)存管理，掌握面試中七大內(nèi)存泄漏場(chǎng)景

作者：程序員Sunday 2024-11-18 11:49:51

JavaScript 與許多現(xiàn)代編程語(yǔ)言一樣，使用自動(dòng)內(nèi)存管理，即：JS 會(huì)自動(dòng)完成垃圾回收。這也意味著，我們?cè)诔绦蜻\(yùn)行時(shí)無(wú)需手動(dòng)分配和釋放內(nèi)存（這也是很多同學(xué)很少關(guān)注它的原因）。

說(shuō)起內(nèi)存管理，可能是很多同學(xué)既熟悉、又陌生的一個(gè)領(lǐng)域。熟悉是因?yàn)槲覀兘?jīng)常會(huì)聽到這個(gè)詞，陌生是因?yàn)楹孟裎覀冊(cè)陂_發(fā)時(shí)又很少去關(guān)注它。

不過(guò)，在目前的前端面試中，內(nèi)存管理的問(wèn)題被問(wèn)的又比較頻繁。所以，咱們今天就來(lái)看看 JS 內(nèi)存管理的那些事...

JavaScript 如何管理內(nèi)存

自動(dòng)內(nèi)存管理（垃圾回收）主要通過(guò) 標(biāo)記-清除法完成，大致分為兩個(gè)階段：

標(biāo)記階段：垃圾收集器從根對(duì)象開始，標(biāo)記所有可到達(dá)或可訪問(wèn)的對(duì)象。
清除階段：任何未標(biāo)記（即可無(wú)法訪問(wèn)）的對(duì)象都被視為“垃圾”，并且其內(nèi)存將被釋放。

但是，自動(dòng)的內(nèi)存管理畢竟無(wú)法解決所有場(chǎng)景下的內(nèi)存問(wèn)題，所以在某些特殊情況下就會(huì)導(dǎo)致出現(xiàn) 內(nèi)存泄漏的問(wèn)題。

而這個(gè) 內(nèi)存泄漏就是我們?cè)诿嬖囍辛牡絻?nèi)存管理時(shí)的，重點(diǎn)描述內(nèi)容！

關(guān)于【內(nèi)存泄漏】

垃圾回收經(jīng)常會(huì)伴隨著內(nèi)存泄漏的概念。不過(guò)我們需要知道的是內(nèi)存泄漏和內(nèi)存溢出是不同的。

PS 內(nèi)存溢出指的是：程序運(yùn)行過(guò)程中需要使用的內(nèi)存大于系統(tǒng)能夠提供的內(nèi)存。即：系統(tǒng)內(nèi)存不足。

所謂的內(nèi)存泄漏指的是：當(dāng)一塊內(nèi)存（通常是變量）未被釋放（垃圾回收），同時(shí)我們也無(wú)法訪問(wèn)到它時(shí)。大家可以簡(jiǎn)單理解為：一個(gè)變量，我們?cè)L問(wèn)不到它了，但是它占用的內(nèi)容還沒(méi)有被回收。那么此時(shí)就會(huì)出現(xiàn)內(nèi)存泄漏的問(wèn)題：

1. 未清理的定時(shí)器或回調(diào)

場(chǎng)景：使用 setInterval 或 setTimeout，但在組件銷毀或不再需要時(shí)沒(méi)有清理。
結(jié)果：定時(shí)器依然存在，引用被保留，導(dǎo)致無(wú)法釋放內(nèi)存。
示例：

function startTimer() {
   setInterval(() => {
       console.log('...');
   }, 1000);
}
// 如果調(diào)用此函數(shù)后不清理定時(shí)器，則會(huì)造成內(nèi)存泄漏

修復(fù)：

const timer = setInterval(() => {
    console.log('Timer running...');
}, 1000);
clearInterval(timer); // 組件銷毀時(shí)清理

2. DOM 引用未釋放

場(chǎng)景：保留對(duì)已移除 DOM 元素的引用。
結(jié)果：雖然 DOM 節(jié)點(diǎn)從頁(yè)面上被刪除，但 JavaScript 中仍有對(duì)它的引用，導(dǎo)致內(nèi)存泄漏。
示例：

let element = document.getElementById('leak');
document.body.removeChild(element);
// 仍然引用 element，導(dǎo)致內(nèi)存無(wú)法釋放

修復(fù)：

element = null; // 手動(dòng)清除引用

3. 閉包中的多余引用

場(chǎng)景：閉包內(nèi)的變量保留了對(duì)外部對(duì)象的引用，導(dǎo)致對(duì)象無(wú)法被垃圾回收。
結(jié)果：長(zhǎng)時(shí)間的引用鏈阻止了內(nèi)存的釋放。
示例：

function createClosure() {
    const largeObject = new Array(1000).fill('leak');
    return function() {
        console.log(largeObject);
    };
}
const closure = createClosure();
// 即使 closure 不再使用，largeObject 依然存在

修復(fù)：

function createClosure() {
    let largeObject = new Array(1000).fill('leak');
    return function() {
        console.log(largeObject);
        largeObject = null; // 主動(dòng)清除引用
    };
}

4. 全局變量或未聲明變量

場(chǎng)景：未使用 var, let, 或 const 定義變量，導(dǎo)致變量掛載在全局作用域。
結(jié)果：全局變量生命周期與頁(yè)面一致，無(wú)法被垃圾回收。
示例：

function leak() {
    leakedVariable = 'I am a leak'; // 隱式全局變量
}
leak();

修復(fù)：

function noLeak() {
    let localVariable = 'I am safe'; // 使用局部作用域變量
}

5. 事件監(jiān)聽器未清理

場(chǎng)景：在 DOM 元素上綁定了事件監(jiān)聽器，但沒(méi)有在元素銷毀時(shí)移除。
結(jié)果：監(jiān)聽器仍然存在，阻止 DOM 元素被回收。
示例：

const button = document.getElementById('myButton');
button.addEventListener('click', () => console.log('點(diǎn)擊!'));
document.body.removeChild(button);
// 內(nèi)存泄漏：button 和監(jiān)聽器仍被引用

修復(fù)：

const button = document.getElementById('myButton');
const handler = () => console.log('點(diǎn)擊!');
button.addEventListener('click', handler);
button.removeEventListener('click', handler); // 組件銷毀時(shí)移除
document.body.removeChild(button);

6. 忘記清理 Map/Set 中的鍵或值

場(chǎng)景：Map 或 Set 中的鍵/值對(duì)象未手動(dòng)移除。
結(jié)果：即使這些對(duì)象不再需要，也會(huì)因其被引用而無(wú)法回收。
示例：

const map = new Map();
const obj = { key: 'value' };
map.set(obj, 'data');
// 即使 obj 不再使用，map 仍然引用它

修復(fù)：

map.delete(obj); // 手動(dòng)清理不需要的鍵

7. 閉環(huán)引用

場(chǎng)景：兩個(gè)對(duì)象互相引用，導(dǎo)致垃圾回收無(wú)法判斷它們是否可釋放。
結(jié)果：循環(huán)引用造成內(nèi)存泄漏。
示例：

function CircularReference() {
    const obj1 = {};
    const obj2 = {};
    obj1.ref = obj2;
    obj2.ref = obj1;
}

修復(fù)：

// 如果可能，避免互相引用，或通過(guò) WeakMap/WeakSet 管理對(duì)象
const obj1 = new WeakMap();
const obj2 = {};
obj1.set(obj2, 'value');

責(zé)任編輯：武曉燕來(lái)源：程序員Sunday

JS 內(nèi)存管理