本頁將完整介紹與分析效能相關的 Chrome 開發人員工具功能。
請參閱「開始使用分析執行階段效能」一文中的導覽教學課程,瞭解如何使用 Chrome 開發人員工具分析網頁效能。
記錄效能
你可以記錄執行階段或載入效能。
記錄執行階段效能
當您要分析網頁在運作中時的效能 (與載入無關),請記錄執行階段效能。
- 前往要分析的頁面。
- 按一下開發人員工具中的「效能」分頁標籤。
按一下「Record」。
與頁面互動。開發人員工具會記錄因互動而發生的所有頁面活動。
再次按一下「Record」,或點選「Stop」來停止錄影。
記錄負載效能
在網頁載入時,記錄載入效能 (與網頁相關效能不同)。
- 前往要分析的頁面。
- 開啟開發人員工具的「Performance」面板。
按一下「Start profiling and restart page」。開發人員工具會先前往
about:blank
,清除任何剩餘的螢幕截圖和追蹤記錄。接著,開發人員工具會在頁面重新載入時記錄成效指標,然後在載入完成後自動停止記錄幾秒鐘。
開發人員工具會自動放大記錄中大多數活動發生的位置。
在本範例中,「成效」面板會顯示網頁載入期間的活動。
在錄製時擷取螢幕截圖
勾選「Screenshots」核取方塊,即可在錄影時擷取每個影格的螢幕截圖。
如要瞭解如何使用螢幕截圖,請參閱「查看螢幕截圖」。
在錄製時強制進行垃圾收集
記錄頁面時,按一下「Collect garbage」即可強制執行垃圾收集。
顯示錄製設定
按一下「Capture settings」圖示 ,顯示更多與開發人員工具擷取效能記錄相關的設定。
停用 JavaScript 範例
根據預設,記錄的「主要」軌跡會顯示記錄期間呼叫的 JavaScript 函式的詳細呼叫堆疊。如何停用這些呼叫堆疊:
- 開啟「擷取設定」圖示 選單。請參閱「顯示錄製設定」。
- 勾選「停用 JavaScript 範例」核取方塊。
- 請錄製網頁的內容。
以下螢幕截圖顯示停用和啟用 JavaScript 範例的差異。停用取樣時,記錄的「Main」軌跡會省略所有 JavaScript 呼叫堆疊,
這個範例顯示錄製的 JS 範例已停用。
這個範例顯示了已啟用 JS 範例的錄影內容。
錄影時節流網路
如要在錄製時節流網路,請按照下列步驟操作:
- 開啟「擷取設定」圖示 選單。請參閱「顯示錄製設定」。
- 將「Network」(網路) 設為所選的節流層級。
在記錄時節流 CPU
如要在記錄時節流 CPU,請按照下列步驟操作:
- 開啟「擷取設定」圖示 選單。請參閱「顯示錄製設定」。
- 將「CPU」設為所選的節流等級。
節流與電腦功能息息相關。舉例來說,2 倍減緩選項會使 CPU 的運作速度比平常慢 2 倍。開發人員工具無法真正模擬行動裝置的 CPU,因為行動裝置的架構與桌上型電腦和筆記型電腦的架構截然不同。
啟用進階繪製檢測功能
如何檢視詳細的繪製檢測:
- 開啟「擷取設定」圖示 選單。請參閱「顯示錄製設定」。
- 勾選「Enable advanced Paint instrumentation」核取方塊。
如要瞭解如何與繪製資訊互動,請參閱「檢視區塊圖層」和「查看繪製分析器」。
模擬硬體並行
如要使用不同數量的處理器核心測試應用程式效能,您可以設定 navigator.hardwareConcurrency
屬性回報的值。有些應用程式會使用這項屬性控制應用程式的平行處理程度,例如控制 Emscripten pthread 集區大小。
如何模擬硬體並行:
- 開啟「擷取設定」圖示 選單。請參閱「顯示錄製設定」。
- 勾選「硬體並行」,然後在輸入方塊中設定核心數量。
開發人員工具會在「Performance」分頁旁邊顯示警告圖示 ,提醒您已啟用硬體並行模擬功能。
如要還原為預設值 10
,請按一下「還原」 按鈕。
儲存記錄
如要儲存錄音檔,請按一下滑鼠右鍵,然後選取「儲存設定檔」。
載入錄音檔
如要載入記錄,請按一下滑鼠右鍵,然後選取「Load Profile」。
清除上一個錄音
建立記錄後,按下「Clear record」 可清除「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」測試群組可顯示連結下列啟動者及其導致事件的箭頭:
- 無效的樣式或版面配置 ->「重新計算樣式」或「版面配置」
- 「Request Animation Frame」->「Animation Frame Fired」
- 「要求閒置回呼」->「Fire 閒置回呼」
- 「Install Timer」->「Timer Fired」
- 依序點選 [建立 WebSocket] -> [Send...] 和 [Receive WebSocket Handshake] 或 [Destroy WebSocket]
如要查看箭頭,請在火焰圖中找出啟動者或造成事件。
選取後,「摘要」分頁會顯示發起人連結的「發起者」連結,以及因事件導致的「發起者」連結。按一下這些事件,即可在對應的事件之間切換。
在火焰圖中隱藏函式及其子項
如要整理「Main」執行緒中的火焰圖,您可以隱藏所選函式或其子項:
在「Main」測試群組中,在函式上按一下滑鼠右鍵,然後選擇下列其中一個選項或按下對應的快速鍵:
- 隱藏函式 (
H
) - 隱藏子項 (
C
) - 隱藏重複子項 (
R
) - 重設子項 (
U
) - 重設追蹤記錄 (
T
) - 將指令碼新增至忽略清單 (
I
)
含有隱藏子項的函式名稱旁邊會顯示 arrow_drop_down 下拉式選單按鈕。
- 隱藏函式 (
如要查看隱藏的子項數量,請將滑鼠遊標懸停在 arrow_drop_down 下拉式選單按鈕上。
如要重設含有隱藏子項或整個火焰圖的函式,請選取該函式,然後按下
U
,或在任一函式上按一下滑鼠右鍵,然後點選「Reset trace」。
忽略火焰圖中的腳本
如要將指令碼加入忽略清單,請在圖表中的指令碼上按一下滑鼠右鍵,然後選取「將指令碼加入忽略清單」。
圖表會收合已忽略的指令碼,將其標示為「忽略清單」,並將這些指令碼新增至「自訂排除清單」中的「設定」>「忽略清單」規則。系統會儲存忽略的指令碼,直到您從追蹤記錄或自訂排除規則中移除為止。
在表格中查看活動
記錄網頁後,您不必單單仰賴「主要」測試群組來分析活動。 開發人員工具也提供三個表格檢視畫面,可用於分析活動。每種檢視畫面都會在活動上以不同角度呈現:
- 如要查看造成最多作業的根活動,請使用「Call Tree」分頁。
- 如要查看直接花費最多時間的活動,請使用「Bottom-Up」分頁。
- 如要按照記錄期間發生的順序查看活動,請使用「Event Log」(事件記錄) 分頁。
為了讓您更快找到所需內容,三個分頁的「篩選器」列旁都會顯示進階篩選按鈕:
- match_case 大小寫相符。
- regular_expression 規則運算式。
- match_word 比對完整字。
「Performance」面板的每個表格檢視畫面都會顯示活動 (例如函式呼叫) 的連結。為協助您偵錯,開發人員工具會在來源檔案中尋找對應的函式宣告。此外,如果有適當的來源對應並啟用,開發人員工具就會自動尋找原始檔案。
按一下連結,即可在「Sources」面板中開啟來源檔案。
根活動
以下針對「Call Tree」分頁、「Bottom-Up」分頁和「Event Log」章節中提到的根活動概念說明。
根活動是指會讓瀏覽器執行某些工作。舉例來說,當您點選頁面時,瀏覽器會觸發 Event
活動做為根活動。這樣 Event
可能會導致處理常式執行。
在「Main」軌的火焰圖中,根活動會顯示在圖表頂端。在「Call Tree」和「Event Log」分頁中,根活動是頂層項目。
如需根活動範例,請參閱「Call Tree」分頁。
「Call Tree」分頁
使用「Call Tree」分頁查看哪些根活動造成最多工作。
「Call Tree」分頁只會顯示所選部分錄音期間的活動。如要瞭解如何選取部分記錄,請參閱「選取一段錄製內容」。
在這個範例中,「Activity」欄 (例如 Event
、Paint
和 Composite Layers
) 的頂層項目是根活動,巢狀結構代表呼叫堆疊。在此範例中,Event
造成 Function Call
,進而導致 button.addEventListener
,進而導致 b
,以此類推。
「自我時間」代表直接用於該活動的時間。「Total Time」(總時間) 代表該活動或其任何子項所花費的時間。
按一下「自我時間」、「總時間」或「活動」,即可按照該欄排序表格。
使用「篩選器」方塊,即可按照活動名稱篩選事件。
「分組」選單的預設設定是「不分組」。使用「分組」選單,根據各種條件排序活動資料表。
按一下「Show Heaviest Stack」,即可顯示「Activity」資料表右側的另一個資料表。按一下活動,在「Heaviest Stack」資料表中填入資料。「Heaviest Stack」表格會顯示所選活動的哪些子項執行時間最長。
「由下而上」分頁
使用「由下往上」分頁查看在匯總資料中直接佔用最多時間的活動。
「Bottom-Up」分頁只會顯示所選錄製部分中的活動。如要瞭解如何選取部分記錄,請參閱「選取一段錄製內容」。
在這個範例的「Main」軌跡火焰圖中,您可以看到幾乎所有時間都花在執行對 wait()
的三個呼叫。因此,「Bottom-Up」分頁中的熱門活動為 wait
。在火焰圖中,wait
呼叫下方的黃色實際上是數千個 Minor GC
呼叫。因此,您可以在「Bottom-Up」分頁中,看到下一個最昂貴的活動為 Minor GC
。
「Self Time」資料欄代表直接在該活動中花費的所有發生時間的匯總時間。
「總時間」欄代表該活動或其任何子項所花費的匯總時間。
事件記錄分頁
使用「Event Log」(事件記錄) 分頁標籤,即可依照記錄期間發生的順序查看活動。
「Event Log」(事件記錄) 分頁只會顯示記錄中所選部分的活動,如要瞭解如何選取部分記錄,請參閱「選取一段錄製內容」。
「Start Time」資料欄代表該活動開始的時間點 (相對於記錄開始的時間)。在這個範例中,所選項目的 1573.0 ms
開始時間表示活動開始的 1573 毫秒。
「Self Time」資料欄代表直接用於該活動的時間。
「Total Time」(總時間) 資料欄代表直接在該活動或其子項中花費的時間。
按一下「開始時間」、「自我時間」或「總時間」,即可按照該欄排序表格。
使用「篩選器」方塊,按照名稱篩選活動。
使用「Duration」選單篩選出時間少於 1 毫秒或 15 毫秒的活動。根據預設,「Duration」選單設為「All」,表示所有活動都會顯示。
停用「Loading」、「Scripting」、「Rendering」或「Painting」核取方塊,篩除這些類別的所有活動。
查看時間
在「時間」軌跡上,查看重要標記,例如:
- 首次繪製 (FP)
- 首次顯示內容所需時間 (FCP)
- 最大內容繪製 (LCP)
- DOMContentLoaded 事件 (DCL)
- Onload 事件 (L)
- 您的自訂
performance.mark()
呼叫。附有工具提示的個別標記會在 813.44 毫秒下方顯示,並標示為「開始執行 JavaScript」。 - 您的自訂
performance.measure()
呼叫。下方為黃色跨度,標示為「互動速度緩慢」。
如要查看更多詳細資料,請在「Summary」(摘要) 分頁中選取標記。如要查看標記的時間戳記,請將遊標懸停在時機軌跡上。
查看互動
查看「互動」追蹤中的使用者互動,追蹤潛在的回應問題。
如要查看互動資料,請按照下列步驟操作:
在本例中,「互動」追蹤會顯示「指標」互動。互動方式下微小,代表輸入和簡報在處理期間發生延遲。將滑鼠遊標懸停在互動上,即可查看工具提示,其中包含輸入延遲時間、處理時間和簡報延遲。
此外,「互動」追蹤畫面也會顯示「摘要」分頁中超過 200 毫秒的互動情形,以及遊標懸停在工具提示中的「互動」事件 (INP) 警告:
「互動」軌跡會在右上角以紅色三角形標示互動,表示時間超過 200 毫秒。
查看 GPU 活動
在「GPU」區段中查看 GPU 活動。
查看光柵活動
在「Thread Pool」部分中查看光柵活動。
分析每秒影格數 (FPS)
開發人員工具提供多種每秒分析影格數的方法:
- 您可以在「Frames」(頁框) 部分查看特定影格所需的時間。
- 使用 FPS meter 在頁面執行時即時預估每秒影格數。請參閱「使用 FPS 計時即時檢視每秒影格數」。
「Frames」區段
影格部分會顯示特定影格的確切所需時間。
將滑鼠遊標懸停在框架上,即可查看工具提示,瞭解詳細資訊。
這個範例顯示將遊標懸停在框架上時會顯示工具提示。
「Frames」區段可顯示四種類型的影格:
- 閒置框架 (白色)。無變更。
- 頁框 (綠色):可如預期及及時轉譯。
- 部分呈現的影格 (黃色搭配稀疏的寬虛線圖案):Chrome 已盡力即時轉譯至少部分視覺更新,舉例來說,如果轉譯器程序的主執行緒 (畫布動畫) 的執行速度遲交,但合成器執行緒 (捲動) 就是及時。
- 捨棄的外框 (以密集實線圖案表示)。Chrome 無法在合理的時間內顯示頁框。
當你將遊標懸停在部分呈現的影格上時,系統就會顯示工具提示。
按一下框架,即可在「Summary」分頁中查看頁框的詳細資訊。開發人員工具會以藍色外框顯示所選影格。
查看網路要求
展開「Network」(網路) 區段,查看記錄期間發生的網路要求的刊登序列。
要求會以不同顏色標示如下:
- HTML:藍色
- CSS:紫色
- JS:黃色
- 圖片:綠色
按一下要求,即可在「摘要」分頁中查看相關資訊。在上述範例中,「Summary」分頁會顯示所選綠色要求的相關資訊。
要求左上角較深的藍色正方形代表要求的優先順序較高。淺藍色正方形表示優先順序較低。在之前的範例中,所選要求的優先順序高,上方的藍色表示優先順序最高。
「摘要」部分包含「初始優先順序」以及 (最終)「優先順序」欄位。如果值不同,則要求的擷取優先順序在記錄期間已變更。詳情請參閱使用 Fetch Priority API 改善資源的載入方式。
在前例中,www.google.com
的要求必須以左側一行表示,中間包含深色部分和淺色部分,右側是一行。接下來的螢幕截圖,在「Network」(網路) 面板的「Timing」(時間) 分頁中顯示相同要求的對應表示法。下列是這兩種表示法之間的對應方式:
- 左側線條包含
Connection Start
事件群組的所有內容 (包含頭尾)。換句話說,Request Sent
之前的所有內容都是不含這個元素。 - 長條的光部分是
Request Sent
和Waiting (TTFB)
。 - 長條的深色部分為
Content Download
。 - 正確的行本質上是等待主執行緒所花費的時間。「Timing」分頁中不會呈現此情況。
這個範例顯示 www.google.com
要求的行列表示法。
這個範例顯示 www.google.com
要求的「Timing」分頁表示法。
查看記憶體指標
勾選「Memory」核取方塊,即可查看上次記錄的記憶體指標。
開發人員工具會在「Summary」分頁上方顯示新的「Memory」圖表。「NET」圖表下方也有一個名為 HEAP 的新圖表。「HEAP」圖表提供的資訊與「記憶體」圖表中的「JS 堆積」線條相同。
這個範例顯示「Summary」分頁上方的記憶體指標。
圖表中的彩色線條會對應到圖表上方的彩色核取方塊。停用核取方塊即可在圖表中隱藏該類別。
圖表只會顯示所選錄製區域。在先前的範例中,「記憶體」圖表只顯示記錄開始時 (間隔約 1000 毫秒) 的記憶體用量。
查看某段錄製內容的時間長度
在分析「網路」或「主要」等區段時,有時您會需要更準確的估計特定事件所花費的時間。按住 Shift 鍵,點選並按住,然後向左或向右拖曳,即可選取錄製片段。「開發人員工具」會顯示所選部分所需時間。
在這個範例中,所選部分底部的 488.53ms
時間戳記代表該部分所用時間。
查看螢幕截圖
如要瞭解如何啟用螢幕截圖功能,請參閱「在錄製時擷取螢幕截圖」。
將遊標懸停在「Timeline Overview」上方,即可查看網頁在錄製當下所呈現的樣貌。「時間軸總覽」是包含 CPU、FPS 和 NET 圖表的部分。
您也可以按一下「影格」部分中的影格來查看螢幕截圖。開發人員工具會在「Summary」分頁中顯示較小的螢幕截圖。
此範例顯示您在「Frames」區段中點選 195.5ms
影格時,在「Summary」分頁中的螢幕截圖。
按一下「Summary」分頁中的縮圖,放大螢幕截圖。
這個範例顯示您在「Summary」分頁中點選縮圖後,放大的螢幕截圖。
檢視畫面圖層資訊
如要查看影格的進階圖層資訊,請按照下列步驟操作:
- 啟用進階繪製檢測。
- 在「Frames」(頁框) 部分中選取頁框。開發人員工具會在「Event Log」(事件記錄) 分頁旁的新的「Layers」分頁中顯示圖層相關資訊。
將滑鼠遊標懸停在所需圖層上,即可在圖表中醒目顯示該圖層。
本例是將遊標懸停在 #39 圖層時醒目顯示。
如何移動圖表:
- 按一下「Pan Mode」圖示 ,沿著 X 和 Y 軸移動。
- 按一下「旋轉模式」圖示 ,即可沿著 Z 軸旋轉。
- 按一下「Reset Transform」將圖表重設為原始位置。
查看圖層分析的實際應用:
查看油漆分析器
如何查看油漆活動的進階資訊:
- 啟用進階繪製檢測。
- 在「Main」測試群組中選取「Paint」事件。
透過「轉譯」分頁分析轉譯效能
使用「轉譯」分頁功能,以視覺化方式呈現網頁的轉譯成效。
使用 FPS 計量器即時查看每秒影格數
「影格轉譯統計資料」是顯示在可視區域右上角的重疊元素。可在頁面執行時即時預估每秒影格數。
請參閱「影格轉譯統計資料」。
使用「繪圖」功能即時查看繪畫活動
使用「Paint Flashing」功能即時查看網頁上所有繪製事件。
請參閱「閃光效果」一節。
查看圖層框線的圖層
使用「圖層框線」功能,即可在頁面上查看圖層框線和圖塊。
請參閱圖層框線。
即時找出捲動效能問題
使用「捲動效能問題」,找出頁面中含有與捲動相關的事件監聽器,且可能會影響網頁效能的元素。開發人員工具會概略列出可能有問題的元素
請參閱捲動效能問題。