介紹

作為 Web 開發人員，您知道您編寫的每一行代碼都會對應用程序的性能產生影響嗎？談到 JavaScript，最需要關注的領域之一就是內存管理。

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

但它不一定是這樣的。憑借正確的知識和技術，您可以控制您的 JavaScript 內存并確保您的應用程序平穩高效地運行。

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

了解 JavaScript 內存管理

1.垃圾收集器

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

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

2. 堆棧與堆

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

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

另一方面，堆用于存儲應用程序整個生命周期所需的數據。它比棧慢一點，組織性差一點，但容量大得多。堆用于存儲對象、數組和其他需要多次訪問的復雜數據結構。

內存泄漏的常見原因

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

1. 循環引用

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

這是示例：

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;

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

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

為了避免這種類型的內存泄漏，我們可以使用一種稱為“手動內存管理”的技術，通過使用 JavaScript 的 delete 關鍵字來刪除創建循環引用的屬性。

delete object1.next;
delete object2.prev;

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

2.事件監聽器

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

我們一起來看一個例子：

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 中刪除該按鈕。即使按鈕元素不再存在于文檔中，事件偵聽器仍附加到它，這會創建對偵聽器函數的引用，以防止垃圾收集器釋放該元素使用的內存。如果在不再需要該元素時未刪除偵聽器函數，這可能會導致內存泄漏。

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

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

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

button.removeAllListeners();

3.全局變量

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

// 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;

在這個例子中，我們創建了一個全局變量 myData 并在其中存儲了大量數據。

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

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

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


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

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

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


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

手動內存管理的最佳實踐

JavaScript 提供了內存管理工具和技術，可以幫助您控制應用程序的內存使用情況。

1.使用弱引用

JavaScript 中最強大的內存管理工具之一是 WeakMap 和 WeakSet。這些是特殊的數據結構，允許您創建對對象和變量的弱引用。

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

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

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

因為對這些對象的引用很弱，垃圾收集器將能夠釋放它們使用的內存，即使它們仍在被引用。這有助于防止循環引用引起的內存泄漏。

2. 使用垃圾收集器 API

另一種內存管理技術是使用垃圾收集器 API，它允許您手動觸發垃圾收集并獲取有關堆當前狀態的信息。

這對于調試內存泄漏和性能問題很有用。

以下是一個例子：

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


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


// manually trigger garbage collection
gc();

在此示例中，我們創建了兩個對象，object1 和 object2，并通過向它們添加 next 和 prev 屬性在它們之間創建循環引用。然后，我們使用 gc() 函數手動觸發垃圾收集，這將釋放對象使用的內存，即使它們仍在被引用。

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

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

3. 使用堆快照和分析器

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

下面是一個示例，說明如何使用堆快照來識別應用程序中的內存泄漏：

// 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);
  }
});

在此示例中，我們在執行將大數據推送到數組的循環之前和之后拍攝兩個堆快照，然后，比較這兩個快照以識別在循環期間創建的對象。

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

分析器允許您跟蹤應用程序的性能并識別內存使用率高的區域：

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 分析器來開始和停止跟蹤我們應用程序的性能。該報告將顯示有關已調用函數的信息以及每個函數的內存使用情況。

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

結論

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

通過花時間了解和實施這些內存管理最佳實踐，您將能夠創建消除內存泄漏可能性的應用程序。