DevTools 顯示了按功能劃分的內存分配細目。 默認視圖是 Heavy (Bottom Up)，它在頂部顯示分配最多內存的函數。
Fix memory problems

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

這里沒有硬性數字，因為不同的設備和瀏覽器具有不同的功能。 在高端智能手機上流暢運行的同一頁面在低端智能手機上可能會崩潰。

這里的關鍵是使用 RAIL 模型并關注您的用戶。 找出哪些設備受用戶歡迎，然后在這些設備上測試您的頁面。 如果體驗始終不佳，則頁面可能超出了這些設備的內存容量。

Monitor memory use in realtime with the Chrome Task Manager

Shift + Esc 打開 Task manager：

允許查看 JavaScript memory：

這兩列告訴您有關頁面如何使用內存的不同信息：

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

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

Visualize memory leaks with Timeline recordings

您還可以使用“Timeline”面板作為調查的另一個起點。 “Timeline”面板可幫助您可視化頁面隨時間的內存使用情況。

• 在 DevTools 上打開 Timeline 面板。
• 啟用內存復選框。
• 進行 recording.

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

考慮下面的例子：

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 數組上。 運行此代碼會生成一個時間軸記錄，如下面的屏幕截圖：

首先，解釋用戶界面。 概述窗格中的 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 的堆分析器來識別分離的節點。

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 按鈕。

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

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

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

單擊黃色節點以進一步調查。 在對象窗格中，您可以看到有關引用它的代碼的更多信息。 例如，在下面的屏幕截圖中，您可以看到 detachedTree 變量正在引用節點。 要修復這個特定的內存泄漏，您將研究使用 detachedTree 的代碼，并確保它在不再需要時刪除對節點的引用。

Identify JS heap memory leaks with Allocation Timelines

var x = [];function grow() {x.push(new Array(1000000).join('x')); }document.getElementById('grow').addEventListener('click', grow);

每次按下代碼中引用的按鈕時，都會將一百萬個字符的字符串添加到 x 數組中。

要記錄分配時間線，請打開 DevTools，轉到 Profiles 面板，選擇 Record Allocation Timeline 單選按鈕，按 Start 按鈕，執行您懷疑導致內存泄漏的操作，然后按停止記錄按鈕（停止記錄 按鈕）完成后。

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

那些藍條代表新的內存分配。 這些新的內存分配是內存泄漏的候選對象。 您可以放大條形以過濾構造器窗格以僅顯示在指定時間范圍內分配的對象。

展開對象并單擊其值以在“對象”窗格中查看有關它的更多詳細信息。 例如，在下面的屏幕截圖中，通過查看新分配的對象的詳細信息，您將能夠看到它已分配給 Window 范圍內的 x 變量。

Investigate memory allocation by function

使用 Record Allocation Profiler 類型查看 JavaScript 函數的內存分配。

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

(2) 按開始按鈕。

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

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

DevTools 顯示了按功能劃分的內存分配細目。 默認視圖是 Heavy (Bottom Up)，它在頂部顯示分配最多內存的函數。

Spot frequent garbage collections

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

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

確定問題后，您可以使用分配時間線記錄來找出內存分配的位置以及導致分配的函數。

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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