DevTools 顯示了按功能劃分的記憶體分配細目。 預設檢視是 Heavy (Bottom Up)，它在頂部顯示分配最多記憶體的函式。
[Fix memory problems](https://developer.chrome.com/docs/devtools/memory-problems/)

記憶體洩漏很容易定義。 如果一個站點逐漸使用越來越多的記憶體，那麼您就會出現洩漏。 但是記憶體膨脹有點難以確定。 什麼是“使用過多記憶體”？

這裡沒有硬性數字，因為不同的裝置和瀏覽器具有不同的功能。 在高階智慧手機上流暢執行的同一頁面在低端智慧手機上可能會崩潰。

這裡的關鍵是使用 [RAIL](https://web.dev/rail) 模型並關注您的使用者。 找出哪些裝置受使用者歡迎，然後在這些裝置上測試您的頁面。 如果體驗始終不佳，則頁面可能超出了這些裝置的記憶體容量。

# Monitor memory use in realtime with the Chrome Task Manager

Shift + Esc 開啟 Task manager：

![](https://img-blog.csdnimg.cn/img_convert/22522f3b42268d69d69cda6311adb8d7.png)

允許檢視 JavaScript memory：
![](https://img-blog.csdnimg.cn/img_convert/e4a03ab2a14e4c0fd3d5afb53b2efea7.png)

![](https://img-blog.csdnimg.cn/img_convert/b250f84b0b3f4d7a0a771f90ceaa1165.png)

這兩列告訴您有關頁面如何使用記憶體的不同資訊：

memory 代表本機記憶體。 DOM 節點儲存在本機記憶體中。 如果這個值在增加，DOM 節點就會被建立。

JavaScript Memory 列表示 JS 堆。 此列包含兩個值。 您感興趣的值是實時編號（括號中的數字）。 實時數字表示頁面上可訪問物件使用的記憶體量。 如果這個數字在增加，要麼正在建立新物件，要麼正在增長現有物件。

# Visualize memory leaks with Timeline recordings

您還可以使用“Timeline”皮膚作為調查的另一個起點。 “Timeline”皮膚可幫助您視覺化頁面隨時間的記憶體使用情況。

* 在 DevTools 上開啟 Timeline 皮膚。
* 啟用記憶體核取方塊。
* 進行 recording.

提示：使用強制垃圾回收來開始和結束錄製是一種很好的做法。 錄製時點選垃圾回收按鈕（強制垃圾回收按鈕）強制垃圾回收。

考慮下面的例子：

```typescript
var x = [];

function grow() {
  for (var i = 0; i < 10000; i++) {
    document.body.appendChild(document.createElement('div'));
  }
  x.push(new Array(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);
```

每次按下程式碼中引用的按鈕時，都會在文件正文中附加一萬個 div 節點，並將一百萬個 x 字元的字串推送到 x 陣列上。 執行此程式碼會生成一個時間軸記錄，如下面的螢幕截圖：

![](https://img-blog.csdnimg.cn/img_convert/66e0bc7c6a8358bcf596d8825dff067d.png)

首先，解釋使用者介面。 概述窗格中的 HEAP 圖（NET 下方）表示 JS 堆。 概覽窗格下方是計數器窗格。 在這裡，您可以看到按 JS 堆（與概覽窗格中的 HEAP 圖相同）、文件、DOM 節點、偵聽器和 GPU 記憶體細分的記憶體使用情況。 禁用核取方塊會將其隱藏在圖表中。

現在，將程式碼與螢幕截圖進行比較分析。 如果您檢視節點計數器（綠色圖表），您會發現它與程式碼完全匹配。 節點數以離散的步驟增加。 您可以假設節點數的每次增加都是對grow() 的呼叫。 JS 堆圖（藍色圖）並不那麼簡單。 根據最佳實踐，第一次下降實際上是強制垃圾收集（透過按下收集垃圾按鈕實現）。 隨著記錄的進行，您可以看到 JS 堆大小激增。 這是自然而然的：JavaScript 程式碼會在每次按鈕點選時建立 DOM 節點，並在建立一百萬個字元的字串時做了大量工作。 這裡的關鍵是 JS 堆結束時比開始時高（這裡的“開始”是強制垃圾收集之後的點）。 在現實世界中，如果您看到這種增加 JS 堆大小或節點大小的模式，則可能意味著記憶體洩漏。

# Discover detached DOM tree memory leaks with Heap Snapshots

DOM 節點只有在頁面的 DOM 樹或 JavaScript 程式碼中都沒有對它的引用時才能被垃圾回收。 當一個節點從 DOM 樹中移除但一些 JavaScript 仍然引用它時，就說它是“分離的”。分離的 DOM 節點是記憶體洩漏的常見原因。 下面介紹如何使用 DevTools 的堆分析器來識別分離的節點。

```typescript
var detachedTree;

function create() {
  var ul = document.createElement('ul');
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li');
    ul.appendChild(li);
  }
  detachedTree = ul;
}

document.getElementById('create').addEventListener('click', create);
```

單擊程式碼中引用的按鈕會建立一個帶有十個 li 子節點的 ul 節點。 這些節點被程式碼引用，但不存在於 DOM 樹中，因此它們是分離的。

堆快照是識別分離節點的一種方式。 顧名思義，堆快照向您展示了在快照時間點記憶體在頁面的 JS 物件和 DOM 節點之間的分佈情況。

要建立快照，請開啟 DevTools 並轉到 Profiles 皮膚，選擇 Take Heap Snapshot 單選按鈕，然後按 Take Snapshot 按鈕。

![](https://img-blog.csdnimg.cn/img_convert/eb195dbb246afdac8e6ce8704de6d136.png)

快照可能需要一些時間來處理和載入。 完成後，從左側皮膚（名為 HEAP SNAPSHOTS）中選擇它。

在類過濾器文字框中鍵入 detached 以搜尋分離的 DOM 樹。

![](https://img-blog.csdnimg.cn/img_convert/245b5ea265ece596904bb724a00bb007.png)

![](https://img-blog.csdnimg.cn/img_convert/2905b9f0a45cae0bbd77229344347e49.png)

突出顯示為黃色的節點在 JavaScript 程式碼中直接引用了它們。 紅色突出顯示的節點沒有直接引用。 它們之所以活著，是因為它們是黃色節點樹的一部分。 通常，您希望關注黃色節點。 修復您的程式碼，使黃色節點的存活時間不會超過它需要的時間，並且您還可以擺脫作為黃色節點樹的一部分的紅色節點。

單擊黃色節點以進一步調查。 在物件窗格中，您可以看到有關引用它的程式碼的更多資訊。 例如，在下面的螢幕截圖中，您可以看到 detachedTree 變數正在引用節點。 要修復這個特定的記憶體洩漏，您將研究使用 detachedTree 的程式碼，並確保它在不再需要時刪除對節點的引用。

![](https://img-blog.csdnimg.cn/img_convert/41f252a5b53e1d30eda037f25478b40f.png)

# Identify JS heap memory leaks with Allocation Timelines

```typescript
var x = [];

function grow() {
  x.push(new Array(1000000).join('x'));
}

document.getElementById('grow').addEventListener('click', grow);
```

每次按下程式碼中引用的按鈕時，都會將一百萬個字元的字串新增到 x 陣列中。

要記錄分配時間線，請開啟 DevTools，轉到 Profiles 皮膚，選擇 Record Allocation Timeline 單選按鈕，按 Start 按鈕，執行您懷疑導致記憶體洩漏的操作，然後按停止記錄按鈕（停止記錄 按鈕）完成後。

錄製時，請注意分配時間軸上是否出現任何藍色條，如下面的螢幕截圖所示。

![](https://img-blog.csdnimg.cn/img_convert/cc700ffb7d6fecb3a723488e4103d78e.png)

那些藍條代表新的記憶體分配。 這些新的記憶體分配是記憶體洩漏的候選物件。 您可以放大條形以過濾構造器窗格以僅顯示在指定時間範圍內分配的物件。

![](https://img-blog.csdnimg.cn/img_convert/ff94b64a1041f87a8e375fab9d97ceab.png)

展開物件並單擊其值以在“物件”窗格中檢視有關它的更多詳細資訊。 例如，在下面的螢幕截圖中，透過檢視新分配的物件的詳細資訊，您將能夠看到它已分配給 Window 範圍內的 x 變數。

![](https://img-blog.csdnimg.cn/img_convert/976628a311264867727f686da892e430.png)

# Investigate memory allocation by function

使用 Record Allocation Profiler 型別檢視 JavaScript 函式的記憶體分配。

![](https://img-blog.csdnimg.cn/img_convert/589fc8936d8cfd8e0928f447badf02d5.png)

(1) 選擇記錄分配分析器單選按鈕。 如果頁面上有工作人員，您可以使用“開始”按鈕旁邊的下拉選單將其選為分析目標。

(2) 按開始按鈕。

(3) 在要調查的頁面上執行操作。

(4) 完成所有操作後按停止按鈕。

DevTools 顯示了按功能劃分的記憶體分配細目。 預設檢視是 Heavy (Bottom Up)，它在頂部顯示分配最多記憶體的函式。

![](https://img-blog.csdnimg.cn/img_convert/d85430d5254431f78b21b59ce2c3a8f6.png)

# Spot frequent garbage collections

如果您的頁面似乎經常暫停，那麼您可能遇到垃圾收集問題。

您可以使用 Chrome 工作管理員或時間線記憶體記錄來發現頻繁的垃圾收集。 在工作管理員中，頻繁上升和下降的 Memory 或 JavaScript Memory 值表示頻繁的垃圾收集。 在時間軸記錄中，頻繁上升和下降的 JS 堆或節點計數圖表示頻繁的垃圾回收。

確定問題後，您可以使用分配時間線記錄來找出記憶體分配的位置以及導致分配的函式。

使用 Chrome 開發者工具分析記憶體問題

相關文章