Kayce Basques
瞭解如何使用 Chrome 和開發人員工具找出影響網頁效能的記憶體問題，包括記憶體流失、記憶體膨脹和頻繁的垃圾收集。
摘要
- 使用 Chrome 工作管理員查看網頁的記憶體用量。
- 使用時間軸記錄，以視覺化方式呈現記憶體用量隨時間變化的情形。
- 使用堆積圖快照找出已分離的 DOM 樹狀結構 (記憶體耗損的常見原因)。
- 使用「分配時間軸」錄製功能，找出在 JS 堆積中分配新記憶體的時間。
- 找出由 JavaScript 參照保留的已卸離元素。
總覽
根據 RAIL 效能模型的精神，您應將效能改善工作重點放在使用者身上。
記憶體問題非常重要，因為使用者經常會察覺到這些問題。使用者可能會以下列方式感知記憶體問題：
- 網頁的成效會隨著時間流逝而逐漸惡化。這可能是記憶體耗損的症狀。記憶體流失是指網頁中的錯誤導致網頁在一段時間內逐漸使用越來越多的記憶體。
- 網頁成效持續不佳。這可能是記憶體膨脹的症狀。記憶體膨脹是指網頁使用的記憶體超過達到最佳網頁速度所需的記憶體。
- 網頁載入速度變慢或似乎經常暫停。這可能是經常進行垃圾收集的症狀。垃圾收集是指瀏覽器回收記憶體的過程。瀏覽器會決定何時發生這種情況。在收集期間，系統會暫停所有指令碼執行作業。因此，如果瀏覽器經常執行垃圾收集，指令碼執行作業就會經常暫停。
記憶體膨脹：多少是「過多」？
記憶體流失很容易定義。如果網站逐漸使用越來越多的記憶體，就表示發生記憶體流失。但記憶體膨脹問題較難找出原因。什麼情況下會「使用過多記憶體」？
由於不同裝置和瀏覽器的功能不盡相同，因此無法提供確切的數字。同一個網頁在高階智慧型手機上運作順暢，但在低階智慧型手機上可能會當機。
重點是使用 RAIL 模型，並著重於使用者。找出使用者常用的裝置，然後在這些裝置上測試網頁。如果使用體驗一貫不佳，表示網頁可能超出這些裝置的記憶體能力。
使用 Chrome 工作管理員即時監控記憶體用量
請使用 Chrome 工作管理員做為記憶體問題調查的起點。工作管理員是即時監控工具，可告知網頁使用的記憶體量。
按下 Shift+Esc 鍵，或前往 Chrome 主選單，然後依序選取「更多工具」 >「工作管理員」，即可開啟工作管理員。