效能功能參考

本頁是有關分析效能之開發工具功能的完整參考。

如需如何使用「 效能 」工具分析頁面效能的逐步教學課程，請參閱分析 執行階段效能 (教學課程) 。

此頁面中的影像顯示已卸除至其專用視窗的 DevTools。 若要深入了解如何卸除 DevTools，請參閱 [將 DevTools 解除停駐至個別視窗 ] 中的 [變更 DevTools 放置位置] ([卸除]、[停靠到底部]、[停駐到左側]) 。

詳細內容：

• 開啟效能工具
• 記錄成效
  • 記錄執行階段效能
  • 記錄載入效能
  • 錄製時 Capture screenshots
  • 錄製時強制收集垃圾項目
  • 顯示錄製設定
  • 停用 JavaScript 範例
  • 錄製時節流網路
  • 錄製時節流 CPU
  • 啟用 CSS 選取器統計資料
  • 啟用進階油漆檢測
• 為錄製內容加上註解及分享
  • 儲存及共用錄製內容
  • 載入錄製內容
• 清除先前的錄製
• 分析效能錄製檔
  • 取得可採取動作的深入解析
  • 瀏覽錄製內容
    • 使用鍵盤快速鍵瀏覽
    • 選取錄製內容的一部分
    • 放大錄製內容的部分內容，並在縮放層級之間切換
    • 捲動長火焰圖
  • 搜尋活動
  • 變更曲目順序或隱藏它們
  • 檢視主執行緒活動
  • 讀取火焰圖
  • 追蹤事件發起人
  • 在火焰圖中隱藏函數及其子系
    • 忽略火焰圖中的指令碼
  • 檢視資料表中的活動
    • 根活動
    • [由下而上] 索引標籤
    • [通話樹狀] 索引標籤
    • [事件記錄檔] 索引標籤
  • 檢視成效標記
  • 檢視自訂計時
  • 檢視互動
  • 檢視版面配置移轉
  • 檢視動畫
  • 檢視 GPU 活動
  • 檢視點陣活動
  • 分析每秒畫面格數 (FPS)
    • [框架] 區段
  • 檢視網路要求
  • 檢視記憶體計量
  • 檢視錄製內容部分的持續時間
  • 檢視螢幕擷取畫面
  • 檢視圖層資訊
  • 檢視油漆分析工具
  • 檢視 CSS 選取器統計資料
  • 檢視 Windows、iframe 和專用工作角色之間的訊息
  • 檢視 WebSocket 訊息
• 使用 [轉譯] 工具分析轉譯效能
  • 使用 FPS 計即時檢視每秒畫面格數
  • 使用 [小畫家閃爍] 即時檢視繪圖活動
  • 檢視具有圖層框線的圖層重疊
  • 即時尋找捲動效能問題
  • 停用本機字型
• 以視覺化方式呈現記憶體流失 (效能工具：記憶體核取方塊)

開啟效能工具

若要在開發工具中開啟 效能 工具：

1. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   或者，在 Windows (按 Ctrl+Shift+I，Linux) 或 (macOS) 按 Command+Option+I。

   DevTools 隨即開啟。

2. 在開發工具的 [ 活動列] 上，選取 [ 效能 ] ) 索引標籤。

   如果看不到該索引標籤，請按一下 [其他工具 ] () 按鈕。

記錄成效

下列各節說明如何在開發工具中記錄網頁效能。

記錄執行階段效能

若要分析網頁在執行 (而不是載入網頁時的效能) ：

1. 移至您要分析的網頁，例如相片庫示範。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在 [活動列] 上，選取 [ 效能 ] ) 工具。

4. 按一下 [ 錄製 ] ) 按鈕。

   

5. 與頁面互動一段時間。 DevTools 會記錄由於您的互動而發生的所有頁面活動。

6. 再次按一下 [錄製 ]。 或者，按一下 [停止] 以停止錄製。

   [ 效能 ] 工具會顯示錄製內容。

記錄載入效能

若要分析網頁載入 (而不是執行網頁時的效能) ：

1. 移至您要分析的網頁，例如相片庫示範。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在 [活動列] 上，選取 [ 效能 ] ) 工具。

4. 按一下 [重新整理頁面 ] () ] 按鈕：

   

   DevTools 會在頁面重新整理時記錄效能計量，然後在載入完成幾秒鐘後自動停止錄製。 然後，DevTools 會顯示錄製內容，並自動放大發生大部分活動的錄製內容部分：

   

錄製時 Capture screenshots

若要在錄製時擷取每個畫面的螢幕擷取畫面，請選取 [螢幕擷取畫面 ] 核取方塊：

若要了解如何與螢幕擷取畫面互動，請參閱下方的 檢視螢幕擷取畫面。

錄製時強制收集垃圾項目

