本頁面由 Cloud Translation API 翻譯而成。

效能功能參考資料

Kayce Basques

Sofia Emelianova

本頁是 Chrome 開發人員工具功能與分析效能相關的完整參考資料。

如需使用 Chrome 開發人員工具分析頁面效能的引導式教學課程，請參閱開始使用分析執行階段效能一文。

記錄效能

您可以記錄執行階段或載入效能。

記錄執行階段效能

當您想要分析網頁在執行時的效能，而非與載入時的效能一樣，請記錄執行階段效能。

前往要分析的頁面。
按一下開發人員工具中的「效能」分頁標籤。
按一下「Record」圖示。
與頁面互動。開發人員工具會記錄因互動而產生的所有網頁活動。
再按一下「Record」，或按一下「Stop」即可停止錄製。

記錄負載效能

當您想要分析網頁載入時 (而非執行中) 的效能時，請記錄載入效能。

前往要分析的頁面。
開啟開發人員工具的「效能」面板。
按一下「Start profiling and 重新載入 page」。開發人員工具會先前往 about:blank，清除剩餘的螢幕截圖和追蹤記錄。接著，開發人員工具會在頁面重新載入時記錄成效指標，並在載入完成後自動停止記錄幾秒鐘。

開發人員工具會自動放大大部分活動產生的錄製內容部分。

載入網頁的記錄。

在本例中，「成效」面板會顯示網頁載入期間的活動。

在錄製時擷取螢幕截圖

勾選「螢幕截圖」核取方塊，即可在錄製時擷取每個影格的螢幕截圖。

「螢幕截圖」核取方塊。

請參閱「查看螢幕截圖」，瞭解如何與螢幕截圖互動。

在錄製時強制執行垃圾收集

記錄頁面時，按一下「Collect garbage」堆積即可強制進行垃圾收集。

收集垃圾。

顯示錄製設定

按一下「Capture settings」圖示，針對開發人員工具擷取效能記錄的方式，顯示更多相關設定。

擷取設定部分。

停用 JavaScript 範例

根據預設，記錄的「Main」軌會顯示在記錄期間呼叫的 JavaScript 函式詳細呼叫堆疊。如何停用這些呼叫堆疊：

開啟「擷取設定」選單。請參閱「顯示錄製設定」。
啟用「停用 JavaScript 範例」核取方塊。
錄製網頁內容。

以下螢幕截圖顯示停用和啟用 JavaScript 範例之間的差異。取樣功能停用時，記錄的「Main」軌跡會比較短，因為其中會忽略所有 JavaScript 呼叫堆疊。

停用 JS 範例時的記錄範例。

這個範例顯示了已停用 JS 範例的記錄。

啟用 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」分頁只會顯示錄音中所選部分的活動。如要瞭解如何選取部分，請參閱「選取一部分的記錄」一節。

「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」分頁中查看詳細資料，請選取標記。如要查看標記的時間戳記，請將遊標懸停在「時間」軌道上。

查看互動

查看「互動」測試群組中的使用者互動情形，追蹤潛在的回應問題。

如要查看互動，請按照下列步驟操作：

開啟開發人員工具 (例如這個示範頁面)。
開啟「Performance」面板並開始錄製。
按一下元素 (咖啡) 並停止記錄。
在時間軸中找出「互動」軌跡。

「互動」追蹤。

在這個例子中，「互動」測試群組會顯示「指標」的互動，互動時會出現雜訊手勢，表示在處理時間範圍內的輸入和呈現延遲。將滑鼠遊標懸停在互動上，即可查看包含輸入延遲、處理時間和顯示延遲的工具提示。

「互動」軌也會在「摘要」分頁中，針對超過 200 毫秒的互動顯示與下一個顯示畫面互動 (INP) 警告，並在遊標懸停時顯示工具提示：

INP 警告。

「互動」軌會在右上角顯示以 200 毫秒為單位的互動行為，並在互動期間顯示紅色三角形。

查看 GPU 活動

在「GPU」區段查看 GPU 活動。

GPU 區段。

查看光柵活動

在「光柵」部分查看光柵活動。

光柵區段。

分析每秒影格數 (FPS)

開發人員工具提供多種每秒分析影格數的方式：

使用「Frames」(頁框) 部分即可查看特定影格花費的時間。
使用 FPS meter 在頁面執行時預估每秒影格數。請參閱「使用 FPS 計量器即時查看每秒影格數」一節。

「Frames」區段

「Frames」部分會顯示特定影格花費的確切時間。

將滑鼠遊標懸停在框架上，即可查看含有詳細資訊的工具提示。

將滑鼠遊標懸停在影格上。

本例會在滑鼠遊標懸停在影格上時顯示工具提示。

「Frames」部分可顯示四種影格：

閒置影格 (白色)：無變更。
Frame (綠色)：已正常且及時轉譯。
部分呈現的頁框 (黃色搭配稀疏寬虛線模式)。Chrome 會即時至少轉譯一些視覺更新。舉例來說，如果轉譯器程序的主執行緒 (畫布動畫) 工作延遲，但合成器執行緒 (捲動) 是遲到的。
捨棄的影格 (以稠密實線模式的紅色)。Chrome 無法在合理的時間內轉譯影格。

將滑鼠遊標懸停在部分呈現的影格上。