造成記憶體洩漏的操作有哪些？

王铁柱6發表於2024-11-22
記憶體

前端開發中，造成記憶體洩漏的操作主要有以下幾種：

1. 意外的全域性變數:

  • 未宣告變數（在非嚴格模式下），會被隱式地建立為全域性變數。
  • this的誤用：在非嚴格模式下，在某些情況下，this可能會指向全域性物件（例如在事件處理函式中，如果沒有繫結正確的上下文）。

2. 被遺忘的計時器或回撥函式:

  • setInterval 和 setTimeout：如果沒有使用clearInterval或clearTimeout清除計時器，計時器回撥函式以及其引用的變數將一直保留在記憶體中，即使不再需要它們。
  • 事件監聽器：如果沒有使用removeEventListener移除事件監聽器，相關的回撥函式和其引用的變數也會一直存在於記憶體中。 這在單頁應用 (SPA) 中尤其常見，元件解除安裝時，需要清理繫結的事件。

3. 脫離 DOM 樹的引用:

  • 對 DOM 元素的引用：如果 JavaScript 程式碼保留了對已從 DOM 樹中移除的元素的引用，即使元素本身已經不存在，JavaScript 仍然持有該引用，阻止垃圾回收。

4. 閉包陷阱:

  • 閉包可以訪問其外部函式的作用域。如果外部函式的變數被內部函式（閉包）引用，並且閉包持續存在（例如，被儲存在一個全域性變數或陣列中），那麼外部函式的變數將無法被垃圾回收，即使外部函式已經執行完畢。

5. 快取:

  • 無限增長的快取：如果快取沒有限制大小或沒有清除策略，它可能會無限增長，最終導致記憶體洩漏。

6. 分離的 DOM 樹 (Detached DOM trees):

  • 建立大量的 DOM 節點，但沒有將它們新增到文件中，也沒有清除對它們的引用。

7. Web Workers:

  • 向 Web Workers 傳送大量資料，而沒有正確管理訊息傳遞和記憶體清理。

一些具體的例子：

// 意外的全域性變數
function leak() {
  leaked = 'oops'; // 忘記了 var/let/const
}

// 被遺忘的計時器
setInterval(() => {
  // do something
}, 1000); // 沒有清除

// 被遺忘的事件監聽器
const element = document.getElementById('myElement');
element.addEventListener('click', () => {
  // do something
}); // 沒有移除監聽器


// 脫離 DOM 樹的引用
const element = document.getElementById('myElement');
document.body.removeChild(element);  // 元素移除
// 但是變數 element 仍然引用著被移除的元素

// 閉包陷阱
function outer() {
  const bigArray = new Array(1000000).fill(0);
  return function inner() {
    console.log(bigArray[0]);
  }
  const myClosure = inner();
  // bigArray 無法被回收，因為 myClosure 引用了它
}

// 快取
const cache = {};
function addToCache(key, value) {
  cache[key] = value;  // 沒有清除策略
}

如何避免記憶體洩漏：

  • 使用嚴格模式 ('use strict')：有助於避免意外的全域性變數。
  • 及時清除計時器和事件監聽器。
  • 避免對已從 DOM 樹中移除的元素的引用。
  • 小心使用閉包，確保不會意外地保留對外部作用域的引用。
  • 使用合適的快取策略，例如 LRU 快取。
  • 使用記憶體分析工具，例如 Chrome DevTools 的 Memory 皮膚，來識別和修復記憶體洩漏。

透過理解這些常見的記憶體洩漏模式和採取相應的預防措施，可以有效地提升 Web 應用的效能和穩定性。

相關文章