瞭解如何使用 Chrome 和開發人員工具，找出影響網頁效能的記憶體問題，包括 記憶體流失、記憶體膨脹，以及經常使用的垃圾收集。
摘要
- 透過 Chrome 工作管理員，查看網頁目前的記憶體用量。
- 透過時間軸記錄，以圖表呈現長期的記憶體用量。
- 使用堆積快照找出卸離的 DOM 樹狀結構 (發生記憶體流失的常見原因)。
- 透過配置時間軸記錄，在 JS 堆積中分配新記憶體的時間。
總覽
以 RAIL 成效模型的精神來說，卓越的成效指標應 對使用者的影響。
記憶體問題非常重要，因為使用者常能察覺。使用者可感知記憶體 方便您處理問題：
- 網頁的效能會隨著時間逐漸降低。這可能是由 記憶體流失記憶體流失是指網頁中的錯誤會逐步使用更多網頁 讓記憶體容量逐漸增加
- 網頁效能持續不佳。這可能是記憶體過度的現象。記憶體 blot 是指網頁使用的記憶體超過最佳網頁速度所需的記憶體量。
- 網頁效能延遲或經常暫停。這可能是 經常進行垃圾收集「垃圾收集」是指瀏覽器收回記憶體的時間。瀏覽器 決定發生時機集合期間，所有指令碼都會暫停執行。因此，如果瀏覽器 有大量的垃圾收集，指令碼執行會大幅暫停
記憶體膨脹：多少「太多」？
記憶體流失的定義很簡單，如果網站不斷使用更多記憶體 發生了外洩事件但是記憶體過度會比較不容易固定。什麼情況算是「使用過多記憶體」？
由於裝置和瀏覽器各有不同的功能，因此不適用這項數據。 在高階智慧型手機上順利執行的網頁，可能會在低階智慧型手機上當機。
關鍵在於使用 RAIL 模型，並將焦點放在使用者身上。瞭解熱門裝置 然後在這些裝置上測試您的網頁如果使用體驗穩定 這可能是因為網頁超出裝置的記憶體容量
透過 Chrome 工作管理員即時監控記憶體用量
您可以使用 Chrome 工作管理員，著手調查記憶體問題。工作管理員 是一種即時監視器，可讓您瞭解網頁目前的記憶體使用量。
按下 Shift + Esc 鍵，或前往 Chrome 主選單，依序選取「更多工具」>使用工作管理員執行下列操作： 開啟「工作管理員」。
對工作管理員的表格標頭按一下滑鼠右鍵，啟用「JavaScript 記憶體」。
這兩個資料欄會針對網頁記憶體用量提供不同的資訊：
- 「Memory」(記憶體) 資料欄代表原生記憶體。DOM 節點儲存在原生記憶體中。如果這是 而系統正在建立 DOM 節點。
- 「JavaScript 記憶體」欄代表 JS 堆積。此欄包含兩個值。 您感興趣的值為實際數字 (括號中的數字)。即時電話號碼 。如果此數字 物件數量增加，也可能是建立新物件 或是現有物件持續擴充
透過效能記錄以視覺化的方式呈現記憶體流失情形
您也可以使用「成效」面板，做為調查的另一個起點。成效 面板可協助您以視覺化方式呈現網頁的記憶體用量變化。
- 開啟開發人員工具中的「Performance」面板。
- 勾選「Memory」(記憶體) 核取方塊。
- 錄影。
如要示範效能記憶體錄製過程，請考慮以下程式碼：
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窗格 (下方) 中的「HEAP」HEAP圖表 NET) 代表 JS 堆積。「Overview」(總覽) 窗格下方是「Counter」(計數器) 窗格。您可以在這裡 查看按 JS 堆積細分的記憶體用量 (與「總覽」HEAP窗格中的「HEAP」HEAP圖表相同)； 文件、DOM 節點、事件監聽器和 GPU 記憶體。停用核取方塊後，圖表中就不會顯示該核取方塊。
這是程式碼與螢幕截圖的分析結果。如果您查看節點計數器 (
綠色圖表)，即可看到它與程式碼完全一致。節點數會在
分別建立離散步驟您可以假設節點數的每次增加都是對 grow() 的呼叫。JS
堆積圖 (藍色圖表) 不算直觀，有鑑於最佳做法，首先會下滑
其實就是強制垃圾收集 (按下「Collect garbage」按鈕可以達到此目標)。阿斯
擷取進度時，您會看到 JS 堆積大小突然攀升。這是正常現象，且會預期：
JavaScript 程式碼會在每次按下按鈕時建立 DOM 節點，並會執行許多工作
會建立一百萬個字元的字串。重點在於 JS 堆積在
更新率大於 100% (此處的「起點」是強制垃圾收集之後的時間點)。於
如果在實際環境中看到這種增加 JS 堆積大小或節點大小的模式，就會
可能代表記憶體流失
透過堆積快照找出卸離的 DOM 樹狀結構記憶體流失情形
只有在網頁的 DOM 樹狀結構或 JavaScript 程式碼。系統聲稱節點為「卸離」從 DOM 樹狀結構中移除時 部分 JavaScript 仍會參照卸離的 DOM 節點是記憶體流失的常見原因。這個 章節將介紹如何使用開發人員工具來識別卸離的節點。
以下是卸離 DOM 節點的簡單範例。
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 節點在網頁 完全不必建立快照
如要建立快照，請開啟開發人員工具並前往「記憶體」記憶體，然後選取 堆積 「快照」圓形按鈕，然後按拍攝快照按鈕。
快照可能需要一段時間來處理和載入。完成後，請在左側選取 面板 (命名為 HEAP SNAPSHOTS)。
在「類別篩選器」文字方塊中輸入 Detached，以搜尋卸離的 DOM 樹狀結構。
請展開顯示相關事故，並展開拆卸的樹木。
醒目顯示黃色的節點是透過 JavaScript 程式碼直接參照這些節點。醒目顯示的節點 紅色沒有直接參照。這些節點加入了黃色節點的 。一般而言，您應將重點放在黃色的節點上。修正程式碼，讓黃色節點沒有出現 所需時間就會超過預期 您還能消除 黃色節點的樹狀結構
點擊黃色節點即可進一步調查。在「Objects」(物件) 窗格中
參照程式碼的相關資訊例如，您可在下方的螢幕截圖中看到
detachedTree 變數參照節點。如要修正這個記憶體流失問題
會研究使用 detachedTree 的程式碼，確保其會刪除對該節點的參照
並設為執行過程
透過配置時間軸找出 JS 堆積記憶體流失問題
配置時間軸是一項工具，可協助您追蹤 JS 堆積中的記憶體流失情形。
如要展示配置時間軸，請考慮以下程式碼：
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
每次推送程式碼中參照的按鈕時，就會有一百萬個字元的字串
新增至 x 陣列。
如要記錄配置時間軸，請開啟開發人員工具，前往「Profiles」設定檔，然後選取「記錄」記錄
分配時間軸圓形按鈕，按下開始按鈕，執行您懷疑的動作
這會導致記憶體流失，然後按下「停止錄製」按鈕
發生以下情況時 (
)，
這樣就大功告成了。
錄製影片時，請留意「分配時間軸」是否顯示任何藍色長條，例如 螢幕截圖。
這些藍色長條代表新的記憶體配置。這些新的記憶體配置是候選項目 以防止記憶體流失您可以縮放長條，篩選「建構函式」窗格，只顯示符合下列條件的物件 都在指定時間範圍內分配。
展開物件並按一下該物件的值，即可在「Object」窗格中查看該物件的詳細資料。適用對象
例如，在下方的螢幕截圖中，查看最近分配的物件詳細資料
就能看到該變數已分配至 Window 範圍中的 x 變數。
按照函式調查記憶體分配情形
使用「記憶體」面板中的「配置取樣」類型，查看不同 JavaScript 函式的記憶體配置。
- 選取「Allocation Sampling」圓形按鈕。如果網頁上有工作站 您可以使用「Start」按鈕旁的下拉式選單，將該目標設為剖析目標。
- 按下「Start」按鈕。
- 在您要調查的網頁上執行操作。
- 完成所有動作後，按一下「Stop」按鈕。
開發人員工具會顯示各函式的記憶體配置分析。預設檢視畫面為 Heavy (Bottom) 向上)，顯示在頂端分配最多記憶體的函式。
查看經常收集的垃圾資訊集
如果您的網頁經常暫停，表示可能有垃圾收集問題。
你可以使用 Chrome 工作管理員或時間軸記憶體記錄功能，找出頻繁的垃圾檔案 集合。工作管理員中，記憶體或 JavaScript 記憶體經常上升及下降 值代表經常垃圾集合時間軸錄音 (經常上升或下降) JS 堆積或節點數圖表會指出頻繁的垃圾收集。
找出問題後，您就能使用配置時間軸記錄功能找出問題 以及導致分配作業的函式