本頁是 Chrome 開發人員工具功能與分析效能相關的完整參考資料。
如需使用 Chrome 開發人員工具分析頁面效能的引導式教學課程,請參閱開始使用分析執行階段效能一文。
記錄效能
您可以記錄執行階段或載入效能。
記錄執行階段效能
當您想要分析網頁在執行時的效能,而非與載入時的效能一樣,請記錄執行階段效能。
- 前往要分析的頁面。
- 按一下開發人員工具中的「效能」分頁標籤。
按一下「Record」圖示 。
與頁面互動。開發人員工具會記錄因互動而產生的所有網頁活動。
再按一下「Record」,或按一下「Stop」即可停止錄製。
記錄負載效能
當您想要分析網頁載入時 (而非執行中) 的效能時,請記錄載入效能。
- 前往要分析的頁面。
- 開啟開發人員工具的「效能」面板。
按一下「Start profiling and 重新載入 page」。開發人員工具會先前往
about:blank
,清除剩餘的螢幕截圖和追蹤記錄。接著,開發人員工具會在頁面重新載入時記錄成效指標,並在載入完成後自動停止記錄幾秒鐘。
開發人員工具會自動放大大部分活動產生的錄製內容部分。
在本例中,「成效」面板會顯示網頁載入期間的活動。
在錄製時擷取螢幕截圖
勾選「螢幕截圖」核取方塊,即可在錄製時擷取每個影格的螢幕截圖。
請參閱「查看螢幕截圖」,瞭解如何與螢幕截圖互動。
在錄製時強制執行垃圾收集
記錄頁面時,按一下「Collect garbage」堆積即可強制進行垃圾收集。
顯示錄製設定
按一下「Capture settings」圖示 ,針對開發人員工具擷取效能記錄的方式,顯示更多相關設定。
停用 JavaScript 範例
根據預設,記錄的「Main」軌會顯示在記錄期間呼叫的 JavaScript 函式詳細呼叫堆疊。如何停用這些呼叫堆疊:
- 開啟「擷取設定」選單 。請參閱「顯示錄製設定」。
- 啟用「停用 JavaScript 範例」核取方塊。
- 錄製網頁內容。
以下螢幕截圖顯示停用和啟用 JavaScript 範例之間的差異。取樣功能停用時,記錄的「Main」軌跡會比較短,因為其中會忽略所有 JavaScript 呼叫堆疊。
這個範例顯示了已停用 JS 範例的記錄。
這個範例顯示了已啟用 JS 範例的記錄。
錄製時節流網路
如何在錄影時節流網路:
- 開啟「擷取設定」選單 。請參閱「顯示錄製設定」。
- 將「網路」設為所選的節流等級。
在錄製時節流 CPU
如何在錄製時節流 CPU:
- 開啟「擷取設定」選單 。請參閱「顯示錄製設定」。
- 將「CPU」設為所選的節流等級。
節流與電腦的能力是相對的。舉例來說,2 倍變速選項會使 CPU 運作速度比平常慢 2 倍。開發人員工具無法真正模擬行動裝置的 CPU,因為行動裝置的架構與桌上型電腦和筆記型電腦截然不同。
啟用進階繪製檢測
如要查看詳細的繪製檢測:
- 開啟「擷取設定」選單 。請參閱「顯示錄製設定」。
- 勾選「Enable advanced paint instrumentation」核取方塊。
如要瞭解如何與繪製資訊互動,請參閱「檢視區塊圖層」和「檢視繪製分析器」。
模擬硬體並行
如要使用不同數量的處理器核心來測試應用程式效能,您可以設定 navigator.hardwareConcurrency
屬性回報的值。部分應用程式會使用這個屬性控制應用程式的平行處理程度,例如控制 Emscripten pthread 集區大小。
如何模擬硬體並行:
- 開啟「擷取設定」選單 。請參閱「顯示錄製設定」。
- 勾選「硬體並行」,然後在輸入方塊中設定核心數量。
開發人員工具的「效能」分頁旁會顯示警告圖示 ,提醒您硬體並行模擬功能已啟用。
如要還原為預設值 10
,請按一下「還原」按鈕 。
儲存記錄
如要儲存記錄,請按一下滑鼠右鍵,然後選取「Save Profile」。
載入錄音檔
如要載入記錄,請按一下滑鼠右鍵,然後選取「Load Profile」。
清除先前的記錄
建立記錄後,按下「Clear recording」圖示 ,即可從「Performance」面板清除該記錄。
分析表演記錄
記錄執行階段效能或記錄載入效能後,「Performance」面板會提供大量資料,用於分析剛剛發生的效能。
瀏覽錄製內容
如要仔細檢查效能記錄,您可以選取一段記錄、捲動長火焰圖、放大和縮小,以及使用導覽標記在縮放等級間跳轉。
選取錄音片段
在「Performance」面板的動作列下方和記錄頂端的「Timeline Overview」部分,可以看到「CPU」和「NET」圖表。
如要選取錄音片段,請按住,然後在「時間軸總覽」上向左或向右拖曳。
如何使用鍵盤選取部分:
- 將焦點移至「主要」軌道或任何鄰點。
- 使用 W、A、S、D 鍵,分別放大、向左移動、縮小和向右移動。
如何使用觸控板選取部分:
- 將遊標懸停在「時間軸總覽」部分或任一足跡 (「主要」及其鄰點) 上。
- 用雙指向上滑動可縮小,向左滑動可向左滑動,向下滑動可放大,向右滑動則可向右移動。
建立導覽標記,並在縮放等級之間跳轉
時間軸總覽可讓您連續建立多個巢狀導覽標記、增加縮放等級,然後跳到所選的等級。
如何建立及使用導覽標記:
- 在「時間軸總覽」中,選取錄音內容的部分內容。
- 將遊標懸停在所選部分上,然後按一下「N ms」zoom_in 按鈕。所選項目會展開並填滿時間軸總覽。系統會在「時間軸總覽」頂端開始建立導覽標記鏈結。
- 重複前兩個步驟,建立另一個巢狀導覽標記。只要選取範圍超過 5 毫秒,您就可以繼續建立巢狀導覽標記的巢狀結構。
- 如要跳到所選的縮放等級,請按一下「時間軸總覽」頂端鏈結中的對應導覽標記。
捲動長火焰圖
如要在「Main」(主要) 軌道或其任一鄰點中捲動長火焰圖,請點選並按住任一方向並拖曳,直到畫面顯示您要查看的位置。
搜尋活動
如要在「成效」面板底部開啟搜尋框,請按下:
- macOS:Command + F 鍵
- Windows、Linux:Control + F 鍵
本例在底部的搜尋框中顯示了任何開頭為 E
的活動。
如何循環顯示符合查詢的活動:
- 按一下「expand_less」expand_less「上一頁」或expand_less「expand_more」,按一下「繼續」按鈕。
- 按下 Shift + Enter 鍵選取上一個項目,或按下 Enter 鍵選取下一個項目。
「成效」面板會在搜尋框中針對所選活動顯示工具提示。
如何修改查詢設定:
- 按一下「match_case」match_case,讓查詢區分大小寫。
- 按一下 [規則運算式]regular_expression「規則運算式」,在查詢中使用規則運算式。
如要隱藏搜尋框,請按一下「取消」。
查看主要討論串活動
使用「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」
- 「Request Idle Callback」(要求閒置回呼) ->「Fire Idle Callback」
- [安裝計時器] -> [已觸發計時器]
- 建立 WebSocket ->「傳送...」和「接收 WebSocket 握手」或「刪除 WebSocket」
如要查看箭頭,請在火焰圖中找到並點按一個啟動器。
在表格中查看活動
記錄網頁後,您不必單靠「Main」軌即可分析活動。開發人員工具也提供三個表格檢視畫面,可用於分析活動。每項檢視畫面都會對活動提供不同觀點:
- 如要查看導致大多數工作的根活動,請使用「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
等。
「Self Time」代表直接參與該活動的時間。「總時間」代表該活動或其任何子項花費的時間。
按一下「自拍時間」、「總時間」或「活動」,即可按照該資料欄排序表格內容。
使用「篩選器」方塊,按照活動名稱篩選事件。
根據預設,「分組」選單會設為「不分組」。使用「Grouping」(分組) 選單,即可根據各種條件排序活動表格。
按一下「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」(事件記錄) 分頁中,您可以依照活動記錄期間的順序查看活動。
「事件記錄」分頁只會顯示錄音中所選部分的活動。如要瞭解如何選取部分,請參閱「選取一部分的記錄」一節。
「Start Time」欄代表該活動開始的時間點 (相對於記錄開始)。在本範例中,所選項目的 1573.0 ms
開始時間是指在記錄開始的 1573 毫秒後開始活動。
「自我時間」欄代表直接參與該活動的時間。
「總時間」欄代表直接在該活動或其子項中所花費的時間。
按一下「開始時間」、「自拍時間」或「總時間」,即可按照該資料欄排序表格資料。
使用「篩選器」方塊,依名稱篩選活動。
使用「Duration」選單,即可篩除時間小於 1 毫秒或 15 毫秒的所有活動。「Duration」選單預設為「All」,表示所有活動都會顯示。
停用「Loading」(載入)、「Scripting」(指令碼)、「Rendering」(轉譯) 或「Painting」(繪製) 核取方塊,即可排除這些類別中的所有活動。
查看時間
在「時間」軌道上,查看重要標記,例如:
- 畫面首次顯示所需時間 (FP)
- 首次顯示內容所需時間 (FCP)
- 最大內容繪製 (LCP)
- DOMContentLoaded 事件 (DCL)
- Onload 事件 (L)
- 您的自訂
performance.mark()
呼叫。包含工具提示的個別標記會在 813.44 毫秒下方顯示,標示為「開始執行 JavaScript」。 - 您的自訂
performance.measure()
呼叫。下方顯示黃色的 Span,標示為「慢互動」。
如要在「Summary」分頁中查看詳細資料,請選取標記。如要查看標記的時間戳記,請將遊標懸停在「時間」軌道上。
查看互動
查看「互動」測試群組中的使用者互動情形,追蹤潛在的回應問題。
如要查看互動,請按照下列步驟操作:
在這個例子中,「互動」測試群組會顯示「指標」的互動,互動時會出現雜訊手勢,表示在處理時間範圍內的輸入和呈現延遲。將滑鼠遊標懸停在互動上,即可查看包含輸入延遲、處理時間和顯示延遲的工具提示。
「互動」軌也會在「摘要」分頁中,針對超過 200 毫秒的互動顯示與下一個顯示畫面互動 (INP) 警告,並在遊標懸停時顯示工具提示:
「互動」軌會在右上角顯示以 200 毫秒為單位的互動行為,並在互動期間顯示紅色三角形。
查看 GPU 活動
在「GPU」區段查看 GPU 活動。
查看光柵活動
在「光柵」部分查看光柵活動。
分析每秒影格數 (FPS)
開發人員工具提供多種每秒分析影格數的方式:
- 使用「Frames」(頁框) 部分即可查看特定影格花費的時間。
- 使用 FPS meter 在頁面執行時預估每秒影格數。請參閱「使用 FPS 計量器即時查看每秒影格數」一節。
「Frames」區段
「Frames」部分會顯示特定影格花費的確切時間。
將滑鼠遊標懸停在框架上,即可查看含有詳細資訊的工具提示。
本例會在滑鼠遊標懸停在影格上時顯示工具提示。
「Frames」部分可顯示四種影格:
- 閒置影格 (白色):無變更。
- Frame (綠色):已正常且及時轉譯。
- 部分呈現的頁框 (黃色搭配稀疏寬虛線模式)。Chrome 會即時至少轉譯一些視覺更新。舉例來說,如果轉譯器程序的主執行緒 (畫布動畫) 工作延遲,但合成器執行緒 (捲動) 是遲到的。
- 捨棄的影格 (以稠密實線模式的紅色)。Chrome 無法在合理的時間內轉譯影格。
本例會在您將遊標懸停在部分呈現的影格上時顯示工具提示。
按一下框架,即可在「Summary」分頁中查看有關影格的詳細資訊。開發人員工具會以藍色外框描繪所選影格。
查看網路要求
展開「Network」區段,查看記錄期間發生的網路要求的刊登序列。
要求會以不同顏色標示如下:
- HTML:藍色
- CSS:紫色
- JS:黃色
- 圖片:綠色
按一下要求即可在「摘要」分頁中查看更多資訊。在上述範例中,「Summary」分頁會顯示所選綠色要求的相關資訊。
如果要求左上角顯示深藍色的正方形,表示要求優先順序較高。淺藍色正方形代表優先順序較低。在前述範例中,所選要求的優先順序高,上方藍色的要求的優先順序最高。
「Summary」部分包含「Initial Priority」和 (Final)「Priority」欄位。如果兩者的值不同,系統在記錄期間已變更要求的擷取優先順序。詳情請參閱使用 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 圖表提供的資訊與「Memory」圖中的「JS Heap」線條相同。
這個範例顯示「Summary」分頁上方的記憶體指標。
圖表上的彩色線條對應到圖表上方的彩色核取方塊。停用核取方塊即可在圖表中隱藏該類別。
圖表只會顯示已選取的記錄區域。在上述範例中,「記憶體」圖表只會顯示記錄開始後的記憶體用量,上限是 1000 毫秒左右。
查看一段錄音檔的時間長度
分析「網路」或「主要」等區段時,有時需要更準確地預估某些事件所花費的時間。按住 Shift 鍵,點選並按住不放,然後向左或向右拖曳以選取錄製的一部分。選取項目底部的「開發人員工具」會顯示該部分所需的時間。
在此範例中,所選部分底部的 488.53ms
時間戳記表示該部分花費的時間。
查看螢幕截圖
如要瞭解如何啟用螢幕截圖功能,請參閱「在錄製時擷取螢幕畫面」一文。
將遊標懸停在「Timeline Overview」上,即可查看網頁在錄製當下的呈現方式。「時間軸總覽」是包含 CPU、FPS 與 NET 圖表的區段。
您也可以按一下「Frames」部分中的影格,查看螢幕截圖。開發人員工具會在「Summary」分頁中顯示小型的螢幕截圖。
這個範例顯示您在「Frames」部分中點選 195.5ms
影格時,「Summary」分頁標籤中的 195.5ms
影格螢幕截圖。
按一下「Summary」分頁中的縮圖,即可放大螢幕截圖。
這個範例顯示您在「Summary」分頁中點選縮圖後,放大的螢幕截圖。
查看圖層資訊
如要查看影格的進階圖層資訊:
- 啟用進階繪製檢測功能。
- 在「Frames」部分中選取影格。開發人員工具會在「Event Log」分頁旁的新的「Layers」分頁中顯示圖層相關資訊。
將滑鼠遊標懸停在圖層上,即可在圖表中醒目顯示該圖層。
這個範例顯示您將滑鼠遊標懸停在圖層上時,醒目顯示的圖層 #39。
如何移動圖表:
- 按一下「平移模式」圖示 ,沿著 X 軸和 Y 軸移動。
- 按一下「Rotate Mode」圖示 ,即可沿著 Z 軸旋轉。
- 按一下「Reset Transform」圖示 ,將圖表重設為原始位置。
查看圖層分析的應用實例:
查看油漆分析器
如何查看油漆事件的進階資訊:
- 啟用進階繪製檢測功能。
- 在「Main」軌中,選取「Paint」事件。
使用「轉譯」分頁分析轉譯效能
使用「轉譯」分頁的功能,即可以視覺化方式呈現網頁的轉譯效能。
使用 FPS 計量器即時查看每秒影格數
「影格轉譯統計資料」是顯示在可視區域右上角的疊加層。可在頁面執行時即時估算每秒影格數。
請參閱「影格轉譯統計資料」。
透過「繪圖閃爍」功能即時查看繪畫事件
使用閃光燈,即時查看頁面上所有繪製事件。
請參閱「閃爍閃光燈」。
檢視包含圖層邊界的圖層疊加層
使用「圖層框線」,在頁面上方查看圖層框線和圖塊的疊加層。
請參閱「圖層框線」一文。
即時找出捲動效能問題
您可以利用「捲動效能問題」,找出網頁中包含與捲動相關的事件監聽器,這些元素可能影響網頁效能的元素。開發人員工具會以藍綠色概述潛在的問題元素。
請參閱「捲動效能問題」。