效能監控面板

Dale St. Marthe
Dale St. Marthe
GitHub LinkedIn

使用效能監控工具，快速瞭解網站的負載和執行階段效能。

總覽

「效能監控」面板會顯示時間軸，即時以圖表呈現成效指標。按一下要顯示或隱藏的指標。然後在您與應用程式互動時，看看圖表會有哪些變化。

「效能監控」面板。

效能監控器會追蹤下列指標：

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

開啟效能監控器面板

如何開啟「PerformanceMonitor」面板：

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

或者，您也可以依序選取右上角的 more_vert「更多選項」 >「更多工具」 >「效能監控」。

使用效能監控面板

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

只要觀察指標值在你與網站互動時的變化，就能找出改善成效的契機。

效能監控功能有一項實用的功能，可套用至整個網頁瀏覽期間。因此，前端開發人員可以開啟「PerformanceMonitor」、捲動瀏覽網站，並留意「DOM 節點」和「Layout/sec」指標，藉此避免版面配置輾轉現象等問題。

如果使用者回報網站載入時間遲緩，可以利用效能監控工具找出問題所在。

舉例來說，「CPU 用量」的遽增就可能指向效率低落的程式碼。此外，如果網頁包含大量的 JS 事件監聽器，建議您重構程式碼並減少這些事件來釋放記憶體，這樣或許就能派上用場。

如果您才剛開始分析成效，建議您先使用 Lighthouse 面板，然後使用效能面板或效能監控工具進一步調查。