PJCHENder 未整理筆記

[筆記] 記憶體問題 memory leak

2019-07-29

[筆記] 記憶體問題 memory leak

@(Google Chrome)[google developers, chrome]

keywords: memory leaks, memory bloat, garbage collection

在前端開發時常出現的記憶體問題包含記憶體洩漏(memory leaks)、記憶體膨脹(memory bloat)和過度的垃圾回收(frequent garbage collection)

導致記憶體洩漏的常見原因包含:

  • 忘記解除 event listener 的註冊
  • Capturing objects from an iframe
  • 忘記關閉 worker
  • Accumulating objects in arrays

如何判斷有記憶體問題

使用 performance.measureMemory 方法

由於記憶體是有限的資源,當瀏覽器偵測到某個物件不在被使用時,會執行垃圾回收(garbage collection)的機制,以此釋放記憶體空間。下面這個例子便會導致記憶體洩漏(memory leak):

1
2
const object = { a: new Array(1000), b: new Array(2000) };
setInterval(() => console.log(object.a), 1000);

這裡雖然 b 不再被需要,但瀏覽器並不會回收(reclaim)它,因為透過 object.b 仍然可以存取到它,進而導致儲存這個陣列的記憶體有無法被回收(洩漏)的問題。當記憶體洩漏的問題發生時,隨著時間拉長,網頁的速度會越來越慢。

1
2
3
4
5
6
7
8
if (performance.measureMemory) {
try {
const result = await performance.measureMemory();
console.log(result);
} catch (err) {
console.error(err);
}
}

參考

掃描二維條碼,分享此文章