Dale St. Marthe
使用「成效」面板分析網站成效。
總覽
「Performance」面板可讓您記錄網頁應用程式的 CPU 效能概況。分析設定檔，找出潛在效能瓶頸，以及改善資源使用方式的方法。
使用「Performance」面板執行以下操作：
- 記錄效能設定檔。
- 變更拍攝設定。
- 分析成效報表。
如需改善網站效能的完整指南，請參閱「分析執行階段效能」。
開啟效能面板
如要開啟「Performance」面板，請開啟開發人員工具，然後從頂端的一組分頁中選取「效能」。
或者，您也可以按照下列步驟，使用 Command 選單開啟「效能」面板：
- 開啟開發人員工具。
- 按下以下指令開啟「Command」選單：
- macOS：Command + Shift + P 鍵
- Windows、Linux、ChromeOS：Control + Shift + P
鍵 - 輸入
Performance panel並選取「Show Performance Panel」，然後按下 Enter 鍵。
記錄效能設定檔
準備錄製時，「效能」面板會提供以下選項：
變更拍攝設定
擷取設定可讓您變更開發人員工具擷取成效記錄的方式，並可在報表中提供其他資訊。按一下「擷取設定」 設定存取「擷取設定」選單。
從「Capture settings」選單中選取下列選項：
- 停用 JavaScript 範例：停用「主要」軌跡在錄製期間呼叫的 JavaScript 呼叫堆疊記錄。這麼做會降低效能負擔。
- 啟用進階繪製檢測 (慢速)：擷取進階繪製檢測功能。大幅降低成效。
- 啟用 CSS 選取器統計資料 (慢)：擷取 CSS 選取器統計資料。大幅降低成效。
- CPU 節流：模擬較慢的 CPU 速度。
- 網路節流：模擬較慢的網路速度。
- 硬體並行：設定
navigator.hardwareConcurrency回報的值。
分析成效報表
如需「成效」面板的完整使用指南，請參閱「分析成效記錄」一文。
以下將介紹指南中的一系列主題，以及其他實用說明文件：
瞭解如何瀏覽報表：
如要瞭解如何專心處理重要的工作流程：
如要瞭解「Bottom Up」、「呼叫樹狀結構」和「事件記錄」分頁，請按照下列步驟操作：
瞭解如何分析報表：
- 查看主要執行緒活動
- 解讀火焰圖
- 查看螢幕截圖
- 查看記憶體指標
- 查看部分錄製內容的時間長度
- 在重新計算樣式事件期間分析 CSS 選取器成效
- 使用效能面板剖析 Node.js 效能
- 分析每秒影格數 (FPS)
- 時間軸事件參考資料
運用這些面板改善效能
查看其他有助於改善網站成效的面板：