本頁將完整介紹與分析效能相關的 Chrome 開發人員工具功能。
請參閱開始使用分析執行階段效能,透過導覽教學課程瞭解如何分析 顯示效能
記錄效能
你可以記錄執行階段或載入效能。
記錄執行階段效能
記錄執行階段效能,以便在網頁運作期間分析效能,例如 而非載入內容
- 前往要分析的頁面。
- 按一下開發人員工具中的「效能」分頁標籤。
按一下「Record」
。
與頁面互動。開發人員工具會記錄所有網頁活動。 互動情形
再次按一下「Record」,或點選「Stop」來停止錄影。
記錄負載效能
在網頁載入期間分析載入效能時 (例如 而不是跑步
- 前往要分析的頁面。
- 開啟開發人員工具的「Performance」面板。
按一下「Start profiling and 重新載入頁面」
。開發人員工具會先前往
about:blank
,清除任何剩餘的螢幕截圖和追蹤記錄。然後開發人員工具 記錄成效指標,然後自動停止記錄。 幾秒內載入完畢
開發人員工具會自動放大記錄中大多數活動發生的位置。
在本範例中,「成效」面板會顯示網頁載入期間的活動。
在錄製時擷取螢幕截圖
勾選「Screenshots」核取方塊,即可在錄影時擷取每個影格的螢幕截圖。
如要瞭解如何使用螢幕截圖,請參閱「查看螢幕截圖」。
在錄製時強制進行垃圾收集
錄製網頁時,按一下「收集垃圾」 mop 強制執行垃圾收集。
顯示錄製設定
按一下「擷取設定」
到
提供更多與開發人員工具擷取效能記錄相關的設定。
停用 JavaScript 範例
根據預設,記錄的「主要」軌跡會顯示詳細的 JavaScript 呼叫堆疊 所呼叫的函式。如何停用這些呼叫堆疊:
- 開啟「擷取設定」圖示
選單。請參閱「顯示錄製設定」。
- 勾選「停用 JavaScript 範例」核取方塊。
- 請錄製網頁的內容。
以下螢幕截圖顯示停用和啟用 JavaScript 範例的差異。 停用取樣時,主要音軌的長度會短很多,因為系統會省略所有記錄 JavaScript 呼叫堆疊
這個範例顯示錄製的 JS 範例已停用。
這個範例顯示了已啟用 JS 範例的錄影內容。
錄影時節流網路
如要在錄製時節流網路,請按照下列步驟操作:
- 開啟「擷取設定」圖示
選單。請參閱「顯示錄製設定」。
- 將「Network」(網路) 設為所選的節流層級。
在記錄時節流 CPU
如要在記錄時節流 CPU,請按照下列步驟操作:
- 開啟「擷取設定」圖示
選單。請參閱「顯示錄製設定」。
- 將「CPU」設為所選的節流等級。
節流與電腦功能息息相關。例如,速度延遲 2 倍的選項 可讓您的 CPU 運作速度比平常慢 2 倍開發人員工具無法實際模擬 CPU 因為行動裝置和行動裝置的架構非常不同 無論是桌電、筆電或筆電
啟用 CSS 選取器統計資料
如要在長時間執行「重新計算樣式」事件期間查看 CSS 規則選取器的統計資料,請按照下列步驟操作:
- 開啟「擷取設定」圖示
選單。請參閱「顯示錄製設定」。
- 勾選「啟用 CSS 選取器統計資料」核取方塊。
詳情請參閱「在重新計算樣式事件期間分析 CSS 選取器成效」一文。
啟用進階繪製檢測功能
如何檢視詳細的繪製檢測:
- 開啟「擷取設定」圖示
選單。請參閱「顯示錄製設定」。
- 勾選「Enable advanced Paint instrumentation」核取方塊。
如要瞭解如何與繪製資訊互動,請參閱檢視圖層和檢視繪圖 分析器。
模擬硬體並行
如要使用不同數量的處理器核心測試應用程式效能,您可以設定 navigator.hardwareConcurrency
屬性回報的值。有些應用程式會使用這項屬性控制應用程式的平行處理程度,例如控制 Emscripten pthread 集區大小。
如何模擬硬體並行:
- 開啟「擷取設定」圖示
選單。請參閱「顯示錄製設定」。
- 勾選「硬體並行」,然後在輸入方塊中設定核心數量。
開發人員工具會在「Performance」分頁旁邊顯示警告圖示 ,提醒您已啟用硬體並行模擬功能。
如要還原為預設值 10
,請按一下「還原」 按鈕。
儲存記錄
如要儲存錄音檔,請按一下滑鼠右鍵,然後選取「儲存設定檔」。
載入錄音檔
如要載入記錄,請按一下滑鼠右鍵,然後選取「Load Profile」。
清除上一個錄音
錄製完成後,按下「清除錄音」
,在「Performance」(效能) 面板中清除該記錄。
分析成效記錄
記錄執行階段效能或記錄載入效能後,效能 面板提供大量資料,方便您分析剛事件的運作成效。
瀏覽錄製內容
如要仔細查看效能記錄,你可以選取一段記錄資料、捲動長火焰圖、放大和縮小,以及使用導覽標記在縮放等級之間跳轉。
選取部分內容
在「Performance」面板的動作列下方和記錄頂端,您可以查看「Timeline Overview」部分,其中含有「CPU」和「NET」圖表。
如要選取錄音內容,請按住,然後在「時間軸總覽」部分向左或向右拖曳。
如何使用鍵盤選取部分:
- 將焦點移至「主要」曲目或其任何鄰近項目。
- 使用 W、A、S、D 鍵分別可放大、向左移動、縮小和向右移動。
如何使用觸控板選取部分:
- 將遊標懸停在「時間軸總覽」部分或任一測試群組 (「主要」和相鄰項目) 上。
- 使用雙指向上滑動可縮小畫面、向左滑動可向左移動、向下滑動可放大, 向右滑動即可向右移動。
建立導覽標記並在縮放等級之間跳轉
時間軸總覽可讓您連續建立多個巢狀導覽標記、增加縮放等級,然後跳到所選層級。
如何建立及使用導覽標記:
- 在「時間軸總覽」中,選取部分內容。
- 將遊標懸停在所選範圍上,然後按一下「N 毫秒」zoom_in 按鈕。選項會展開以填入時間軸總覽。「時間軸總覽」頂端會開始建立導覽標記鏈結。
- 重複前兩個步驟,建立另一個巢狀導覽標記。只要選取範圍超過 5 毫秒,您就可以繼續建立巢狀導覽標記。
- 如要跳至所選縮放等級,請在「時間軸總覽」頂端的鏈結中,按一下對應的導覽標記。
捲動長火圖
如要在「Main」軌跡中或鄰近的任一鄰點捲動較長的火焰圖,請點選並按住並往任何方向拖曳,直到要查看的內容出現在檢視畫面中。
搜尋活動
如要開啟「效能」面板底部的搜尋框,請按下:
- macOS:Command + F 鍵
- Windows、Linux:Control + F 鍵
本範例會在畫面底部的搜尋框中顯示規則運算式,找出任何開頭為 E
的活動。
如要循環顯示符合查詢的活動:
- 按一下「展開無」expand_less或「展開」expand_less「下一個」按鈕。
- 按下 Shift + Enter 鍵可選取上一個項目,按下 Enter 鍵可選取下一個項目。
「成效」面板會根據搜尋框中的所選活動顯示工具提示。
如要修改查詢設定,請按照下列步驟操作:
- 按一下 [match_case]match_case (大小寫相符),即可讓查詢區分大小寫。
- 按一下 [regular_expression] (規則運算式) regular_expression,即可在查詢中使用規則運算式。
如要隱藏搜尋框,請按一下「取消」。
變更足跡順序並隱藏足跡
如要整理效能追蹤記錄,可以變更測試群組順序,並在追蹤設定模式中隱藏不相關的項目。
移動及隱藏音軌:
- 如要進入設定模式,請在測試群組名稱上按一下滑鼠右鍵,然後選取「設定測試群組」。
- 按一下「arrow_upward」arrow_upward或「arrow_downward」arrow_upward,即可將曲目向上或向下移動。按一下 visibility_off 來隱藏該活動。
- 完成後,按一下底部的「完成測試群組」,即可結束設定模式。
觀看影片,瞭解此工作流程的實際運作情形。
「Performance」面板會儲存新追蹤記錄的設定,但不會在下一個開發人員工具工作階段中儲存。
查看主要執行緒活動
您可以使用「Main」追蹤,查看頁面主執行緒中發生的活動。
按一下事件,即可在「摘要」分頁中查看相關資訊。「成效」面板會以藍色顯示所選事件。
本範例會在「Summary」分頁中,進一步說明 get
函式呼叫事件。
解讀火焰圖
「Performance」面板代表火焰圖中的主要執行緒活動。X 軸代表一段時間內的記錄。Y 軸代表呼叫堆疊。上方的事件會導致以下事件。
這個範例是「Main」軌跡中的火焰圖。click
事件造成匿名函式呼叫。此函式反而稱為 onEndpointClick_
,稱為 handleClick_
,依此類推。
「Performance」面板會指派指令碼隨機顏色,藉此細分火焰圖,讓內容更清晰易讀。在前例中,來自某個指令碼的函式呼叫會以淺藍色顯示。其他指令碼的來電會以淺粉色標示。深黃色代表指令碼活動,紫色事件則代表轉譯活動。在所有錄製內容中,這些較深的黃色和紫色事件都保持一致。
長時間的工作也會以紅色三角形醒目顯示,而超過 50 毫秒的部分則會以紅色顯示:
在這個範例中,工作需要超過 400 毫秒,因此代表最後 350 毫秒的部分以紅色標示,初始的 50 毫秒則不是。
此外,「Main」測試群組會顯示 profile()
和 profileEnd()
控制台函式啟動及停止的 CPU 設定檔資訊。
如要隱藏 JavaScript 呼叫的詳細火焰圖,請參閱「停用 JavaScript 範例」。停用 JS 範例後,您只會看到高階事件,例如 Event (click)
和 Function Call
。
追蹤事件發起者
「Main」測試群組可顯示連結下列啟動者及其導致事件的箭頭:
- 撤銷樣式或版面配置 ->重新計算樣式或版面配置
- 要求動畫頁框 ->已觸發動畫頁框
- 要求閒置回呼 ->火災閒置回呼
- 安裝計時器 ->已觸發計時器
- 建立 WebSocket ->Send... 以及 Receive WebSocket 握手或 Destroy WebSocket
如要查看箭頭,請在火焰圖中找出啟動者或造成事件。
選取後,「摘要」分頁會顯示發起人連結的「發起者」連結,以及因事件導致的「發起者」連結。按一下這些事件,即可在對應的事件之間切換。
在火焰圖中隱藏函式及其子項
如要整理「Main」執行緒中的火焰圖,您可以隱藏所選函式或其子項:
在「Main」測試群組中,在函式上按一下滑鼠右鍵,然後選擇下列其中一個選項或按下對應的快速鍵:
- 隱藏函式 (
H
) - 隱藏子項 (
C
) - 隱藏重複子項 (
R
) - 重設子項 (
U
) - 重設追蹤記錄 (
T
) - 將指令碼新增至忽略清單 (
I
)
含有隱藏子項的函式名稱旁邊會顯示 arrow_drop_down 下拉式選單按鈕。
- 隱藏函式 (
如要查看隱藏的子項數量,請將滑鼠遊標懸停在 arrow_drop_down 下拉式選單按鈕上。
如要重設含有隱藏子項或整個火焰圖的函式,請選取該函式,然後按下
U
,或在任一函式上按一下滑鼠右鍵,然後點選「Reset trace」。
忽略火焰圖中的腳本
如要將指令碼加入忽略清單,請在圖表中的指令碼上按一下滑鼠右鍵,然後選取「將指令碼加入忽略清單」。
圖表會收合已忽略的指令碼,將其標示為「忽略清單」,並將這些指令碼新增至「設定」中的「設定」>「自訂排除」規則。忽略清單。系統會儲存忽略的指令碼,直到您從追蹤記錄或自訂排除規則中移除為止。
在表格中查看活動
記錄網頁後,您不需要單單仰賴「主要」追蹤來分析活動。 開發人員工具也提供三個表格檢視畫面,可用於分析活動。每種資料檢視 活動的觀點:
- 如要查看造成最多工作的根活動,請使用「Call Tree」。 分頁。
- 如要查看直接花最多時間的活動,請使用 「由下而上」分頁。
- 如要按照記錄期間發生的順序查看活動,請使用 「Event Log」(事件記錄) 分頁標籤。
為了讓您更快找到所需內容,三個分頁的「篩選器」列旁都會顯示進階篩選按鈕:
- match_case 大小寫相符。
- regular_expression 規則運算式。
- match_word 比對完整字。
「Performance」面板的每個表格檢視畫面都會顯示活動 (例如函式呼叫) 的連結。 為協助您偵錯,開發人員工具會在來源檔案中尋找對應的函式宣告。 此外,如果有適當的來源對應並啟用,開發人員工具就會自動尋找原始檔案。
按一下連結,即可在「Sources」面板中開啟來源檔案。
根活動
以下說明「呼叫樹狀結構」分頁中提及的根活動概念。 「Bottom-Up」分頁和「Event Log」部分。
根活動是指會讓瀏覽器執行某些工作。舉例來說,假設您點選
網頁中,瀏覽器會觸發 Event
活動做為根活動。那 Event
可能會導致處理常式
適合執行的版本
在「Main」軌的火焰圖中,根活動會顯示在圖表頂端。在「呼叫」中, 樹狀結構和事件記錄標籤,根活動是頂層項目。
如需根活動範例,請參閱「Call Tree」分頁。
「Call Tree」分頁
使用「Call Tree」分頁查看哪些根活動造成最多工作。
「Call Tree」分頁只會顯示所選部分錄音期間的活動。詳情請見 選取一段錄製內容,瞭解如何選取片段。
在這個範例中,「Activity」欄的頂層項目包括 Event
、Paint
和
Composite Layers
是根活動。巢狀結構代表呼叫堆疊。於
在本例中,Event
造成 Function Call
,導致 button.addEventListener
,進而導致 b
。
依此類推
「自我時間」代表直接用於該活動的時間。「Total Time」(總時間) 代表 使用者從事該活動或其所有子項所花費的時間。
按一下「自我時間」、「總時間」或「活動」,即可按照該欄排序表格。
使用「篩選器」方塊,即可按照活動名稱篩選事件。
「分組」選單的預設設定是「不分組」。使用「群組」選單排序 模型會根據不同條件傳回結果
按一下「顯示最重堆疊」
在「Activity」資料表右側顯示另一個資料表。按一下活動即可填入
「Heaviest Stack」表格。「Heaviest Stack」表格會顯示所選項目的子項
執行活動的所需時間最長。
「由下而上」分頁
使用「由下往上」分頁查看在匯總資料中直接佔用最多時間的活動。
「Bottom-Up」分頁只會顯示所選錄製部分中的活動。詳情請見 選取一段錄製內容,瞭解如何選取片段。
在這個例子的「Main」軌跡火焰圖中,您可以看到幾乎所有
執行對 wait()
的三次呼叫所花費的時間。因此,根據
「由下而上」分頁為 wait
。在火焰圖中,
對 wait
的呼叫,其實是數千個 Minor GC
呼叫。因此,在
「由下而上」分頁,下一個最昂貴的活動為 Minor GC
。
「Self Time」資料欄代表直接在該活動中花費的匯總時間, 傳回。
「總時間」欄代表該活動或其任何子項所花費的匯總時間。
事件記錄分頁
使用「事件記錄」分頁,即可按照活動期間發生的順序查看活動 錄製。
「Event Log」(事件記錄) 分頁只會顯示記錄中所選部分的活動,詳情請見 選取一段錄製內容,瞭解如何選取片段。
「開始時間」欄代表該活動開始的時間點 (相對於開始時間)
錄音片段本例中所選項目的 1573.0 ms
開始時間
表示活動開始錄製後 1573 毫秒。
「Self Time」資料欄代表直接用於該活動的時間。
「總時間」欄代表直接在該活動或其任何一項活動中花費的時間 。
按一下「開始時間」、「自我時間」或「總時間」,即可按照該欄排序表格。
使用「篩選器」方塊,按照名稱篩選活動。
您可以使用「時間長度」選單篩除時間短於 1 毫秒或 15 毫秒的活動。預設 「時間長度」選單會設為「全部」,表示顯示所有活動。
停用「載入」、「指令碼」、「轉譯」或「繪圖」核取方塊,即可全部篩除 和這些類別的活動
查看時間
在「時間」軌跡上,查看重要標記,例如:
- 首次繪製 (FP)
- 首次顯示內容所需時間 (FCP)
- 最大內容繪製 (LCP)
- DOMContentLoaded 事件 (DCL)
- Onload 事件 (L)
- 您的自訂
performance.mark()
呼叫。附有工具提示的個別標記會在 813.44 毫秒下方顯示,並標示為「開始執行 JavaScript」。 - 您的自訂
performance.measure()
呼叫。下方為黃色跨度,標示為「互動速度緩慢」。
選取標記即可在「Summary」分頁中查看詳細資料,包括時間戳記、總時間、自身時間和 detail
物件。
查看互動
查看「互動」追蹤中的使用者互動,追蹤潛在的回應問題。
如要查看互動資料,請按照下列步驟操作:
在本例中,「互動」追蹤會顯示「指標」互動。互動方式下微小,代表輸入和簡報在處理期間發生延遲。將滑鼠遊標懸停在互動上,即可查看工具提示,其中包含輸入延遲時間、處理時間和簡報延遲。
此外,「互動」追蹤畫面也會針對「摘要」分頁中超過 200 毫秒的互動情形,以及遊標懸停在工具提示中的工具提示,顯示「與下一個顯示項目互動 (INP)」警告:
「互動」軌跡會在右上角以紅色三角形標示互動,表示時間超過 200 毫秒。
查看 GPU 活動
在「GPU」區段中查看 GPU 活動。
查看光柵活動
在「Thread Pool」部分中查看光柵活動。
分析每秒影格數 (FPS)
開發人員工具提供多種每秒分析影格數的方法:
- 您可以在「Frames」(頁框) 部分查看特定影格所需的時間。
- 使用 FPS meter 在頁面執行時即時預估每秒影格數。請參閱檢視每秒影格數 即時測量每秒影格數
「Frames」區段
影格部分會顯示特定影格的確切所需時間。
將滑鼠遊標懸停在框架上,即可查看工具提示,瞭解詳細資訊。
這個範例顯示將遊標懸停在框架上時會顯示工具提示。
「Frames」區段可顯示四種類型的影格:
- 閒置框架 (白色)。無變更。
- 頁框 (綠色):可如預期及及時轉譯。
- 部分呈現的影格 (黃色搭配稀疏的寬虛線圖案):Chrome 已盡力即時轉譯至少部分視覺更新,舉例來說,如果轉譯器程序的主執行緒 (畫布動畫) 的執行速度遲交,但合成器執行緒 (捲動) 就是及時。
- 捨棄的外框 (以密集實線圖案表示)。Chrome 無法在合理的時間內顯示頁框。
當你將遊標懸停在部分呈現的影格上時,系統就會顯示工具提示。
按一下框架,即可在「Summary」分頁中查看頁框的詳細資訊。DevTools 會顯示所選頁框的藍色外框
查看網路要求
展開「聯播網」部分,查看效能記錄期間發生的網路要求的刊登序列。
在「網路」測試群組名稱旁邊,會顯示以不同顏色標示的要求類型圖例。
算繪封鎖要求在右上角標有紅色三角形,
將滑鼠遊標懸停在要求上,即可查看工具提示,包括:
- 要求的網址,以及執行該要求所需的總時間。
- 優先順序或優先順序變更,例如
Medium -> High
。 - 要求是否為
Render blocking
。 - 要求時間的細目,稍後說明。
點按要求後,「Network」追蹤會從發起者繪製一個箭頭到該要求。
此外,「成效」面板會顯示「摘要」分頁,提供有關請求的詳細資訊,包括但不限於「初始優先順序」和「優先順序」欄位。如果值不同,則要求的擷取優先順序在記錄期間已變更。詳情請參閱使用 Fetch Priority API 改善資源的載入方式。
「Summary」分頁也會顯示要求時間的詳細資料。
www.google.com
的要求會以左側線條 (|–
)、中間的長條表示,中間有一個深色部分,右側是淺色部分,右側是一行 (–|
)。
你可以在「聯播網」分頁中查看其他時間細目。在「網路」測試群組或「摘要」分頁中的要求上按一下滑鼠右鍵,然後按一下「在網路面板中顯示」。開發人員工具會將您導向「網路」面板,然後選取對應的要求。開啟應用程式「時間」分頁。
這兩種細目資料之間的對應關係如下:
- 左線 (
|–
) 是Connection start
事件群組的所有項目 (含頭尾)。換句話說,就是Request Sent
之前的所有內容。 - 長條的光部分是
Request sent
和Waiting for server response
。 - 長條的深色部分為
Content download
。 - 右行 (
–|
) 是等待主執行緒所花費的時間。網路 >「時間」分頁不會顯示。
查看記憶體指標
勾選「Memory」核取方塊,即可查看上次記錄的記憶體指標。
開發人員工具會在「Summary」分頁上方顯示新的「Memory」圖表。下方也有新圖表 名為 HEAP 的 NET 圖表。HEAP圖表提供的資訊與 JS 相同 記憶體圖表中的堆積線條。
這個範例顯示「Summary」分頁上方的記憶體指標。
圖表中的彩色線條會對應到圖表上方的彩色核取方塊。停用核取方塊: 在圖表中隱藏該類別。
圖表只會顯示所選錄製區域。在先前的範例中,「記憶體」圖表只顯示記錄開始時最多約 1000 毫秒的記憶體用量。
查看某段錄製內容的時間長度
分析「網路」或「主要」等部分時,有時 特定事件所花費的時間按住 Shift 鍵,點選並按住,然後向左或向右拖曳即可選取部分 錄音片段「開發人員工具」會顯示所選部分所需時間。
在本例中,所選部分底部的 488.53ms
時間戳記表示時間長度
取得該憑證的裝置類型
查看螢幕截圖
如要瞭解如何啟用螢幕截圖功能,請參閱「在錄製時擷取螢幕截圖」。
將滑鼠遊標懸停在「時間軸總覽」上,即可查看該網頁在 錄製。「時間軸總覽」是包含 CPU、FPS 和 NET 圖表的部分。
您也可以按一下「影格」部分中的影格來查看螢幕截圖。開發人員工具會顯示 「摘要」分頁中的小型螢幕截圖。
此範例顯示您在「Frames」區段中點選 195.5ms
影格時,在「Summary」分頁中的螢幕截圖。
按一下「Summary」分頁中的縮圖,放大螢幕截圖。
這個範例顯示您在「Summary」分頁中點選縮圖後,放大的螢幕截圖。
檢視畫面圖層資訊
如要查看影格的進階圖層資訊,請按照下列步驟操作:
- 啟用進階繪製檢測。
- 在「Frames」(頁框) 部分中選取頁框。開發人員工具會在 新的「Layers」分頁 (位於「Event Log」分頁旁邊)。
將滑鼠遊標懸停在所需圖層上,即可在圖表中醒目顯示該圖層。
本例是將遊標懸停在 #39 圖層時醒目顯示。
如何移動圖表:
- 按一下「平移模式」圖示
。 沿著 X 軸和 Y 軸移動
- 按一下「旋轉模式」。
旋轉
即可旋轉 沿著 Z 軸延伸
- 按一下「Reset 轉換」
。 即可將圖表重設為原始位置。
查看圖層分析的實際應用:
查看油漆分析器
如何查看油漆活動的進階資訊:
- 啟用進階繪製檢測。
- 在「Main」測試群組中選取「Paint」事件。
透過「轉譯」分頁分析轉譯效能
使用「轉譯」分頁功能,以視覺化方式呈現網頁的轉譯成效。
使用 FPS 計量器即時查看每秒影格數
「影格轉譯統計資料」是顯示在可視區域右上角的重疊元素。可在頁面執行時即時預估每秒影格數。
請參閱「影格轉譯統計資料」。
使用「繪圖」功能即時查看繪畫活動
使用「Paint Flashing」功能即時查看網頁上所有繪製事件。
請參閱「閃光效果」一節。
查看圖層框線的圖層
使用「圖層框線」功能,即可在頁面上查看圖層框線和圖塊。
請參閱圖層框線。
即時找出捲動效能問題
使用「捲動效能問題」,找出頁面中含有與捲動相關的事件監聽器,且可能會影響網頁效能的元素。開發人員工具會概略介紹 藍綠色中可能有潛在問題的元素
請參閱捲動效能問題。