阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

小編精選 - 技術文章翻譯 · 11月09日

大型 app 的 JavaScript 記憶體管理與最佳化

記憶體管理對於 JavaScript 應用程式至關重要，尤其是當它們擴展時。無論是建立 Web 應用程式還是複雜的伺服器端應用程式，優化記憶體使用都可以使您的程式碼更快，防止記憶體洩漏，並為用戶創造整體更流暢的體驗。讓我們看看 JavaScript 如何處理內存，辨識常見陷阱，並探索如何優化內存使用。

理解JavaScript的記憶體生命週期

JavaScript 有一個自動垃圾收集系統，這意味著它會根據需要分配和釋放記憶體。然而，了解 JavaScript 如何管理記憶體對於避免過度使用記憶體資源至關重要。

關鍵記憶階段：

分配：變數、物件和函數在建立時會分配記憶體空間。
用法：當程式碼中需要變數或物件時，JavaScript 使用分配的記憶體。
釋放（垃圾收集）： JavaScript 的垃圾收集器 (GC) 定期從未引用的物件中釋放內存，從而允許重複使用資源。

然而，GC 並不能解決所有記憶體問題。如果您的程式碼不必要地保留引用，則可能會發生記憶體洩漏，從而導致記憶體使用量隨著時間的推移而增加，並可能減慢整個應用程式的速度。

JavaScript 中常見的記憶體洩漏

1. 全域變數：

全域變數在應用程式的生命週期內持續存在，並且很少被垃圾收集。當變數的作用域不正確時，這可能會導致意外的記憶體洩漏。

function myFunc() {
    globalVar = "I'm a memory leak!";
}

此處， globalVar的定義並沒有使用let 、 const或var ，無意中使其成為全域變數。

分離的 DOM 節點：

從文件中刪除的 DOM 節點仍然可以在 JavaScript 中引用，將它們保留在記憶體中，即使它們不再顯示。

let element = document.getElementById("myElement");
document.body.removeChild(element);  // Node is removed but still referenced

定時器和回調：

如果沒有清除， setInterval和setTimeout可能會保存對回呼和變數的引用，從而導致長時間執行的應用程式中出現記憶體洩漏。

let intervalId = setInterval(() => {
    console.log("Running indefinitely...");
}, 1000);

// To clear
clearInterval(intervalId);

4. 關閉：

如果不小心使用，閉包可能會導致記憶體問題，因為它們維護對其外部函數變數的引用。按此處了解更多訊息

function outer() {
    let bigData = new Array(100000).fill("data");
    return function inner() {
        console.log(bigData.length);
    };
}

在這裡， inner將bigData保留在記憶體中，即使不再需要它。

預防和修復記憶體洩漏的策略

1. 最小化全域變數：

盡可能將變數保留在函數或區塊範圍內，以避免不必要的記憶體持久性。

2. 清除分離 DOM 節點的參考：

確保從 DOM 中刪除節點時引用 DOM 節點的變數設定為null 。

document.body.removeChild(element);
element = null;  // Clear the reference

3. 管理定時器和事件監聽器：

當不再需要時清除所有計時器和偵聽器，尤其是在元件動態安裝和卸載的單頁應用程式中。

let timer = setInterval(doSomething, 1000);
// Clear when no longer needed
clearInterval(timer);

4. 盡可能避免大規模關閉：

避免使用保留大型資料結構或引用的閉包。或者，重新建構程式碼以最小化閉包範圍。

4.內存優化技術

1.使用弱引用：

JavaScript 的WeakMap和WeakSet可以保存物件，而不會在物件不再使用時阻止垃圾回收。

const weakMap = new WeakMap();
let element = document.getElementById("myElement");
weakMap.set(element, "some metadata");
element = null;  // Now GC can collect it

2.延遲載入：

僅在需要時載入必要的資料或模組。這可以防止初始載入未使用的資源，從而減少記憶體使用和載入時間。

3.高效率的資料結構：

處理大量資料時，使用Map 、 Set和其他高效的資料結構來取代普通物件和陣列。

const data = new Map();
data.set("key", { /* large data */ });

4. 整合資源：

不要重複建立和銷毀實例，而是重複使用它們。物件池對於管理頻繁建立和丟棄的物件特別有效。

const pool = [];
function createPooledObject() {
    if (pool.length > 0) return pool.pop();
    else return new LargeObject();
}

分析和監控記憶體使用情況

使用開發人員工具監視記憶體使用情況可以幫助您視覺化程式碼中的記憶體洩漏和低效模式。

Chrome DevTools 記憶體標籤：

堆快照：顯示 JS 物件和 DOM 節點的記憶體使用情況。
分配時間軸：追蹤一段時間內的記憶體分配。
分配分析器：監視記憶體分配以偵測洩漏或大量記憶體使用。

要在 Chrome DevTools 中拍攝堆快照：

開啟開發工具（ F12或Ctrl+Shift+I ）。
轉到內存選項卡。
選擇堆快照並點擊拍攝快照。
JavaScript 中的高階垃圾收集技術

JavaScript 的垃圾收集不是瞬時的，了解底層演算法可以幫助您做出更好的程式碼決策。以下是 JavaScript 垃圾收集器工作原理的快速概述：

標記和清除：

垃圾收集器標記活動（可到達）物件並「清除」掉那些不活動的物件。

增量收集：

JavaScript 不是一次清除整個內存，而是逐步收集較小的部分，以避免停止主線程。

世代收藏：

此技術按年齡對物件進行分類。短壽命物件比長壽命物件更頻繁地被收集，長壽命物件往往會持久存在記憶體中。

記憶體優化的實際範例

讓我們考慮一個優化高記憶體 JavaScript 應用程式的範例，例如處理大型資料集的資料視覺化工具。

// Inefficient Version
function processData(data) {
    let result = [];
    for (let item of data) {
        result.push(expensiveOperation(item));
    }
    return result;
}

上面的函數每次被呼叫時都會建立一個新陣列。透過重複使用陣列或使用WeakMap ，可以優化記憶體使用。

// Optimized Version
const cache = new WeakMap();
function processData(data) {
    if (!cache.has(data)) {
        cache.set(data, data.map(expensiveOperation));
    }
    return cache.get(data);
}

使用WeakMap ，我們可以避免不必要地保留data ，透過在不再需要時釋放資料來減少記憶體使用。