介紹

作為 Web 開發(fā)人員，您知道您編寫的每一行代碼都會對應(yīng)用程序的性能產(chǎn)生影響嗎？談到 JavaScript，最需要關(guān)注的領(lǐng)域之一就是內(nèi)存管理。

想一想，每次用戶與您的網(wǎng)站交互時，他們都會創(chuàng)建新的對象、變量和函數(shù)。如果您不小心，這些對象可能會堆積起來，阻塞瀏覽器的內(nèi)存并降低整個用戶體驗。這就像信息高速公路上的交通堵塞，一個令人沮喪的瓶頸，可以讓用戶望而卻步。

但它不一定是這樣的。憑借正確的知識和技術(shù)，您可以控制您的 JavaScript 內(nèi)存并確保您的應(yīng)用程序平穩(wěn)高效地運行。

在今天的文章中，我們將探討 JavaScript 內(nèi)存管理的來龍去脈，包括內(nèi)存泄漏的常見原因以及避免它們的策略。無論您是專業(yè)的還是新手JavaScript開發(fā)人員，您都會對如何編寫精簡、平均和快速的代碼有更深入的了解。

了解 JavaScript 內(nèi)存管理

1.垃圾收集器

JavaScript 引擎使用垃圾收集器來釋放不再使用的內(nèi)存。垃圾收集器的工作是識別并刪除應(yīng)用程序不再使用的對象。它通過持續(xù)監(jiān)控代碼中的對象和變量，并跟蹤哪些對象和變量仍在被引用來實現(xiàn)這一點。一旦一個對象不再被使用，垃圾收集器將其標記為刪除并釋放它正在使用的內(nèi)存。

垃圾收集器使用一種稱為“標記和清除”的技術(shù)來管理內(nèi)存。它首先標記所有仍在使用的對象，然后“掃過”堆并刪除所有未標記的對象。這個過程會定期進行，并且在堆內(nèi)存不足時進行，以確保應(yīng)用程序的內(nèi)存使用始終盡可能高效。

2. 堆棧與堆

當談到 JavaScript 中的內(nèi)存時，有兩個主要參與者：堆棧和堆。

堆棧用于存儲僅在函數(shù)執(zhí)行期間需要的數(shù)據(jù)。它快速高效，但容量有限。當一個函數(shù)被調(diào)用時，JavaScript 引擎將函數(shù)的變量和參數(shù)壓入堆棧，當函數(shù)返回時，它再次將它們彈出。堆棧用于快速訪問和快速內(nèi)存管理。

另一方面，堆用于存儲應(yīng)用程序整個生命周期所需的數(shù)據(jù)。它比棧慢一點，組織性差一點，但容量大得多。堆用于存儲對象、數(shù)組和其他需要多次訪問的復(fù)雜數(shù)據(jù)結(jié)構(gòu)。

內(nèi)存泄漏的常見原因

您很清楚內(nèi)存泄漏可能是一個偷偷摸摸的敵人，它會潛入您的應(yīng)用程序并導(dǎo)致性能問題。通過了解內(nèi)存泄漏的常見原因，您可以用戰(zhàn)勝它們所需的知識武裝自己。

1. 循環(huán)引用

內(nèi)存泄漏的最常見原因之一是循環(huán)引用。當兩個或多個對象相互引用時，就會發(fā)生這種情況，從而形成垃圾收集器無法破壞的循環(huán)。這可能會導(dǎo)致對象在不再需要后很長時間內(nèi)仍保留在內(nèi)存中。

這是示例：

let object1 = {};
let object2 = {};


// create a circular reference between object1 and object2
object1.next = object2;
object2.prev = object1;


// do something with object1 and object2
// ...


// set object1 and object2 to null to break the circular reference
object1 = null;
object2 = null;

在此示例中，我們創(chuàng)建了兩個對象，object1 和 object2，并通過向它們添加 next 和 prev 屬性在它們之間創(chuàng)建循環(huán)引用。

然后，我們將 object1 和 object2 設(shè)置為 null 以打破循環(huán)引用，但由于垃圾收集器無法打破循環(huán)引用，因此對象將在不再需要后很長時間內(nèi)保留在內(nèi)存中，從而導(dǎo)致內(nèi)存泄漏。

為了避免這種類型的內(nèi)存泄漏，我們可以使用一種稱為“手動內(nèi)存管理”的技術(shù)，通過使用 JavaScript 的 delete 關(guān)鍵字來刪除創(chuàng)建循環(huán)引用的屬性。

delete object1.next;
delete object2.prev;

避免此類內(nèi)存泄漏的另一種方法是使用 WeakMap 和 WeakSet，它們允許您創(chuàng)建對對象和變量的弱引用，您可以在本文后面閱讀有關(guān)此選項的更多信息。

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

