效能監控面板

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

總覽

「成效監控」面板會顯示時間軸，以圖表即時呈現成效指標。按一下指標，即可顯示或隱藏該項目。接著看看您與應用程式互動時，圖表會有什麼變化。

效能監控工具面板。

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

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

開啟效能監控器面板

如要開啟「PerformanceMonitor」面板：

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

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

使用效能監控器面板

您可以透過「成效監控」大致瞭解網站的執行階段效能。

觀察使用者與網站互動時，觀察指標值的變化，就能掌握改善機會。

效能監控工具的一項實用功能，就是在整個網頁瀏覽過程中都會持續顯示。因此，前端開發人員只要開啟「Performance Monitoring」、捲動網站，並留意「DOM 節點」和「版面配置/秒」指標，就能避免發生版面配置輾轉問題。

如果使用者回報您網站的載入時間遲緩，成效監控功能可協助您找出問題所在。

例如，CPU 使用率大幅遽增可能指向效率低落的程式碼。一般來說，如果網頁含有大量的 JS 事件監聽器，建議您重構程式碼，並減少這些數字來釋放記憶體。

如果您才剛開始進行成效分析，建議先使用 Lighthouse 面板，再使用「效能」面板或「效能監控」進一步調查。