使用效能（Performance）檢視

效能頁面可以幫助您診斷應用中的效能問題和 UI 卡頓。此頁面提供應用活動的時間和效能資訊。它包含多種工具，可幫助您識別導致應用效能不佳的原因。

• Flutter 幀圖表（僅限 Flutter 應用）
• 幀分析標籤頁（僅限 Flutter 應用）
• 時間軸事件追蹤檢視器（所有原生 Dart 應用）
• 高階除錯工具（僅限 Flutter 應用）

效能檢視還支援匯入和匯出資料快照。有關更多資訊，請檢視 匯入與匯出 部分。

Flutter 旨在以每秒 60 幀（fps）的速率渲染 UI，在支援 120Hz 更新的裝置上則為 120 fps。每一次渲染被稱為一幀。這意味著大約每 16 毫秒，UI 就會更新以反映動畫或其他 UI 變化。渲染時間超過 16 毫秒的幀會在顯示裝置上造成卡頓（畫面不連貫）。

此圖表包含您應用的 Flutter 幀資訊。圖表中的每組條形代表一個 Flutter 幀。條形透過顏色編碼，以突出顯示渲染 Flutter 幀時發生的各部分工作：來自 UI 執行緒的工作和來自光柵執行緒的工作。

此圖表包含您應用的 Flutter 幀時序資訊。圖表中的每對條形代表一個 Flutter 幀。從該圖表中選擇一幀會更新下方 幀分析 標籤頁或 時間軸事件 標籤頁中顯示的資料。

Flutter 幀圖表會在應用繪製新幀時更新。要暫停圖表更新，請點選圖表右側的暫停按鈕。透過點選圖表上方的 Flutter 幀 按鈕，可以摺疊此圖表，從而為下方資料提供更多檢視空間。

代表每個 Flutter 幀的一對條形透過顏色編碼，以突出顯示渲染 Flutter 幀時發生的各部分工作：來自 UI 執行緒的工作和來自光柵執行緒的工作。

UI 執行緒在 Dart VM 中執行 Dart 程式碼。這包括來自您的應用程式碼以及 Flutter 框架的程式碼。當應用建立並顯示一個場景時，UI 執行緒會建立一個層樹（layer tree），這是一個包含與裝置無關的繪製命令的輕量級物件，並將該層樹傳送給光柵執行緒，以便在裝置上進行渲染。請不要阻塞此執行緒。

光柵執行緒執行來自 Flutter 引擎的圖形程式碼。該執行緒獲取層樹並透過與 GPU（圖形處理器）通訊來顯示它。您無法直接訪問光柵執行緒或其資料，但如果此執行緒執行緩慢，則是由於您在 Dart 程式碼中所做的事情引起的。圖形庫 Skia 執行在該執行緒上。Impeller 也使用此執行緒。

有時，一個場景生成的層樹很容易構建，但在光柵執行緒上渲染卻很昂貴。在這種情況下，您需要找出程式碼中導致渲染程式碼變慢的原因。特定型別的工作負載對 GPU 來說更具挑戰性。它們可能涉及不必要的 saveLayer() 呼叫、多個物件的透明度相交，以及特定情況下的裁切（clips）或陰影（shadows）。

有關效能分析的更多資訊，請檢視 識別 GPU 圖表中的問題。

幀渲染圖表使用紅色疊加層顯示卡頓。如果一幀完成時間超過約 16 毫秒（對於 60 FPS 裝置），則該幀被視為卡頓。要實現 60 FPS（每秒幀數）的幀渲染率，每一幀必須在約 16 毫秒或更短時間內完成渲染。當未達到此目標時，您可能會體驗到 UI 卡頓或掉幀。

有關如何分析應用效能的更多資訊，請檢視 Flutter 效能分析。

著色器編譯發生在其在 Flutter 應用中首次使用某個著色器時。執行著色器編譯的幀以深紅色標記。

有關如何減少著色器編譯卡頓的更多資訊，請檢視 減少移動端上的著色器編譯卡頓。

從上方的 Flutter 幀圖表中選擇一個卡頓的幀（緩慢、顯示為紅色）會顯示“幀分析”標籤頁中的除錯提示。這些提示可幫助您診斷應用中的卡頓，並告知您檢測到的可能導致幀時間過長的任何昂貴操作。

時間軸事件圖表顯示來自您應用的所有事件追蹤。Flutter 框架在構建幀、繪製場景以及追蹤其他活動（如 HTTP 請求時序和垃圾回收）時會發出時間軸事件。這些事件會出現在此時間軸中。您還可以使用 dart:developer Timeline 和 TimelineTask API 傳送您自己的時間軸事件。

如需有關導航和使用追蹤檢視器的幫助，請點選時間軸事件標籤欄右上角的 ? 按鈕。要使用來自應用的新事件重新整理時間軸，請點選重新整理按鈕（同樣位於標籤頁控制元件的右上角）。

要檢視時間軸事件圖表中更詳細的追蹤，請使用“增強追蹤（enhance tracing）”下拉選單中的選項。

要檢視新的時間軸事件，請在您的應用中重現您想要追蹤的活動，然後選擇一幀以檢查時間軸。

要在時間軸中檢視 build() 方法事件，請啟用 追蹤 Widget 構建（Track Widget Builds） 選項。Widget 的名稱會顯示在時間軸事件中。

觀看此影片瞭解關於追蹤 Widget 構建的示例

要在時間軸中檢視渲染物件佈局事件，請啟用 追蹤佈局（Track Layouts） 選項。

觀看此影片瞭解關於追蹤佈局的示例

要在時間軸中檢視渲染物件繪製事件，請啟用 追蹤繪製（Track Paints） 選項。

觀看此影片瞭解關於追蹤繪製的示例

要診斷與渲染層相關的效能問題，請切換關閉某個渲染層。預設情況下這些選項是開啟的。

要檢視對應用效能的影響，請在您的應用中重現活動。然後，選擇幀圖表中的新幀，在停用相關層的情況下檢查時間軸事件。如果光柵時間顯著減少，則過度使用您停用的效果可能正是導致您應用中出現卡頓的原因。

渲染裁切層（Render Clip layers）

停用此選項以檢查過度使用裁切效果是否影響了效能。如果停用此選項後效能有所提升，請嘗試減少應用中裁切效果的使用。

渲染透明度層（Render Opacity layers）

停用此選項以檢查過度使用透明度效果是否影響了效能。如果停用此選項後效能有所提升，請嘗試減少應用中透明度效果的使用。

渲染物理形狀層（Render Physical Shape layers）

停用此選項以檢查過度使用物理建模效果（如陰影或高度）是否影響了效能。如果停用此選項後效能有所提升，請嘗試減少應用中物理建模效果的使用。

DevTools 支援匯入和匯出效能快照。點選匯出按鈕（幀渲染圖表右上角）可下載效能頁面上當前資料的快照。要匯入效能快照，您可以從任何頁面將快照拖放到 DevTools 中。請注意，DevTools 僅支援匯入最初從 DevTools 匯出的檔案。

要了解如何使用 DevTools 監控應用效能並檢測卡頓，請檢視 效能檢視教程。