內(nèi)存泄漏的另一個常見原因是事件監(jiān)聽器，當您將事件偵聽器附加到元素時，它會創(chuàng)建對偵聽器函數(shù)的引用，該函數(shù)可以防止垃圾收集器釋放元素使用的內(nèi)存。如果在不再需要該元素時未刪除偵聽器函數(shù)，這可能會導(dǎo)致內(nèi)存泄漏。

我們一起來看一個例子：

let button = document.getElementById("my-button");


// attach an event listener to the button
button.addEventListener("click", function() {
  console.log("Button was clicked!");
});


// do something with the button
// ...


// remove the button from the DOM
button.parentNode.removeChild(button);

在此示例中，我們將事件偵聽器附加到按鈕元素，然后從 DOM 中刪除該按鈕。即使按鈕元素不再存在于文檔中，事件偵聽器仍附加到它，這會創(chuàng)建對偵聽器函數(shù)的引用，以防止垃圾收集器釋放該元素使用的內(nèi)存。如果在不再需要該元素時未刪除偵聽器函數(shù)，這可能會導(dǎo)致內(nèi)存泄漏。

為避免此類內(nèi)存泄漏，在不再需要該元素時刪除事件偵聽器很重要：

button.removeEventListener("click", function() {
  console.log("Button was clicked!");
});

另一種方法是使用 EventTarget.removeAllListeners() 方法刪除所有已添加到特定事件目標的事件偵聽器。

button.removeAllListeners();

3.全局變量

內(nèi)存泄漏的第三個常見原因是全局變量。當您創(chuàng)建全局變量時，可以從代碼中的任何位置訪問它，這使得很難確定何時不再需要它。這可能會導(dǎo)致變量在不再需要后很長時間仍保留在內(nèi)存中。這是一個例子：

// create a global variable
let myData = {
  largeArray: new Array(1000000).fill("some data"),
  id: 1
};


// do something with myData
// ...


// set myData to null to break the reference
myData = null;

在這個例子中，我們創(chuàng)建了一個全局變量 myData 并在其中存儲了大量數(shù)據(jù)。

然后我們將 myData 設(shè)置為 null 以中斷引用，但是由于該變量是全局變量，它仍然可以從您的代碼中的任何位置訪問，并且很難確定何時不再需要它，這會導(dǎo)致該變量在內(nèi)存中保留很長時間 在不再需要它之后，導(dǎo)致內(nèi)存泄漏。

為避免這種類型的內(nèi)存泄漏，您可以使用“函數(shù)作用域”技術(shù)。它涉及創(chuàng)建一個函數(shù)并在該函數(shù)內(nèi)聲明變量，以便它們只能在函數(shù)范圍內(nèi)訪問。這樣，當不再需要該函數(shù)時，變量會自動被垃圾回收。

function myFunction() {
  let myData = {
    largeArray: new Array(1000000).fill("some data"),
    id: 1
  };


  // do something with myData
  // ...
}
myFunction();

另一種方法是使用 JavaScript 的 let 和 const 代替 var，這允許您創(chuàng)建塊范圍的變量。用 let 和 const 聲明的變量只能在定義它們的塊內(nèi)訪問，并且當它們超出范圍時將被自動垃圾收集。

{
  let myData = {
    largeArray: new Array(1000000).fill("some data"),
    id: 1
  };


  // do something with myData
  // ...
}

手動內(nèi)存管理的最佳實踐

JavaScript 提供了內(nèi)存管理工具和技術(shù)，可以幫助您控制應(yīng)用程序的內(nèi)存使用情況。

1.使用弱引用

JavaScript 中最強大的內(nèi)存管理工具之一是 WeakMap 和 WeakSet。這些是特殊的數(shù)據(jù)結(jié)構(gòu)，允許您創(chuàng)建對對象和變量的弱引用。

弱引用不同于常規(guī)引用，因為它們不會阻止垃圾收集器釋放對象使用的內(nèi)存。這使它們成為避免循環(huán)引用引起的內(nèi)存泄漏的好工具。這是一個例子：

let object1 = {};
let object2 = {};


// create a WeakMap
let weakMap = new WeakMap();


// create a circular reference by adding object1 to the WeakMap
// and then adding the WeakMap to object1
weakMap.set(object1, "some data");
object1.weakMap = weakMap;


// create a WeakSet and add object2 to it
let weakSet = new WeakSet();
weakSet.add(object2);


// in this case, the garbage collector will be able to free up the memory
// used by object1 and object2, since the references to them are weak