若要在錄製頁面時強制執行垃圾收集，請按一下 [收集垃圾 ] ([ ) 按鈕：

顯示錄製設定

若要公開更多有關 DevTools 如何擷取效能錄製的相關設定：

• 在 [效能] 工具中，按一下 [Capture設定] ([) ] 按鈕。

  核取方塊和下拉式清單會顯示在 [效能 ] 工具的頂端：

  

停用 JavaScript 範例

依預設，錄製內容的 [主要 ] 區段會顯示錄製期間呼叫之 JavaScript 函式的詳細呼叫堆疊。 若要停用 JavaScript 呼叫堆疊：

1. 在 [效能] 工具中，按一下 [Capture設定] ([) ] 按鈕。

2. 選取 [ 停用 JavaScript 範例 ] 核取方塊。

3. 錄製頁面。

下列兩個圖顯示停用和啟用 JavaScript 範例之間的差異。 停用 JavaScript 取樣時，錄製內容 的主要區段 會短得多，因為錄製內容會省略 JavaScript 呼叫堆疊。

停用 JS 樣本時的錄製範例：

啟用 JS 樣本時的錄製範例：

錄製時節流網路

若要在錄製時節流網路：

1. 在 [效能] 工具中，按一下 [Capture設定] ([) ] 按鈕。 請參閱上方的 顯示錄製設定。

2. 將 網路 設定為所需的節流層級。

   [網路] 工具的索引標籤上會顯示警告圖示，提醒您已啟用節流。

錄製時節流 CPU

若要在錄製時節流 CPU：

1. 在 [效能] 工具中，按一下 [Capture設定] ([) ] 按鈕。 請參閱上方的 顯示錄製設定。

2. 將 CPU 設定為所需的節流層級。

   [ 效能 ] 工具的索引標籤上會顯示警告圖示，提醒您已啟用節流。

節流是與您的電腦功能相關的。 例如， 2 倍減速 選項會使您的 CPU 運行速度比正常情況慢兩倍。 DevTools 並不能真正模擬行動裝置的 CPU，因為行動裝置的架構與桌上型電腦和膝上型電腦的架構非常不同。

啟用 CSS 選取器統計資料

若要檢視長時間執行的 Recalculate Style 事件期間 CSS 規則選取器的統計資料：

1. 按一下 [Capture設定] ([]) 按鈕。 請參閱上方的 顯示錄製設定。

2. 選取 [啟用 CSS 選取器統計資料 (慢) 核取方塊。

如需詳細資料，請參閱 在重新計算樣式事件期間分析 CSS 選取器效能。

啟用進階油漆檢測

若要檢視詳細的油漆儀器：

1. 按一下 [Capture設定] ([]) 按鈕。 請參閱上方的 顯示錄製設定。

2. 選取 [啟用進階油漆檢測 (緩慢) 核取方塊。

若要了解如何與繪製資訊互動，請參閱下方的檢視圖層資訊，以及下方的檢視繪製側視圖。

為錄製內容加上註解及分享

記錄 效能追蹤之後，您可以 對其進行分析 ，並加註以分享您的發現。

若要註解錄製內容，請開啟「效能」工具提要欄位中的「註釋」索引標籤。 如果看不到提要欄位，請按一下「 顯示提要欄位 」 (「 按鈕。

提要欄位中的「 註釋」 標籤最初包含有關如何新增註釋的說明。 建立註解 （如下所示） 後，索引標籤會列出您現有的註解，並允許您刪除它們。

新增註釋的方法有好幾種：

• 為項目加上標籤：若要在效能追蹤中標記項目，請按兩下該項目，在文字方塊中輸入標籤，然後按 Enter。

• 連接兩個項目：若要在效能追蹤中的兩個項目之間繪製箭號，請按兩下第一個項目，按一下旁邊的箭號圖示，然後按一下第二個項目。

• 標記時間範圍：若要在效能追蹤中繪製及標記任意時間範圍，請按住 Shift 鍵，將時間範圍的開頭拖曳到結尾，在出現的文字方塊中輸入標籤，然後按 Enter。

例如，在新視窗或索引標籤中開啟「 活動索引標籤示範」 網頁，建立表演錄製內容，然後執行上述三個動作。 結果：

在此範例中，有：

• 三個註釋。
• 連接兩個註解的箭號註釋。
• 以粉紅色醒目提示的已加上註解的時間範圍。

[ 註釋 ] 索引標籤會在其索引標籤名稱旁顯示註釋數目;在此範例中為 5。

若要刪除註釋，請在 [註釋 ] 索引標籤中將註釋暫留在註釋上方，然後按一下其旁邊的 [刪除 ] 按鈕。

若要從效能追蹤隱藏註釋，請選取 [註釋] 索引標籤底部的 [隱藏註釋]。

儲存及共用錄製內容

若要將錄製內容儲存為裝置上的檔案，稍後與註解的效能結果共用，請在 [效能] 工具頂端的動作列中，按一下 [儲存設定檔] ) 按鈕，然後選取 [儲存追蹤]。

或者，選取 [ 儲存沒有註釋的追蹤]。

您可以以滑鼠右鍵按一下錄製的曲目，然後選取 [儲存設定檔] (頂部的 [) 按鈕，而不是按一下 [儲存設定檔]：

載入錄製內容

若要從檔案載入錄製內容，請按一下 [載入設定檔 ] ([載 ) 在 [ 效能 ] 工具頂端的動作列中的按鈕。

如果追蹤中存在註釋，[ 效能] 工具將顯示註釋。

或者，以滑鼠右鍵按一下 [效能 ] 工具，然後選取 [載入設定檔]：

您可以在現有的錄製內容中按一下滑鼠右鍵，或者在沒有錄製內容時在 [ 效能 ] 工具中顯示的畫面上按一下滑鼠右鍵。

清除先前的錄製

錄製內容之後，若要從 [效能 ] 工具中移除該錄製內容，請按一下 [ 清除錄製] ([ ) 按鈕：

分析效能錄製檔

在 您記錄執行階段效能 或 記錄載入效能之後， [效能 ] 工具會顯示大量有關錄製的資料。 使用記錄的資料來分析網頁的效能。

取得可採取動作的深入解析

效能 工具會 從記錄的效能資料中擷取可採取動作的深入解析。 這些深入解析是您改善網站效能的方法。 深入解析包括：

• 依階段排列的 INP
• 依階段列出的 LCP
• LCP 要求探索
• 造成版面配置移位的可能因素
• 轉譯封鎖要求
• 網路相依性樹狀結構
• 改善影像傳遞
• 文件要求延遲
• 字型顯示
• 針對行動裝置最佳化檢視區
• 最佳化 DOM 大小
• 協力廠商
• CSS 選取器成本
• 強制重排
• 使用高效的快取存留期

這些深入解析著重於改善 Core Web Vitals 指標，以及最佳化網頁載入和呈現的速度。

在 [ 效能 ] 工具中記錄設定檔之後，提要欄位中的 [深入解析 ] 索引標籤會顯示適用於記錄效能資料的可採取動作深入解析清單。 若要檢視不適用於設定檔的深入解析清單，請參閱 [通過的深入解析 ] 區段。

若要使用深入解析：

1. 根據上述 的錄製效能，進行效能錄製。

2. 在 效能 工具的左側提要欄位中，選取「 深入解析 」索引標籤，展開不同的區段，然後將滑鼠游標暫留在上方並按一下項目。 效能 工具會 醒目提示追蹤中對應的事件：

   

   如果看不到提要欄位和 Insights 索引標籤，請按一下 顯示 提要欄位 () 按鈕。

瀏覽錄製內容

若要仔細檢查您的演奏錄音，您可以選取錄音的一部分、捲動長火焰圖、放大和縮小，以及使用痕跡在縮放等級之間跳轉。

使用鍵盤快速鍵瀏覽

若要使用鍵盤快速鍵快速瀏覽錄製內容，請先選擇您偏好的鍵盤瀏覽樣式，如下所示：

• 在 [ 效能 ] 工具右上角，按一下 [ 顯示快速鍵]) 按鈕，然後選取 [ 新式 ] 或 [傳統 ] 選項按鈕。

  鍵盤 快速鍵對話 方塊會顯示所選對應選項的可用快速鍵。

選取 [新式 ] 選項按鈕時：

• 若要縮放： Command/Ctrl + 滑鼠滾輪。
• 垂直捲動：滑鼠滾輪。
• 水平捲動： Shift + 滑鼠滾輪。

選取 傳統 選項按鈕時：

• 若要縮放：滑鼠滾輪或觸控板向上或向下。
• 垂直捲動： Shift + 滑鼠滾輪。
• 至水平捲動： Shift + 向左鍵|向右鍵

其他快速鍵：

• 按 W 或 S 來縮放。

• 按 A 或 D 左右平移。

選取錄製內容的一部分

錄製內容頂端會顯示 [時間表概觀 ] 區段，包括右) 所示的 CPU 和 NET 圖表 (：

若要選取錄製內容的一部分，請在 [時間表] 概觀中，按一下並水平拖曳：

若要使用鍵盤選取部分：

1. 將焦點放在 主 軌道或其任何相鄰軌道上。

2. 使用 W、 A、 S、 D 鍵可分別放大、向左移動、縮小和向右移動。

若要使用觸控板選取部分：

1. 將游標停留在 [時間表概覽] 區段或任何 (Main 及其鄰近) 的曲目上。

2. 使用兩根手指向上撥動可縮小、向左撥動可向左移動、向下滑動可放大，向右撥動可向右移動。

您可以使用滑鼠、鍵盤或觸控板選取錄製內容的一部分。

滑鼠

若要使用滑鼠選取錄製內容的一部分：

• 在概 觀上向左或向右拖曳滑鼠。 [ 概觀 ] 是包含 CPU 和 NET 圖表的區段：

若要在 [主要 ] 區段或任何相鄰區段中捲動長火焰圖，請按住並同時向上和向下拖曳。 向左或向右拖曳以移動已選取錄製內容的哪個部分。

鍵盤：

若要使用鍵盤選取錄製內容的一部分：

1. 選取 [主要 ] 區段的背景，或選取 [主要 ] 區段旁的區段背景，例如 互動、 網路或 GPU。 只有當其中一個區段成為焦點時，此鍵盤工作流程才能運作。

2. 按 W 或 可 S 放大或縮小。按 A 或 D 以向左或向右移動。

軌跡板：

若要使用軌跡板選取錄製內容的一部分：

1. 將游標停留在 [概觀 ] 區段或 [詳細資料 ] 區段上。 概 觀 區段是包含 FPS、 CPU 和 NET 圖表的區域。 詳細 資料 區段是包含 [主要 ] 區段和 [ 互動] 區段的區域。

2. 使用兩根手指向上撥動可縮小，或向下撥動可放大。 使用兩根手指，向左撥動可向左移動，或向右撥動可向右移動。

放大錄製內容的部分內容，並在縮放層級之間切換

[ 時間軸] 概觀 可讓您連續放大錄製的部分，並在每個步驟中建立痕跡，然後您可以在這些縮放層級之間切換。

若要放大錄製內容的一部分並使用軌跡：

1. 在 [時間表概觀] 中，選取上方錄製內容 (部分) 。

2. 將游標停留在選取範圍上，然後按一下 [N 毫秒 ] ) 按鈕：

   

   選取範圍隨即展開以填滿 [時間表] 概觀。 軌跡鏈會開始在 [時間表] 概觀頂端建置。

3. 重複前兩個步驟，建立另一個巢狀軌跡。 只要選取範圍大於 5 毫秒，您就可以繼續巢狀階層連結。

4. 若要跳至所選的縮放層級，請按一下 [時間軸] 概觀頂端鏈結中的對應軌跡。

若要移除階層連結的子系，請以滑鼠右鍵按一下父階層連結，然後選取 [移除子階層連結]：

捲動長火焰圖

若要捲動 主 軌道或其任何相鄰軌道中的長火焰圖，請按住，然後向任何方向拖曳，直到您要尋找的內容出現在視野中。

搜尋活動

您可以搜尋 主要 軌道中的活動和 網路 軌道中的請求。

若要開啟 [效能 ] 工具底部的搜尋方塊：

1. Windows (按 Ctrl+F，Linux) 按，macOS) (按 Command+F。

   [ 尋找 ] 方塊會出現在 效能 工具的底部：

   

2. 在 [尋找 ] 方塊中，輸入查詢，例如 “recalculate style”。

   相符活動會在您鍵入時醒目提示 主要 區段，相符總數會顯示在搜尋方塊中。 已選取第一個相符活動，以藍色顯示：

   

若要在符合查詢的活動之間瀏覽：

• 若要選取下一個活動，請按 Enter 或按一下 下一個 () 按鈕。

• 若要選取上一個活動，請按 Shift+Enter 或按一下 [ 上一個 () ] 按鈕。

[ 效能 ] 工具會在搜尋方塊中所選活動上顯示工具提示。

若要修改查詢設定：

• 若要在查詢中使用規則運算式，請按一下 [ 啟用規則運算式 ] ) 按鈕。 如果您選取 [正則運算式 ] 按鈕，然後輸入 ^E.* ，會找到任何活動 任何以字母 E 開頭的活動。

• 若要讓查詢區分大小寫，請按一下 [ 啟用區分大小寫的搜尋 ] () 按鈕。

若要隱藏搜尋方塊，請按一下 [取消 ] 按鈕。

變更曲目順序或隱藏它們

若要整理效能追蹤，您可以在追蹤設定模式中變更追蹤順序，並隱藏不相關的追蹤。

若要移動和隱藏曲目：

1. 若要進入設定模式，請以滑鼠右鍵按一下曲目名稱，然後選取 [設定曲目]。

2. 按一下 [ 向上移動曲目 ] ) 按鈕，或按一下 [ 向下移動曲目 ] ) 按鈕，將曲目向上或向下移動。 按一下 [ 隱藏曲目 ] () 按鈕來隱藏它。

3. 以滑鼠右鍵按一下曲目，然後選取 [完成設定]。

效能工具也會將您的追蹤設定套用至新的追蹤，除非您關閉然後重新開啟 DevTools。

檢視主執行緒活動

使用 [主要 ] 區段來檢視頁面主要執行緒上發生的活動：

選取事件以在 [摘要 ] 索引標籤中檢視其詳細資訊。DevTools 概述選取的事件：

DevTools 以火焰圖代表主要執行緒活動：

X 軸代表一段時間的錄製內容。 Y 軸代表呼叫堆疊。 靠近頂部的事件會導致其下方的事件;例如，在上圖中，一個 input 事件導致 Function Call，它執行了一個匿名函數，該函數呼叫 filterByCamera 了 然後 populateGallery。 然後，函數 populateGallery 通過調用 set innerHTML來進行 DOM 更改。

DevTools 會指派指令碼隨機色彩。 在上圖中，來自指令碼的函數要求是紫紅色 (紫粉紅色) 。 較深的黃色代表指令碼活動，紫色事件代表轉譯活動。 這些較深的黃色和紫色事件在所有錄音中都是一致的。

如果您想要隱藏 JavaScript 要求的詳細火焰圖，請參閱上方的 停用 JavaScript 範例。 停用 JavaScript 範例時，只會顯示高層級事件，例如 Event: input 上圖中的 和 Function Call 。

讀取火焰圖

[ 效能 ] 工具代表火焰圖中的主要執行緒活動。 X 軸代表一段時間的錄製內容。 Y 軸代表呼叫堆疊。 頂端的事件會造成下列事件。

[ 效能 ] 工具會指派指令碼隨機色彩，以分割火焰圖並使其更具可讀性。

長任務也會以紅色三角形醒目提示，超過 50 毫秒的部分則以紅色陰影顯示。

此外， 主 軌道顯示有關啟動和停止 profile() 的 CPU 設定檔以及 profileEnd() 主控台功能的資訊。

若要隱藏 JavaScript 呼叫的詳細火焰圖，請參閱停用 JavaScript 範例。 停用 JS 範例時，您只會看到高階事件 Event (click) ，例如 和 Function Call。

追蹤事件發起人

主軌道可以顯示連接下列啟動者及其所引發事件的箭號：

• 樣式或版面配置無效 ->重新計算樣式 或 版面配置
• 要求動畫框架 ->動畫框架已觸發
• 請求閒置回撥 ->觸發閒置回撥
• 安裝計時器 ->計時器已觸發
• 建立 WebSocket ->Send... 並 接收 WebSocket 交握 或 銷毀 WebSocket
• 排程 postTask ->引發 postTask 或中 止 postTask

若要查看箭頭，請在火焰圖中找到啟動器或它引起的事件，然後選取它。

選取時，[摘要] 索引標籤會顯示啟動器連結的啟動器，以及啟動者所造成事件的連結啟動者。 按一下它們以在對應的事件之間跳轉。

在火焰圖中隱藏函數及其子系

若要整理 [主 執行緒] 中的火焰圖，您可以隱藏選取的函數或其子系：

1. 在 主 曲目中，以滑鼠右鍵按一下函數，然後選擇下列其中一個選項，或按對應的快速鍵：

   • Hide 功能 (H)
   • 隱藏子女 (C)
   • 隱藏重複的子系 (R)
   • 重設子女 (U)
   • 重設追蹤 (T)
   • 新增指令碼以忽略清單 (我)

   數字 隱藏 的下拉式 (數字隱藏的下 按鈕會出現在含有隱藏子系的函數名稱旁邊。

2. 若要查看隱藏的子女數目，請將游標暫留在 [ 隱藏的數字 ] 下拉式清單 ([ 按鈕上。

3. 若要重設具有隱藏子項或整個火焰圖的函數，請選取函數並按 U 或以滑鼠右鍵按一下任何函數，然後分別選取 [重設追蹤 ]。

忽略火焰圖中的指令碼

若要將指令碼新增至忽略清單，請以滑鼠右鍵按一下圖表中的指令碼，然後選取 [新增指令碼以忽略清單]。

圖表會摺疊略過的指令碼，將它們標示為 [在忽略清單上]，並將它們新增至 [自訂和控制 DevTools] ([自訂) >[設定>忽略] 清單中的 [自訂和控制 DevTools] 圖示。 系統會儲存略過的指令碼，直到您從追蹤或 自訂排除規則中移除它們為止。

檢視資料表中的活動

錄製頁面後，除了分析活動的 [主要 ] 區段之外，DevTools 還提供三個分析活動的表格式檢視。 每個檢視都提供您對活動的不同觀點：

• 若要檢視直接花費最多時間的活動，請使用 [由下而上 ] 索引標籤。

• 若要檢視導致最多工作的根活動，請使用 [通話樹 狀] 索引標籤。

• 若要依錄製期間活動發生的順序檢視活動，請使用 事件記錄檔 索引標籤。

為了協助您更快速地找到您要尋找的內容，這三個索引標籤的 篩選列旁 都有進階篩選按鈕：

• [ 啟用規則運算式] () 按鈕。

• [ 啟用區分大小寫的搜尋 ] () 按鈕。

[ 效能 ] 工具中的每個表格式檢視都會顯示活動的連結，例如函式呼叫。 為了協助您偵錯，DevTools 會在來源檔案中找到對應的函式宣告。 此外，如果適當的來源對應存在並啟用，DevTools 會自動尋找原始檔案。

按一下連結以在 [來源 ] 工具中開啟來源檔案。

接下來的三個部分都引用同一個演示。 您可以在 [活動索引標籤示範 ] 中自行執行示範，並在 MicrosoftEdge / Demos > /devtools-performance-activitytabs/ 查看來源。

根活動

以下是 [呼叫樹 狀結構] 索引標籤、[ 由下而上] 索引標籤和 [事件記錄檔 ] 區段中提及的根活動概念的說明。

根活動 是導致瀏覽器執行某些工作的活動。 例如，當您按一下網頁時，瀏覽器會以根活動的方式執行 Event 活動。 該 Event 活動可能會導致執行其他活動，例如處理常式。

在 [主要 ] 區段的火焰圖中，根活動位於圖表頂端。 在 [通話樹 ] 和 [事件記錄檔 ] 索引標籤中，根活動是頂層專案。

如需根活動的範例，請參閱下方的 呼叫樹狀結構索引標籤。

[通話樹狀] 索引標籤

使用 [呼叫樹 狀] 索引標籤來檢視哪些 根活動 導致最多的工作。

通話 樹索引 標籤只會顯示錄製內容選取部分期間的活動。 若要了解如何選取錄製內容的一部分，請參閱上方選取 錄製內容的一部分。

在上圖中， 「活動」 資料行中的頂層項目（例如 Event Timing）是根活動。 巢狀結構代表呼叫堆疊。 例如，在上圖中， Event Timing 導致 Event: mouseup，這導致 Function Call了 ，這導致了 ，依 (anonymous)此類推。

自我時間 代表直接花費在該活動中的時間。 [總時間 ] 代表在該活動或任何兒童上所花費的時間。

按一下 [自己時間]、[ 總時間] 或 [活動 ] 以依該欄來排序表格。

使用 [篩選] 文字方塊依活動名稱篩選事件。

根據預設，[分組] 功能表設定為 [無分組]。 使用 [ 分組 ] 功能表根據各種準則來排序活動表格。

按一下 [ 顯示最重的堆疊] ([ ) ] 以顯示 [活動] 資料表右側的另一個資料表。 按一下活動以填入 [ 最重堆疊 ] 資料表。 [ 最重堆疊] 表格會顯示所選活動的哪些子系執行時間最長。

[由下而上] 索引標籤

使用 [由下而上] 索引標籤來檢視哪些活動直接佔用了最多的時間。

「 由下而上」 標籤只會顯示錄製內容選取部分期間的活動。 若要了解如何選取錄製內容的一部分，請參閱上方選取 錄製內容的一部分。

在上圖 的主要區段 火焰圖中，幾乎所有的時間都花在執行 a、 b及 c 函數上。 上圖由 下而上 索引標籤中最熱門的活動也是 a、 b和 c。 在 「由下而上」 索引標籤中，下一個最昂貴的活動是 Minor GC。

「 自我時間」 欄代表直接在該活動中花費的所有事件的彙總時間。

[ 總計時間 ] 資料行代表在該活動或任何子系中所花費的彙總時間。

[事件記錄檔] 索引標籤

使用 Event log 索引標籤，依錄製期間活動發生的順序來檢視活動。

此 事件記錄檔 索引標籤只會顯示錄製內容選取部分期間的活動。 若要了解如何選取錄製內容的一部分，請參閱上方選取 錄製內容的一部分。

[ 開始時間 ] 資料行代表該活動相對於錄製開始的時間點。 例如，上圖中所選項目的開始時間 925.0 ms 表示活動是在錄製開始後 925.0 毫秒時開始。

[ 自我時間 ] 欄代表直接花費在該活動中的時間。

[ 總計時間 ] 資料行代表直接花費在該活動或任何子系中的時間。

按一下 [開始時間]、[ 自行時間] 或 [ 總計時間 ] 欄標題，依該欄來排序表格。

使用 [篩選] 文字方塊依名稱篩選活動。

使用 [持續時間] 功能表篩選掉所花時間少於 1 毫秒或 15 毫秒的任何活動。 預設情況下， 「持續時間」 功能表設定為「 全部」，表示會顯示所有活動。

清除 載入、 指令碼編列、 轉譯或 繪製 核取方塊，以篩選掉這些類別中的所有活動。

檢視成效標記

在效能追蹤的垂直線重疊中，您可以看到重要的效能標記，例如：

• 第一幅畫 (FP)
  • 第一個 Paint (FP) 在 MDN 的詞彙表中。
• 第一個 Contentful Paint (FCP)
  • 第一個內容豐富的繪製 (FCP) 在 MDN 的詞彙表中。
  • MDN 的 PerformancePaintTiming。
• 最大的內容性繪畫 (LCP)
  • MDN 詞彙表中最大的內容 (LCP) 。
  • MDN 的 LargestContentfulPaint。
• DCL) (DOMContentLoaded 事件
  • MDN 的 DCL) (DOMContentLoaded 事件 。
• Onload 事件 (L)
  • Onload 事件 ( MDN 的 L) 。

將游標停留在追蹤底部的標記名稱上，即可查看其時間戳記。

檢視自訂計時

在 「計時 」軌道上，檢視您的自訂成效標記，例如：

• performance.mark() 通話。

• performance.measure() 通話。

選取標記以在 [ 摘要 ] 索引標籤中查看更多詳細資料，包括其時間戳記、總時間、自己時間及 detail 物件。 針對 performance.mark() 和 performance.measure() 呼叫，索引標籤也會顯示堆疊追蹤。

檢視互動

使用 [互動 ] 區段來尋找及分析錄製期間發生的使用者互動：

互動底部的紅線代表等待主執行緒所花費的時間。

按一下互動以在 [摘要 ] 索引標籤中檢視更多相關資訊。

檢視版面配置移轉

在 [版面配置移位 ] 軌道上檢視版面配置班次。班次會顯示為紫色菱形，並根據班次在時間表上的鄰近程度) 以紫色線條 (群組分組。

若要醒目提示導致視埠中版面配置移動的元素，請將游標暫留在對應的菱形上。

若要在 [摘要 ] 索引標籤中查看有關版面配置偏移的詳細資訊，包括時間、分數、元素和潛在的原因，請按一下對應的菱形或叢集。

如需詳細資訊，請參閱 MDN 的 CLS) (累積版面配置轉移 。

檢視動畫

在 [動畫 ] 軌道上檢視動畫。動畫會命名為對應的 CSS 屬性或元素（如果有的話），例如 transformmy-element或 。 非合成動畫會在右上角以紅色三角形標示。

選取動畫以在 [摘要 ] 索引標籤中查看更多詳細資料，包括合成失敗的原因。

檢視 GPU 活動

在 [效能] 工具的 [GPU] 區段中檢視 GPU 活動：

檢視點陣活動

在「 執行緒集區 」區段中檢視點陣活動。

分析每秒畫面格數 (FPS)

DevTools 提供兩種方法來分析每秒畫面數：

• 使用 [畫面] 區段來檢視特定畫面所花的時間長度。 請參閱下方的 框架部分。

• 使用 FPS 計量頁面 執行時即時估計 FPS。 請參閱下方的 FPS 計即時檢視每秒畫面格數。

[框架] 區段

[ 畫面] 區段會準確告訴您特定畫面所花費的時間長度。

將游標停留在框架上以檢視包含詳細資訊的工具提示：

以上範例顯示當您將游標暫留在框架上時的工具提示。

[框架] 區段可以顯示四種類型的框架：

• 空閒框架 (白色) 。 沒有變更。

• 框架 (綠色) 。 如預期及時轉譯。

• 部分呈現的框架 (黃色，帶有稀疏的寬虛線圖案) 。 Microsoft Edge 盡最大努力及時渲染至少一些視覺更新。 例如，萬一轉譯器程序的主執行緒 (畫布動畫) 的工作延遲，但捲動) (的撰寫器執行緒及時完成。

• 落框 (紅色，帶有濃密的實線圖案) 。 Microsoft Edge 無法在合理的時間內轉譯框架。

按一下框架以在 [效能] 工具底部的 [摘要] 索引標籤中檢視有關框架的詳細資訊。 DevTools 會以藍色勾勒出選取的框架的外框：

檢視網路要求

展開 [網路 ] 區段，以查看錄製期間發生的網路要求瀑布：

按一下要求以在 [摘要 ] 索引標籤中檢視更多相關資訊：

[網路] 區段中的要求會以色彩編碼如下：

• 藍色背景：HTML 要求。
• 紫色背景：CSS 要求。
• 深黃色背景：JS 要求。
• 綠色背景：影像要求。

要求在左上角有方塊：

• 要求左上角的深藍色方塊表示這是較高優先順序的要求。
• 淺藍色正方形表示優先順序較低。

例如，在上圖中，[網路] 區段左上角的相片庫要求是較高優先順序。

要求的左右兩側可能有線條，其長條可能會分割成兩種色彩。 以下是這些線條和顏色所代表的意義：

• 左行是事件組的所有 Connection Start 內容，包括在內。 換句話說，這是之前 Request Sent的一切，獨家的。

• 長條的淺色部分是 Request Sent 和 Waiting (TTFB) 用於服務器響應。

• 長條的深色部分是 Content Download。

• 正確的行本質上是等待主執行緒所花費的時間。 這不會在 [時間 ] 索引標籤中顯示。

檢視記憶體計量

選取 [記憶體 ] 核取方塊以檢視效能錄製中的記憶體計量：

DevTools 會在 [摘要] 索引標籤上方顯示記憶體圖表。NET 圖表下方還有一個圖表，稱為 HEAP。 堆積圖提供的資訊與記憶體圖表中的 JS 堆積線條相同：

圖表上的彩色線條會對應到圖表上方的彩色核取方塊。 清除核取方塊以從圖表中隱藏該類別。

圖表只會顯示目前選取的錄製內容區域。 例如，在上圖中， 記憶體 圖表僅顯示大約 3600 ms 到 6200 ms 標記的記憶體使用量。

另請參閱:

• 視覺化記憶體流失 (效能工具：記憶體核取方塊) 下方。

檢視錄製內容部分的持續時間

在分析 [網路 ] 或 [主要] 等區段時，有時候您需要更精確地估計特定事件所花的時間長度。 按住 Shift 鍵，按住並按住，然後向左或向右拖曳以選取錄製內容的一部分。 在選取範圍底部，DevTools 會顯示該部分所花的時間長度：

檢視螢幕擷取畫面

若要了解如何開啟螢幕擷取畫面，請參閱上方的錄製時Capture螢幕擷取畫面。

若要檢視錄製當下頁面外觀的螢幕擷取畫面，請將游標暫留在 [ 概觀] 上。 [ 概觀 ] 是包含 CPU 和 NET 圖表的區段：

您也可以在 [框架 ] 區段中選取框架來檢視螢幕擷取畫面。 DevTools 會在 [摘要 ] 索引標籤中顯示螢幕擷取畫面的小型版本：

若要放大螢幕擷取畫面，請按一下 [摘要 ] 索引標籤中的縮圖。

檢視圖層資訊

若要檢視有關框架的進階圖層資訊：

1. 在 [效能] 工具中，按一下 [Capture設定] ([]) 按鈕，然後選取 [啟用進階轉譯檢測 (緩慢) ] 核取方塊。

2. 在 [框架] 區段中，選取框架。 DevTools 會在 [效能] 工具底部的 [圖層] 索引標籤中顯示圖層的相關資訊：

   

[圖層] 索引標籤的用途類似於 [3D 視圖] 工具中的 [複合圖層] 索引標籤。 若要瞭解如何與 [圖層 ] 索引標籤互動，請參閱 使用 [3D 檢視] 工具瀏覽網頁圖層、z 索引和 DOM。

檢視油漆分析工具

若要檢視有關繪製事件的進階資訊：

1. 在 [效能] 工具中，按一下 [Capture設定] ([]) 按鈕，然後選取 [啟用進階轉譯檢測 (緩慢) ] 核取方塊。

2. 選取 [主要] 區段中的 [小畫家] 事件。 DevTools 會在 [繪製分析工具 ] 索引標籤中顯示繪製事件的相關資訊：

   

檢視 CSS 選取器統計資料

若要檢視在效能錄製期間重新計算的 CSS 規則選取器的相關統計資料：

• 在 [效能] 工具中，按一下 [Capture設定] ([]) 按鈕，然後選取 [啟用進階轉譯檢測 (緩慢) ] 核取方塊。

  DevTools 會在 [ 選取器統計資料 ] 索引標籤中顯示錄製期間重新計算的 CSS 規則選取器的相關彙總資訊：

  

1. 在 [主要 ] 區段中，選取 [重新計算樣式] 事件。 在 [選取器統計資料 ] 索引標籤中，開發工具會顯示在該事件期間重新計算之 CSS 規則選取器的相關資訊。

另請參閱:

• 分析重新計算樣式事件期間的 CSS 選取器效能

檢視 Windows、iframe 和專用工作角色之間的訊息

DevTools 實驗 效能面板：顯示 postMessage 分派和處理流程 改善效能工具的 [主要] 區段，藉由區分方法觸發postMessage的事件與 [效能] 工具中顯示的其他事件，協助您快速識別postMessage事件和處理常式。 此實驗可協助您調查與跨應用程式各種執行緒張貼訊息相關的效能問題。

如果沒有此實驗，在應用程式的執行緒之間分派和處理訊息所觸發的事件會顯示為一般指令碼函式呼叫事件。 啟用此實驗後：

• postMessage 分派事件會顯示為 排程 postMessage。
• postMessage 處理常式事件顯示為 On 訊息：

此實驗可協助您調查呼叫發生的時間 postMessage ，以及訊息在處理常式啟動之前 postMessage 已佇列多久。 分派事件會透過啟動器箭號連結到處理常式事件，這些箭號會在您按一下任一類型的事件時出現：

若要使用此功能，請在開發工具中選取 [ 自訂和控制開發工具]) >[設定>實驗]，選取 [ 效能面板：顯示 postMessage 分派和處理流程]，按一下 [ 關閉 (X) ] 按鈕，然後按一下 [ 重新載入開發工具 ] 按鈕。

另請參閱:

• 效能錄製事件參考
• postMessage 追蹤事件示範 (轉譯)
• postMessage 追蹤事件示範 (原始程式碼)

檢視 WebSocket 訊息

WebSocket 活動會顯示在效能工具的網路軌道中，協助將 JavaScript 活動與 WebSocket 訊息相互關聯。 這可協助識別延遲問題是來自用戶端的訊息剖析，還是來自伺服器的回應。

若要在 [效能 ] 工具中檢視 WebSocket 訊息：

1. 移至傳送 WebSocket 訊息的網頁，例如，在新視窗或索引標籤中簡 易聊天應用程式。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 在 [活動列] 中，選取 [ 效能 ] ) 工具。

4. 在 [ 效能 ] 工具左上角，按一下 [ 錄製 ] ) 按鈕。

5. 在聊天網頁的 [ 使用者名稱 ] 文字方塊中，輸入名稱，例如 “John”，然後按一下 [連線 ] 按鈕。

   在聊天表單的底部，會顯示一則訊息，例如「John：v8g...連線的。」

6. 在 [傳送訊息 ] 文字方塊中，輸入一則訊息，例如 “Hello”，然後按一下 [ 傳送 ] 按鈕。

   在聊天應用程式中，會顯示訊息，例如「您好」：

   

   WebSocket 流量已產生。

7. 在 [ 效能 ] 工具左上角，按一下 [ 停止 ] ) 按鈕。

   或者，在 [ 效能 ] 工具的中間，按一下 [ 停止 ] 按鈕。

   在 [ 效能 ] 工具中，會顯示時間表。

8. 展開 [網路 ] 曲目。

9. 按一下垂直金線。

10. 在 [ 效能 ] 工具底部的 [摘要 ] 索引標籤中，會顯示所選 WebSocket 訊息的相關資訊，例如：

    • 傳送 WebSocket 握手
    • 接收 WebSocket 握手
    • 收到 WebSocket 訊息：

    

另請參閱:

• 在 [網路功能參考] 中分析 WebSocket 連線的訊息。
• 追蹤事件發起人，如上所示。
• 分析執行階段效能 (教學課程)

使用 [轉譯] 工具分析轉譯效能

使用 [轉譯] 工具協助視覺化頁面的轉譯效能。 轉 譯 工具是 快速檢視 工具;如果您從 命令功能表開啟它，它會在開發工具底部開啟。

若要開啟 轉譯 工具：

1. 在新視窗或索引標籤中開啟網頁，例如 [緩慢動畫]。

2. 以滑鼠右鍵按一下網頁，然後選取 [檢查]。

   DevTools 隨即開啟。

3. 如果未顯示 [ 快速檢視 ] 面板，請選取 [ 自訂和控制開發工具 ] ([自訂 ) >切換快速檢視面板。

   或按下 Esc。

4. 在 快速檢視 工具列上，按一下 [其他工具 ] () 按鈕，然後選取 [ 轉譯]。

   轉 譯 工具隨即會在「 快速檢視」 面板中開啟：

   

另請參閱:

• 轉譯工具，查看網頁在不同顯示選項或視力缺陷下的外觀

使用 FPS 計即時檢視每秒畫面格數

FPS 計是顯示在轉譯網頁左上角的重疊。 它會在頁面執行時提供即時的 FPS 預估。 若要開啟 FPS 計量表：

1. 開啟 轉譯 工具。 請參閱上方的 使用轉譯工具分析轉譯效能。

2. 選取 [框架轉譯統計資料 ] 核取方塊。 FPS 計量表重疊會顯示在轉譯的網頁中：

   

使用 [小畫家閃爍] 即時檢視繪圖活動

使用 [小畫家閃爍] 以取得頁面上所有小畫家事件的即時檢視。 每當頁面的一部分重新繪製時，DevTools 就會以綠色勾勒出該區段的外框。

若要開啟 [小畫家] 閃爍：

1. 開啟 轉譯 工具。 請參閱上方的 使用轉譯工具分析轉譯效能。

2. 選取 [ 油漆閃爍 ] 核取方塊。 綠色外框會顯示在轉譯的網頁中：

   

檢視具有圖層框線的圖層重疊

若要檢視頁面頂端的圖層框線和磚重疊：

1. 開啟 [轉譯 ] 工具，如上述使用 [轉譯工具分析轉譯效能] 中所述。

2. 選取 「圖層框線 」核取方塊。 圖層框線會顯示在轉譯的網頁中：

   

請參閱 debug_colors.cc 中的註解以了解顏色編碼的說明。

即時尋找捲動效能問題

使用 [捲動效能問題 ] 核取方塊以識別頁面元素，其中具有與捲動相關的事件接聽器，可能會損害頁面效能。 DevTools 概述藍綠色中可能有問題的元素。

若要檢視捲動效能問題：

1. 開啟 [轉譯 ] 工具，如上述使用 [轉譯工具分析轉譯效能] 中所述。

2. 選取 [ 捲動效能問題 ] 核取方塊。 概述可能有問題的元素：

   

另請參閱:

• 慢速捲動矩形 ( 使用 [3D 檢視] 工具瀏覽網頁圖層、z 索引和 DOM 的核取方塊) 。

停用本機字型

在 [轉譯] 工具中，使用 [停用本機字型] 核取方塊以模擬規則中@font-face遺失local()的來源。

例如，當您的裝置上安裝了 魔術 字型，且規則會將其 @font-face src 用作 local() 字型時，Microsoft Edge 會使用您裝置中的本機字型檔案。

選取 [停用本機字型] 時，DevTools 會忽略字型， local() 並從網路擷取每個字型：

如果您在開發期間使用相同字型的兩個不同副本，此功能非常有用，例如：

• 設計工具的本機字型。
• 程式碼的網頁字型。

使用 [停用本機字型] 可讓您更輕鬆地執行下列工作：

• 偵錯及測量網頁字型的載入效能及最佳化。
• 驗證 CSS @font-face 規則的正確性。
• 探索裝置上安裝的本機版本與網頁字型之間的差異。

以視覺化方式呈現記憶體流失 (效能工具：記憶體核取方塊)

作為調查網頁記憶體使用量的起點，請使用 [效能 ] 工具的 [記憶體 ] 核取方塊。 (或者，即時 監視記憶體使用量 (瀏覽器工作管理員) .)

[ 效能 ] 工具可協助您以視覺化方式呈現頁面在一段時間內的記憶體使用量。

1. 在 DevTools 中，開啟 效能 工具。

2. 選取 [記憶體 ] 核取方塊。

3. 根據上述 的記錄效能進行錄製。

以強制垃圾收集來開始和結束錄製是很好的做法。 若要強制執行垃圾項目收集，請在錄製時按一下 [收集垃圾 按鈕。

若要示範記憶體記錄，請考慮下列程式碼：

var x = [];
function grow() {
    for (var i = 0; i < 10000; i++) {
        document.body.appendChild(document.createElement('div'));
    }
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

每當您按一下程式碼中參照的按鈕時，就會有 10,000 div 個節點附加至文件內文，並將 1,000,000 x 個字元的字串推送到陣列上 x 。 執行先前的程式碼會在 [效能 ] 工具中產生錄製：

首先，使用者介面的說明。 [概觀] 窗格中的堆圖 ( 下方 NET) 代表 JS 堆積。 [ 概觀 ] 窗格下方是 [計數器 ] 窗格。 記憶體使用量會依 JS 堆積 (與 [概觀] 窗格中的 HEAP 圖表相同，) 、文件、DOM 節點、接聽程式和 GPU 記憶體。 清除核取方塊以將其從圖形中隱藏。

現在，將程式碼與上圖進行比較分析。 如果您查看節點計數器 (綠色圖形) ，它會與代碼完全相符。 節點計數會以離散的步驟增加。 您可以假設節點計數的每次增加都是對 grow()的呼叫。

藍色圖形) (JS 堆積圖並不那麼簡單。 與最佳做法保持一致，第一個下降實際上是強制廢棄項目收集， (按一下 [ 收集廢棄項目 ] 按鈕) 。

隨著記錄的進行，會顯示 JS 堆積大小尖峰。 這是自然且意料之中的：JavaScript 程式碼會在您按一下的每個按鈕上建立 DOM 節點，並且在建立一百萬個字元的字串時會做大量工作。

這裡的關鍵是 JS 堆的結尾高於它開始的位置， (這裡的「開始」是強制垃圾收集) 之後的點。 在現實世界中，如果您看到這種增加 JS 堆大小或節點大小的模式，則可能表示記憶體洩漏。

另請參閱:

• 檢視上方的記憶體計量。

注意事項

本頁面的部分內容是根據 Google 建立和分享 的作品進行修改，並根據知識 共享署名 4.0 國際授權條款中所述的條款使用。 原始頁面可在 此處 找到，由 Kayce Basques 撰寫。

本作品已根據 知識共享署名 4.0 國際許可證獲得許可。