預(yù)防解決你不知道的JavaScript正在泄漏內(nèi)存

更新時(shí)間：2023年10月24日 11:30:05 作者：王大冶

這篇文章主要為大家介紹了你不知道的JavaScript正在泄漏內(nèi)存預(yù)防及解決方法實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>

引言

內(nèi)存泄漏可以被視為你家中的水泄漏；雖然一開始小滴水可能看起來(lái)不是什么大問(wèn)題，但隨著時(shí)間的推移，它們可能會(huì)造成嚴(yán)重的損害。

同樣，在JavaScript中，當(dāng)不再需要的對(duì)象沒(méi)有從內(nèi)存中釋放時(shí)，就會(huì)發(fā)生內(nèi)存泄漏。隨著時(shí)間的推移，這種累積的內(nèi)存使用可以減慢甚至崩潰你的應(yīng)用程序。

垃圾收集器的角色

在編程領(lǐng)域，尤其是在處理 JavaScript 等語(yǔ)言時(shí)，內(nèi)存管理至關(guān)重要。幸運(yùn)的是，JavaScript 內(nèi)置了一個(gè)名為 "垃圾回收器"（GC）的機(jī)制來(lái)幫助實(shí)現(xiàn)這一目標(biāo)。想象一下，一個(gè)勤勞的清潔工會(huì)定期清掃你的房子，撿起任何不用的物品并丟棄，以保持整潔。

垃圾回收器會(huì)定期檢查不再需要或不再可訪問(wèn)的對(duì)象，并釋放它們占用的內(nèi)存。在理想情況下，它可以無(wú)縫運(yùn)行，確保未使用的內(nèi)存無(wú)需任何人工干預(yù)即可回收。然而，就像我們的清潔工有時(shí)可能會(huì)忽略隱藏角落里的閑置物品一樣，垃圾回收器也可能會(huì)遺漏因引用而無(wú)意中保持存活的對(duì)象，從而導(dǎo)致內(nèi)存泄漏。這就是為什么了解內(nèi)存管理的細(xì)微差別并注意潛在的隱患對(duì)于任何開發(fā)人員來(lái)說(shuō)都至關(guān)重要

現(xiàn)在，讓我們來(lái)看看哪些因素會(huì)導(dǎo)致應(yīng)用程序內(nèi)存泄漏

1. 全局變量

在 JavaScript 中，最高級(jí)別的作用域是全局作用域。在此作用域中聲明的變量可從代碼中的任何地方訪問(wèn)，這可能很方便，但也有風(fēng)險(xiǎn)。對(duì)這些變量的不當(dāng)管理可能會(huì)導(dǎo)致意外的內(nèi)存保留。

原因是什么？當(dāng)一個(gè)變量在未使用 let 、 const 或 var 聲明的情況下被錯(cuò)誤賦值時(shí)，它就會(huì)成為一個(gè)全局變量。此類變量駐留在全局作用域中，除非顯式刪除，否則會(huì)在應(yīng)用程序的整個(gè)生命周期中持續(xù)存在。

例如：假設(shè)你正在創(chuàng)建一個(gè)計(jì)算矩形面積的函數(shù)：

function calculateArea(width, height) {
  area = width * height; // 誤地創(chuàng)建全局變量“area”
  return area;
}
calculateArea(10, 5);

這里， area 變量無(wú)意中被全局化，因?yàn)樗鼪](méi)有與 let 、 const 或 var 一起聲明。這意味著函數(shù)執(zhí)行后， area 仍然可以訪問(wèn)并占用內(nèi)存：

console.log(area); // Outputs: 50

避免：最佳做法是始終使用 let 、 const 或 var 聲明變量，以確保它們具有正確的作用域，不會(huì)無(wú)意中成為全局變量。此外，如果你有意使用全局變量，請(qǐng)確保它們對(duì)于全局訪問(wèn)是必不可少的，并有意識(shí)地管理它們的生命周期。

修改上述示例以正確對(duì) area 變量進(jìn)行作用域設(shè)置：

function calculateArea(width, height) {
  let area = width * height; 
  return area;
}
calculateArea(10, 5);

現(xiàn)在，在函數(shù)執(zhí)行后， area 變量在函數(shù)之外不可訪問(wèn)，并且在函數(shù)執(zhí)行后將被正確垃圾回收。定時(shí)器和回調(diào)

2.定時(shí)器和回調(diào)函數(shù)

JavaScript提供了內(nèi)置函數(shù)，允許在特定的時(shí)間段后異步執(zhí)行代碼（使用 setTimeout）或以規(guī)律的間隔執(zhí)行（使用 setInterval）。盡管它們非常強(qiáng)大，但如果沒(méi)有正確管理，它們可能無(wú)意中導(dǎo)致內(nèi)存泄漏。

原因：如果一個(gè)間隔或超時(shí)引用了一個(gè)對(duì)象，只要定時(shí)器還在運(yùn)行，它就可以保持該對(duì)象在內(nèi)存中，即使應(yīng)用程序的其他部分不再需要該對(duì)象。

示例：

