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

效能功能參考資料

Kayce Basques

Sofia Emelianova

本頁將完整介紹與分析效能相關的 Chrome 開發人員工具功能。

請參閱開始使用分析執行階段效能，透過導覽教學課程瞭解如何分析顯示效能

記錄效能

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

記錄執行階段效能

記錄執行階段效能，以便在網頁運作期間分析效能，例如而非載入內容

前往要分析的頁面。
按一下開發人員工具中的「效能」分頁標籤。
按一下「Record」。
與頁面互動。開發人員工具會記錄所有網頁活動。互動情形
再次按一下「Record」，或點選「Stop」來停止錄影。

記錄負載效能

在網頁載入期間分析載入效能時 (例如而不是跑步

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

開發人員工具會自動放大記錄中大多數活動發生的位置。

網頁載入記錄。

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

在錄製時擷取螢幕截圖

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

「螢幕截圖」核取方塊。

如要瞭解如何使用螢幕截圖，請參閱「查看螢幕截圖」。

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

錄製網頁時，按一下「收集垃圾」 mop 強制執行垃圾收集。

收集垃圾。

顯示錄製設定

按一下「擷取設定」到提供更多與開發人員工具擷取效能記錄相關的設定。

擷取設定部分。

停用 JavaScript 範例

根據預設，記錄的「主要」軌跡會顯示詳細的 JavaScript 呼叫堆疊所呼叫的函式。如何停用這些呼叫堆疊：

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

以下螢幕截圖顯示停用和啟用 JavaScript 範例的差異。停用取樣時，主要音軌的長度會短很多，因為系統會省略所有記錄 JavaScript 呼叫堆疊

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

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

啟用 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」分頁只會顯示所選部分錄音期間的活動。詳情請見選取一段錄製內容，瞭解如何選取片段。

「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() 呼叫。下方為黃色跨度，標示為「互動速度緩慢」。

Timemings 軌跡中的標記。

選取標記即可在「Summary」分頁中查看詳細資料，包括時間戳記、總時間、自身時間和 detail 物件。

查看互動

查看「互動」追蹤中的使用者互動，追蹤潛在的回應問題。

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

開啟開發人員工具 (例如這個示範頁面)。
開啟「效能」面板，然後開始錄製。
點選元素 (咖啡) 並停止記錄。
找出時間軸中的「互動」軌跡。

「互動」追蹤。

在本例中，「互動」追蹤會顯示「指標」互動。互動方式下微小，代表輸入和簡報在處理期間發生延遲。將滑鼠遊標懸停在互動上，即可查看工具提示，其中包含輸入延遲時間、處理時間和簡報延遲。

此外，「互動」追蹤畫面也會針對「摘要」分頁中超過 200 毫秒的互動情形，以及遊標懸停在工具提示中的工具提示，顯示「與下一個顯示項目互動 (INP)」警告：

INP 警告。

「互動」軌跡會在右上角以紅色三角形標示互動，表示時間超過 200 毫秒。

查看 GPU 活動

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

GPU 部分。

查看光柵活動

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

「執行緒集區」中的光柵活動專區。

分析每秒影格數 (FPS)

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

您可以在「Frames」(頁框) 部分查看特定影格所需的時間。
使用 FPS meter 在頁面執行時即時預估每秒影格數。請參閱檢視每秒影格數即時測量每秒影格數

「Frames」區段

影格部分會顯示特定影格的確切所需時間。

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

將滑鼠遊標懸停在頁框上。

這個範例顯示將遊標懸停在框架上時會顯示工具提示。

「Frames」區段可顯示四種類型的影格：

閒置框架 (白色)。無變更。
頁框 (綠色)：可如預期及及時轉譯。
部分呈現的影格 (黃色搭配稀疏的寬虛線圖案)：Chrome 已盡力即時轉譯至少部分視覺更新，舉例來說，如果轉譯器程序的主執行緒 (畫布動畫) 的執行速度遲交，但合成器執行緒 (捲動) 就是及時。
捨棄的外框 (以密集實線圖案表示)。Chrome 無法在合理的時間內顯示頁框。

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