使用效能檢視 (Performance view)
效能頁面可以幫助你診斷應用中的效能問題和 UI 卡頓。該頁面提供了應用中活動的時間和效能訊息。它由幾個工具組成，可幫助你識別應用中性能不佳的原因：
-
Flutter 幀圖表（僅 Flutter 應用）
-
幀分析標籤頁（僅 Flutter 應用）
-
光柵統計標籤頁（僅 Flutter 應用）
-
時間軸事件跟蹤檢視器（所有原生 Dart 應用）
-
高階除錯工具（僅 Flutter 應用）
效能檢視還支援匯入和匯出資料快照。更多訊息，請檢視 匯入和匯出 部分。
Flutter 中的幀是什麼？
Flutter 的 UI 設計為每秒渲染 60 幀（fps），或者在支援 120Hz 更新的裝置上為 120 幀。每次渲染稱為一幀。這意味著，大約每 16ms，UI 就會更新以反映動畫或 UI 的其他更改。渲染時間超過 16ms 的幀會導致顯示裝置上的卡頓（抖動）。
Flutter 幀圖表
此圖表包含了應用的幀訊息。圖表中每組條形圖代表每一幀。這些條形圖以顏色區分渲染幀時進行的不同工作： UI 執行緒和光柵執行緒（以前稱為 GPU 執行緒）。
此圖表在時間線上顯示應用的幀訊息。圖表中每組條形圖代表每一幀。從圖表選中一幀，就會更新下面 幀分析 標籤頁或 時間線事件 標籤頁中顯示的資料。（從 DevTools 2.23.1 開始，光柵統計 是一個獨立的功能，沒有每幀的資料）。
在應用程式執行過程中繪製新的幀時，會更新 Flutter 幀圖表。點選圖表右側的暫停按鈕就可以暫停圖表的更新，點選圖表上方的 Flutter frames 按鈕，可以將此圖表摺疊起來，為下面的資料提供更多的觀察空間。
每一組條形圖以顏色區分，突出顯示渲染每一幀時進行的不同工作：來自 UI 執行緒和光柵執行緒（以前稱為 GPU 執行緒）的工作。
UI
UI 執行緒執行 Dart VM 中的 Dart 程式碼。它包括你的應用程式和 Flutter 框架的所有程式碼。當你建立或開啟一個頁面， UI 執行緒會建立一個圖層樹和一個輕量級的與裝置無關的繪製指令集，並把圖層樹交給裝置的光柵執行緒進行渲染。 不要 阻塞這個執行緒。
光柵執行緒 (Raster)
光柵執行緒（也就是我們之前知道的 GPU 執行緒）執行 Flutter 引擎中圖形相關的程式碼。這個執行緒透過與 GPU (圖形處理單元) 通訊，獲取圖形樹並顯示它。你不能直接訪問光柵執行緒或它的資料，但如果這個執行緒較慢，那它肯定是由你的 Dart 程式碼引起的。圖形化函式庫 Skia 執行在這個執行緒上。 Impeller（目前處於預覽階段）也將執行在這個執行緒上。
有時候一個頁面的圖形層樹比較容易建立但光柵執行緒的渲染卻比較昂貴。在這種情形下，你需要找出導致渲染變慢的程式碼。為 GPU 設定特定多種型別的 workload 是相當困難的。在一些特定的情形下，多個物件的透明度重疊、剪下或陰影，有可能會導致不必要的 saveLayer() 的呼叫。
更多詳細訊息，請檢視文件 定位 GPU 圖表中的問題。
卡頓 (Jank)
幀渲染圖表使用紅色圖層顯示幀延時。如果一幀的渲染時間超過 16ms，則會被認為此幀是延時的，為了達到幀渲染頻率到 60 FPS (每秒幀數)，每一幀的渲染時間必須等於或少於 16 ms。如果沒有達到這個目標，你會發現 UI 不流暢或丟幀。
更多關於效能分析訊息，請檢視文件：Flutter 效能分析。
著色器渲染
在 Flutter 應用中，著色器會在初次使用時發生渲染。參與了著色器編譯的建立幀已標記為深紅色：
想要瞭解更多關於如何減少著色器快取卡頓的內容，閱讀 在行動端減少著色器編譯卡頓。
幀分析標籤頁
從上面的 Flutter 幀圖表中選擇一個延時的幀（紅色），會在幀分析標籤頁中顯示除錯提示。這些提示可以幫助你診斷應用中的卡頓，並通知你任何昂貴的操作，我們檢測到這些操作可能會導致幀延時。
光柵統計標籤頁
如果幀的卡頓來自光柵執行緒，這個工具也許能夠幫助你診斷效能緩慢的原因。生成光柵統計的步驟：
-
在應用程式中導向到你看見光柵執行緒卡頓的畫面。
-
點選 Take Snapshot 生成快照。
-
檢視不同圖層和它們各自的渲染時間。
如果你看到一個圖層特別耗時，請找到應用程式中產生這個圖層的 Dart 程式碼並一步調查原因。你可以對程式碼進行修改、熱過載和生成新的快照，看看圖層的效能是否因你的修改而得到改善。
時間線事件表
時間線事件圖表顯示了應用程式的所有事件追蹤。
Flutter 底層框架在建立幀、繪製場景和跟蹤其他活動（如 HTTP 請求時間和垃圾回收）時，會發出時間線事件。這些事件會在時間線中顯示出來。你也可以使用 dart:developer Timeline 和 TimelineTask API 傳送你自己的時間線事件。
關於導向和使用跟蹤檢視器的幫助，請點選時間線事件標籤欄右上方的 ? 按鈕。要使用應用程式中的新事件，請單擊重新整理按鈕（也位於頁籤的右上角）。
高階除錯工具
增強的追蹤選項
想要在時間線事件圖表裡檢視更詳細的追蹤內容，請使用增強的追蹤下拉控制元件裡的選項：
你可以重複操作你想要追蹤的行為來檢視新的時間線事件，操作後可以在時間線中選擇一個建立幀進行檢視。
追蹤 widget 的建立
想要在時間線中檢視 build() 方法的事件，啟用 Track Widget Builds 選項，時間線中將出現 widget 對應名稱的事件。
Watch this video for an example of tracking widget builds
追蹤佈局
想要在時間線中檢視 RenderObject 佈局建立的事件，啟用 Track Layouts 選項：
Watch this video for an example of tracking layouts
追蹤繪製
想要在時間線中檢視 RenderObject 的繪製事件，啟用 Track Paints 選項：
Watch this video for an example of tracking paints
更多除錯選項
想要診斷渲染圖層相關的問題，請先關閉渲染層。下述的選項將會預設啟動。
想要檢視你的應用的效能影響，請嘗試以相同的操作重現效能問題。在渲染層關閉的情況下，於建立幀圖表裡選擇一個新的建立幀，檢視它的時間線細節。如果光柵執行緒的時間消耗有顯著降低，那麼你停用的效果的濫用可能是導致卡頓的主要原因。
渲染裁剪的圖層
停用該選項來檢查已使用的裁剪圖層是否影響了效能。如果停用後效能有顯著提升，請嘗試減少你的應用中裁剪效果的使用。
渲染透明度圖層
停用該選項來檢查已使用的透明度圖層是否影響了效能。如果停用後效能有顯著提升，請嘗試減少你的應用中透明度效果的使用。
渲染物理形狀圖層
停用該選項來檢查已使用的物理形狀圖層是否影響了效能，例如陰影和背景特效。如果停用後效能有顯著提升，請嘗試減少你的應用中物理效果的使用。
匯入匯出
DevTools 支援匯入和匯出時間線快照。單擊 export 按鈕 (幀渲染圖表右上角) 下載當前時間線的快照。要匯入時間線快照，可以從任何頁面拖放快照到 DevTools。提示：DevTools 僅支援匯入 DevTools 匯出的源檔案。
其他資源
想要學習如何使用 DevTools 監控應用的效能和檢測卡頓，可以閱讀 效能檢視教程。