假設(shè)你有一個(gè)表示用戶數(shù)據(jù)的對(duì)象，并設(shè)置一個(gè)間隔每5秒更新這些數(shù)據(jù)：

let userData = {
  name: "John",
  age: 25
};
let intervalId = setInterval(() => {
  // 每5秒更新userData
  userData.age += 1;
}, 5000);

現(xiàn)在，如果某個(gè)時(shí)刻你不再需要更新userData，但忘記清除間隔，它會(huì)繼續(xù)運(yùn)行，阻止 userData 被垃圾回收。

避免方法：關(guān)鍵是在不需要定時(shí)器時(shí)始終停止它們。如果你完成了一個(gè)間隔或超時(shí)，使用clearInterval()或clearTimeout()分別清除它們。

繼續(xù)上面的示例，如果你決定不再需要更新 userData，你可以這樣清除間隔：

clearInterval(intervalId);

這會(huì)停止間隔，并允許其回調(diào)中引用的任何對(duì)象有資格進(jìn)行垃圾回收，前提是沒(méi)有其他揮之不去的引用。

3. 閉包

在JavaScript中，函數(shù)具有“記憶”它們創(chuàng)建時(shí)的環(huán)境的特殊能力。這種能力使內(nèi)部函數(shù)可以訪問(wèn)外部（封閉）函數(shù)的變量，即使外部函數(shù)已經(jīng)完成其執(zhí)行。這種現(xiàn)象被稱為“閉包”。

原因：閉包的能力伴隨著責(zé)任。閉包保持對(duì)其外部環(huán)境變量的引用，這意味著如果閉包仍然活著（例如作為回調(diào)或在事件監(jiān)聽(tīng)器中），它引用的變量將不會(huì)被垃圾回收，即使外部函數(shù)早已完成其執(zhí)行。
示例：

假設(shè)你有一個(gè)創(chuàng)建倒計(jì)時(shí)的函數(shù)：

function createCountdown(start) {
  let count = start;
  return function() {
    return count--;
  };
}
let countdownFrom10 = createCountdown(10);

這里，countdownFrom10 是一個(gè)閉包。每次調(diào)用它時(shí)，它會(huì)將 count 變量減少一個(gè)。由于內(nèi)部函數(shù)保持對(duì) count 的引用，count 變量不會(huì)被垃圾回收，即使在程序的其他地方?jīng)]有對(duì)createCountdown函數(shù)的其他引用。

現(xiàn)在想象一下，如果count是一個(gè)更大、更消耗內(nèi)存的對(duì)象，閉包無(wú)意中將其保留在內(nèi)存中。

避免方法：雖然閉包是一個(gè)強(qiáng)大的特性并且經(jīng)常是必要的，但重要的是要注意它們引用的內(nèi)容。確保你：

只捕獲你需要的內(nèi)容：除非必要，不要在閉包中捕獲大對(duì)象或數(shù)據(jù)結(jié)構(gòu)。
完成后斷開引用：如果一個(gè)閉包被用作事件監(jiān)聽(tīng)器或回調(diào)，你不再需要它，就刪除監(jiān)聽(tīng)器或使回調(diào)為null，以斷開閉包的引用。

修改上面的示例以有意斷開引用：

function createCountdown(start) {
  let count = start;
  return function() {
    return count--;
  };
}
let countdownFrom10 = createCountdown(10);
countdownFrom10 = null;

4. 事件監(jiān)聽(tīng)器

JavaScript中的事件監(jiān)聽(tīng)器通過(guò)允許我們“監(jiān)聽(tīng)”特定的事件（如點(diǎn)擊或按鍵）并在這些事件發(fā)生時(shí)采取行動(dòng)，實(shí)現(xiàn)交互性。但與其他JavaScript功能一樣，如果不仔細(xì)管理，它們可能會(huì)成為內(nèi)存泄漏的來(lái)源。

原因：當(dāng)你將事件監(jiān)聽(tīng)器附加到DOM元素時(shí)，它在該函數(shù)（通常是閉包）和該元素之間創(chuàng)建了一個(gè)綁定。如果刪除了元素或不再需要該事件監(jiān)聽(tīng)器，但沒(méi)有明確刪除監(jiān)聽(tīng)器，關(guān)聯(lián)的函數(shù)仍留在內(nèi)存中，可能保留其引用的其他變量和元素。

示例：

假設(shè)你有一個(gè)按鈕，你將一個(gè)點(diǎn)擊監(jiān)聽(tīng)器附加到它：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('Button was clicked!');
});

現(xiàn)在，稍后在你的應(yīng)用程序中，你決定從DOM中刪除按鈕：

button.remove();

即使按鈕從DOM中刪除，事件監(jiān)聽(tīng)器的函數(shù)仍然保留對(duì)按鈕的引用。這意味著按鈕不會(huì)被垃圾回收，導(dǎo)致內(nèi)存泄漏。

避免方法：關(guān)鍵是積極管理你的事件監(jiān)聽(tīng)器：

明確刪除：在刪除元素或不再需要它們時(shí)，使用removeEventListener()始終刪除事件監(jiān)聽(tīng)器。

