腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

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

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

引言

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

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

垃圾收集器的角色

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

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

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

1. 全局變量

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

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

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

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

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

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

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

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

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

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

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

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

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

示例：

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

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

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

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

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

clearInterval(intervalId);

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

3. 閉包

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

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

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

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

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

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

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

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

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

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

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

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

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

示例：

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

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

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

button.remove();

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

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

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

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

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

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

5. 分離的DOM元素

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

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

示例：

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

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

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

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

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

listItem.remove();
listItem = null;

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

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

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

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

Websockets和外部連接

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

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

示例：

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

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

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

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

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

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

socket.close();

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

socket.onmessage = null;
socket = null;

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

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

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