Dale St. Marthe
使用效能監控器，快速瞭解網站的載入和執行階段效能。
總覽
「Performance monitor」面板會顯示時間軸，以圖表呈現即時的效能指標。按一下指標即可顯示或隱藏指標。然後觀察圖表在您與應用程式互動時的變化情形。
成效監控器會追蹤下列指標：
- CPU 用量。
- JavaScript 堆積大小。
- 網頁上的 DOM 節點、JavaScript 事件監聽器、文件和框架總數。
- 每秒重新計算的版面配置和樣式數量。
開啟「Performance Monitor」面板
如要開啟「Performance monitor」面板，請按照下列步驟操作：
- 開啟開發人員工具。
- 按下以下鍵盤按鍵，開啟指令選單：
- macOS：Command + Shift + P 鍵
- Windows、Linux 和 ChromeOS：Control + Shift + P 鍵
- 開始輸入
Performance monitor，選取「顯示 Performance Monitor」，然後按下 Enter 鍵。開發人員工具會在開發人員工具視窗底部顯示「效能監控器」面板。
或者，您也可以在右上角依序選取「更多選項」>「更多工具」>「成效監控」> 。
使用效能監控面板
效能監控器可讓您大致瞭解網站的執行階段效能。
觀察指標值在使用者與網站互動時的變化，有助您找出改善機會。
成效監控器的一項實用功能，就是在瀏覽網頁時持續運作。因此，前端開發人員可以開啟效能監視器，在瀏覽網站時捲動畫面，並留意DOM 節點和版面配置/秒指標，避免發生版面配置耗盡資源等問題。
如果使用者回報網站載入速度緩慢，您可以使用效能監控器找出問題所在。
舉例來說，CPU 使用率大幅上升，可能表示程式碼效率不佳。一般來說，如果網頁包含大量 JS 事件監聽器，建議您重構程式碼並減少這些數量，以釋放記憶體。
如果您剛開始分析成效，建議您先使用 Lighthouse 面板，再進一步使用 成效面板或成效監控器。