Catching memory leaks with Chrome DevTools

當分配的內存沒有返回給操作系統或內存池時，我們將其稱為內存泄漏。 在這種情況下，內存未被任何應用程序使用，并且被不必要地占用。 這會導致低性能、高延遲和頻繁崩潰。

Understanding memory leaks

如果您熟悉 C 等低級語言，您一定使用過 malloc() 和 free()。 相比之下，JavaScript 在創建對象時自動分配內存，并在不再使用時釋放它。

好吧，因為它是自動管理的，所以我們作為開發人員總是有一個錯誤的印象，即我們不需要擔心瀏覽器中的內存管理。 如果一個站點使用越來越多的內存，這意味著沒有人收集它并且存在內存泄漏。

Garbage collectors

如果垃圾收集器 (GC) 是完美的，那么內存泄漏就不是問題。 問題是他們的算法不夠聰明，無法檢測內存泄漏。 因此，需要人工干預。

垃圾收集器執行查找程序不再使用的內存并將其釋放回操作系統以供將來重新分配的過程。 該方法有效，但仍然會發生內存泄漏。 該方法無法檢測每個泄漏，例如泄漏的引用。

Why is there a memory leak?

下列是幾種常見的內存泄漏類型。

Accidental global variables

function getWork() {this.work = “I am Memory leak”; } // The this here refers to window object and hence this variable will be created in the window. getWork();

這里的 this 指的是 window 對象，因此這個變量將在 window 中創建。

由于全局變量不是由 GC 收集的，如果此字符串變得太大，可能會導致內存泄漏。 意外全局變量的一個類似示例是在不使用 let 和 var 關鍵字的情況下聲明變量。

Detached DOM nodes

分離 DOM 節點是一個關鍵問題。 由于全局引用，分離的節點仍然存在于內存中。

var node = document.createElement(‘a’); node.id = 'id1'; document.body.appendChild(node); var main = {Id: document.getElementById(‘id1’) } function removeElement(){document.body.removeChild(document.getElementById(‘id1’)); } removeElement();

在上面的例子中，removeChild 函數從樹中移除了 DOM 節點，但是全局主對象中的引用 Id 仍然保留在內存中并且沒有被垃圾收集。

閉包

閉包為內部函數維護外部函數變量的范圍，即使在外部函數的范圍之外。

function getScore(x) {function score(y) {return x + y;}return score; } var initial = getScore(2); var final = initial(3);

這里的函數score，也就是內部函數，有一個全局引用，叫做initial。 這個初始引用永遠不會被垃圾收集。

Tools to identify memory leaks

意外的全局變量 內存泄漏可以通過分析輕松檢測到。 我們舉一個代碼片段的例子，它會因為全局變量而導致內存泄漏。
例子：

var x = [] var bool = false; function grow(){x.push(new Array(100000).join(‘a’));if(bool){setTimeout(grow, 1000);} } function start(){grow();bool = true; } function stop(){bool = false; }

到 Chrome 開發者工具里，打開 Profiles 標簽頁：

選擇 Take Heap Snapshot.

在這里，window 對象的黃色實際上描繪了從 JS 代碼中直接引用的節點。 我們需要修復這里的代碼，以便我們可以擺脫黃色標記。

此處的選項是在函數內將數組設為局部，以便垃圾收集器可以收集它或顯式刪除全局變量。 您可以找到更正后的代碼：

var bool = false; function grow(){var x = [];x.push(new Array(100000).join(‘a’));if(bool){setTimeout(grow, 1000);} } function start(){grow();bool = true; } function stop(){bool = false; }

Allocation profiler

Allocation Timeline 是另一個工具，可以幫助您跟蹤 JS 堆中的內存泄漏。 要記錄時間線，請轉到您的 profile 面板，然后單擊上面給出的相同代碼的開始。

當我們單擊如圖所示的開始按鈕并使用分配分析器進行配置時，我們可以看到它生成了如圖所示的藍線。

藍條代表新的內存分配，這可能是內存泄漏。 您可以通過縮放這些藍色條中的任何一個來查看詳細信息。 此處的詳細信息表示被推入數組且從不進行垃圾回收的長字符串。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用 Chrome Dev tools 分析应用的内存泄漏问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。