使用一次：如果你知道一個(gè)事件只需要一次，你可以在添加監(jiān)聽(tīng)器時(shí)使用{ once: true }選項(xiàng)。
修改上面的示例以進(jìn)行正確管理：

const button = document.getElementById('myButton');
function handleClick() {
  console.log('Button was clicked!');
}
button.addEventListener('click', handleClick);
// 稍后在代碼中，當(dāng)我們完成按鈕時(shí)：
button.removeEventListener('click', handleClick);
button.remove();

通過(guò)在刪除按鈕之前明確地刪除事件監(jiān)聽(tīng)器，我們確保監(jiān)聽(tīng)器的函數(shù)和按鈕本身都可以被垃圾回收。

5. 分離的DOM元素

文檔對(duì)象模型（DOM）是網(wǎng)頁(yè)上所有元素的分層表示。當(dāng)你修改DOM，例如通過(guò)刪除元素，但仍然在JavaScript中持有對(duì)該元素的引用，你就已經(jīng)創(chuàng)建了所謂的 “分離的DOM元素” 。這些元素不再可見(jiàn)，但由于它們?nèi)匀槐淮a引用，所以它們不能被垃圾回收。

原因：當(dāng)從DOM中刪除元素但仍有指向它們的JavaScript引用時(shí)，會(huì)創(chuàng)建分離的DOM元素。這些引用阻止垃圾回收器回收這些元素占用的內(nèi)存。

示例：

假設(shè)你有一個(gè)物品列表，并且決定刪除一個(gè)：

let listItem = document.getElementById('itemToRemove');
listItem.remove();

現(xiàn)在，即使您已經(jīng)從DOM中刪除了 listItem，你仍然在 listItem 變量中對(duì)其有引用。這意味著實(shí)際的元素仍然在內(nèi)存中，從DOM中分離但占用空間。

避免方法：為了防止分離的DOM元素引起的內(nèi)存泄漏：

使引用為 null：刪除DOM元素后，使對(duì)其的任何引用為 null：

listItem.remove();
listItem = null;

限制元素引用：只在絕對(duì)需要時(shí)存儲(chǔ)對(duì)DOM元素的引用。如果你只需要對(duì)元素執(zhí)行單一操作，那么你不需要保留對(duì)它的長(zhǎng)時(shí)間引用。

修改上面的示例以防止內(nèi)存泄漏：

let listItem = document.getElementById('itemToRemove');
listItem.remove();
listItem = null;  // 斷開對(duì)分離的DOM元素的引用

通過(guò)在從DOM中刪除 listItem 后使 listItem 引用為null，我們確保垃圾回收器可以回收已刪除元素占用的內(nèi)存。

Websockets和外部連接

Websockets 提供了一個(gè)全雙工通信通道，通過(guò)單個(gè)、長(zhǎng)時(shí)間的連接。這使它非常適合實(shí)時(shí)應(yīng)用，如聊天應(yīng)用、在線游戲和實(shí)時(shí)體育更新。然而，由于 Websockets 的性質(zhì)是保持開放的，如果不正確處理，它們可能成為內(nèi)存泄漏的潛在來(lái)源。

原因：當(dāng) Websockets和其他持久的外部連接管理不當(dāng)時(shí)，它們即使不再需要也可以持有對(duì)象或回調(diào)的引用。這可以阻止這些引用的對(duì)象被垃圾回收，導(dǎo)致內(nèi)存泄漏。

示例：

假設(shè)你有一個(gè)應(yīng)用程序，該應(yīng)用程序打開一個(gè) websocket 連接以接收實(shí)時(shí)更新：

let socket = new WebSocket('ws://example.com/updates');

socket.onmessage = function(event) {
  console.log(`Received update: ${event.data}`);
};

現(xiàn)在，如果在某個(gè)時(shí)候，您導(dǎo)航離開了應(yīng)用的這一部分或關(guān)閉了使用此連接的特定UI組件，但忘記關(guān)閉 websocket，它仍然保持打開狀態(tài)。與其事件監(jiān)聽(tīng)器關(guān)聯(lián)的任何對(duì)象或閉包都不能被垃圾回收。

避免方法：積極管理websocket連接至關(guān)重要：

明確關(guān)閉：當(dāng)不再需要時(shí)，始終使用 close() 方法關(guān)閉 websocket 連接：

socket.close();

引用為 null：關(guān)閉 websocket 連接后，使任何關(guān)聯(lián)的引用為 null 以幫助垃圾回收器：

socket.onmessage = null;
socket = null;

錯(cuò)誤處理：實(shí)施錯(cuò)誤處理以檢測(cè)連接何時(shí)丟失或意外終止，然后清理任何相關(guān)的資源。

繼續(xù)上面的示例，正確的管理看起來(lái)是這樣的：

let socket = new WebSocket('ws://example.com/updates');
socket.onmessage = function(event) {
  console.log(`Received update: ${event.data}`);
};
// 稍后在代碼中，當(dāng)連接不再需要時(shí)：
socket.close();
socket.onmessage = null;
socket = null;