Dale St. Marthe
使用效能監控功能，快速瞭解網站的負載和執行階段效能。
總覽
「成效監控」面板會顯示時間軸，以圖表即時呈現成效指標。按一下指標，即可顯示或隱藏該項目。接著看看您與應用程式互動時，圖表會有什麼變化。
效能監控器會追蹤下列指標：
- CPU 使用率。
- JavaScript 堆積大小。
- 網頁上的 DOM 節點、JavaScript 事件監聽器、文件和頁框總數。
- 每秒重新計算版面配置和樣式。
開啟效能監控器面板
如要開啟「PerformanceMonitor」面板：
- 開啟開發人員工具。
- 按下以下指令開啟「Command」選單：
- macOS：Command + Shift + P 鍵
- Windows、Linux、ChromeOS：Control + Shift + P
鍵
- 開始輸入
Performance monitor，選取「Show PerformanceMonitor」，然後按下 Enter 鍵。開發人員工具會在開發人員工具視窗底部顯示「PerformanceMonitor」面板。
或者，依序選取右上角的 more_vert「更多選項」 >「更多工具」 >「效能監控」。
使用效能監控器面板
您可以透過「成效監控」大致瞭解網站的執行階段效能。
觀察使用者與網站互動時，觀察指標值的變化，就能掌握改善機會。
效能監控工具的一項實用功能，就是在整個網頁瀏覽過程中都會持續顯示。因此，前端開發人員只要開啟「Performance Monitoring」、捲動網站，並留意「DOM 節點」和「版面配置/秒」指標，就能避免發生版面配置輾轉問題。
如果使用者回報您網站的載入時間遲緩，成效監控功能可協助您找出問題所在。
例如，CPU 使用率大幅遽增可能指向效率低落的程式碼。一般來說，如果網頁含有大量的 JS 事件監聽器，建議您重構程式碼，並減少這些數字來釋放記憶體。
如果您才剛開始進行成效分析，建議先使用 Lighthouse 面板，再使用「效能」面板或「效能監控」進一步調查。