在這個例子中，我們創(chuàng)建了兩個對象，object1 和 object2，并通過將它們分別添加到 WeakMap 和 WeakSet 來創(chuàng)建它們之間的循環(huán)引用。

因為對這些對象的引用很弱，垃圾收集器將能夠釋放它們使用的內(nèi)存，即使它們?nèi)栽诒灰?。這有助于防止循環(huán)引用引起的內(nèi)存泄漏。

2. 使用垃圾收集器 API

另一種內(nèi)存管理技術(shù)是使用垃圾收集器 API，它允許您手動觸發(fā)垃圾收集并獲取有關(guān)堆當前狀態(tài)的信息。

這對于調(diào)試內(nèi)存泄漏和性能問題很有用。

以下是一個例子：

let object1 = {};
let object2 = {};


// create a circular reference between object1 and object2
object1.next = object2;
object2.prev = object1;


// manually trigger garbage collection
gc();

在此示例中，我們創(chuàng)建了兩個對象，object1 和 object2，并通過向它們添加 next 和 prev 屬性在它們之間創(chuàng)建循環(huán)引用。然后，我們使用 gc() 函數(shù)手動觸發(fā)垃圾收集，這將釋放對象使用的內(nèi)存，即使它們?nèi)栽诒灰谩?/p>

請務(wù)必注意，并非所有 JavaScript 引擎都支持 gc() 函數(shù)，其行為也可能因引擎而異。還需要注意的是，手動觸發(fā)垃圾回收會對性能產(chǎn)生影響，因此，建議謹慎使用，僅在必要時使用。

除了 gc() 函數(shù)，JavaScript 還為一些 JavaScript 引擎提供了 global.gc() 和 global.gc() 函數(shù)，也為一些瀏覽器引擎提供了 performance.gc() ，可以用來檢查 堆的當前狀態(tài)并測量垃圾收集過程的性能。

3. 使用堆快照和分析器

JavaScript 還提供堆快照和分析器，可以幫助您了解您的應(yīng)用程序如何使用內(nèi)存。堆快照允許您拍攝堆當前狀態(tài)的快照并對其進行分析以查看哪些對象使用的內(nèi)存最多。

下面是一個示例，說明如何使用堆快照來識別應(yīng)用程序中的內(nèi)存泄漏：

// Start a heap snapshot
let snapshot1 = performance.heapSnapshot();


// Do some actions that might cause memory leaks
for (let i = 0; i < 100000; i++) {
  myArray.push({
    largeData: new Array(1000000).fill("some data"), 
    id: i
  });
}


// Take another heap snapshot
let snapshot2 = performance.heapSnapshot();


// Compare the two snapshots to see which objects were created
let diff = snapshot2.compare(snapshot1);


// Analyze the diff to see which objects are using the most memory
diff.forEach(function(item) {
  if (item.size > 1000000) {
    console.log(item.name);
  }
});

在此示例中，我們在執(zhí)行將大數(shù)據(jù)推送到數(shù)組的循環(huán)之前和之后拍攝兩個堆快照，然后，比較這兩個快照以識別在循環(huán)期間創(chuàng)建的對象。

接著，我們可以分析差異以查看哪些對象使用了最多的內(nèi)存，這可以幫助我們識別由大數(shù)據(jù)引起的內(nèi)存泄漏。

分析器允許您跟蹤應(yīng)用程序的性能并識別內(nèi)存使用率高的區(qū)域：

let profiler = new Profiler();


profiler.start();


// do some actions that might cause memory leaks
for (let i = 0; i < 100000; i++) {
  myArray.push({
    largeData: new Array(1000000).fill("some data"), 
    id: i
  });
}


profiler.stop();


let report = profiler.report();


// analyze the report to identify areas where memory usage is high
for (let func of report) {
  if (func.memory > 1000000) {
    console.log(func.name);
  }
}

在這個例子中，我們使用 JavaScript 分析器來開始和停止跟蹤我們應(yīng)用程序的性能。該報告將顯示有關(guān)已調(diào)用函數(shù)的信息以及每個函數(shù)的內(nèi)存使用情況。

并非所有 JavaScript 引擎和瀏覽器都支持堆快照和分析器，因此在您的應(yīng)用程序中使用它們之前檢查兼容性很重要。

結(jié)論

我們已經(jīng)介紹了 JavaScript 內(nèi)存管理的基礎(chǔ)知識，包括垃圾回收過程、不同類型的內(nèi)存以及 JavaScript 中可用的內(nèi)存管理工具和技術(shù)。我們還討論了內(nèi)存泄漏的常見原因，并提供了如何避免它們的示例。

通過花時間了解和實施這些內(nèi)存管理最佳實踐，您將能夠創(chuàng)建消除內(nèi)存泄漏可能性的應(yīng)用程序。