效能監控面板

Dale St. Marthe
Dale St. Marthe

使用效能監控器,快速瞭解網站的載入和執行階段效能。

總覽

「Performance monitor」面板會顯示時間軸,以圖表呈現即時的效能指標。按一下指標即可顯示或隱藏指標。然後觀察圖表在您與應用程式互動時的變化情形。

「Performance monitor」面板。

成效監控器會追蹤下列指標:

  • CPU 用量。
  • JavaScript 堆積大小。
  • 網頁上的 DOM 節點、JavaScript 事件監聽器、文件和框架總數。
  • 每秒重新計算的版面配置和樣式數量。

開啟「Performance Monitor」面板

如要開啟「Performance monitor」面板,請按照下列步驟操作:

  1. 開啟開發人員工具
  2. 按下以下鍵盤按鍵,開啟指令選單
    • macOS:Command + Shift + P
    • Windows、Linux 和 ChromeOS:Control + Shift + P含有
  3. 開始輸入 Performance monitor,選取「顯示 Performance Monitor」,然後按下 Enter 鍵。開發人員工具會在開發人員工具視窗底部顯示「效能監控器」面板。

或者,您也可以在右上角依序選取「更多選項」>「更多工具」>「成效監控」>

使用效能監控面板

效能監控器可讓您大致瞭解網站的執行階段效能。

觀察指標值在使用者與網站互動時的變化,有助您找出改善機會。

成效監控器的一項實用功能,就是在瀏覽網頁時持續運作。因此,前端開發人員可以開啟效能監視器,在瀏覽網站時捲動畫面,並留意DOM 節點版面配置/秒指標,避免發生版面配置耗盡資源等問題。

如果使用者回報網站載入速度緩慢,您可以使用效能監控器找出問題所在。

舉例來說,CPU 使用率大幅上升,可能表示程式碼效率不佳。一般來說,如果網頁包含大量 JS 事件監聽器,建議您重構程式碼並減少這些數量,以釋放記憶體。

如果您剛開始分析成效,建議您先使用 Lighthouse 面板,再進一步使用 成效面板或成效監控器