使用 Performance 檢視

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

• Flutter 幀圖表（僅限 Flutter 應用）
• 幀分析選項卡（僅限 Flutter 應用）
• 時間線事件跟蹤檢視器（所有原生 Dart 應用）
• 高階除錯工具（僅限 Flutter 應用）

Performance 檢視還支援匯入和匯出資料快照。有關更多資訊，請參閱匯入和匯出部分。

Flutter 的設計目標是以每秒 60 幀（fps）的速度渲染其 UI，或在能夠進行 120Hz 更新的裝置上以 120 fps 的速度渲染。每一次渲染都稱為一個幀。這意味著 UI 大約每 16 毫秒更新一次，以反映動畫或其他 UI 更改。渲染時間超過 16 毫秒的幀會導致顯示裝置上出現卡頓（不流暢的運動）。

此圖表包含您的應用程式的 Flutter 幀資訊。圖表中的每個條形集代表一個單獨的 Flutter 幀。條形圖採用顏色編碼，以突出顯示渲染 Flutter 幀時發生的各個工作部分：UI 執行緒的工作和柵格執行緒的工作。

此圖表包含您的應用程式的 Flutter 幀計時資訊。圖表中的每對條形代表一個單獨的 Flutter 幀。從此圖表中選擇一個幀會更新下方“幀分析”選項卡或“時間線事件”選項卡中顯示的資料。

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

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

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

柵格執行緒執行 Flutter 引擎的圖形程式碼。此執行緒會獲取圖層樹，並透過與 GPU（圖形處理單元）通訊來顯示它。您無法直接訪問柵格執行緒或其資料，但如果此執行緒速度緩慢，則是因為您在 Dart 程式碼中執行了某些操作。Skia（圖形庫）在此執行緒上執行。Impeller 也使用此執行緒。

有時，一個場景會生成一個易於構建但柵格執行緒渲染成本很高的圖層樹。在這種情況下，您需要找出您的程式碼中導致渲染程式碼緩慢的原因。特定型別的工作負載對 GPU 來說更困難。它們可能涉及不必要的 `saveLayer()` 呼叫、與多個物件的透明度交叉、以及在特定情況下的裁剪或陰影。

有關分析的更多資訊，請參閱識別 GPU 圖表中的問題。

幀渲染圖表會以紅色疊加層顯示卡頓。如果一個幀的完成時間超過約 16 毫秒（對於 60 FPS 裝置），則認為該幀是卡頓的。為了達到 60 FPS（每秒幀數）的幀渲染速率，每個幀必須在約 16 毫秒或更短的時間內渲染完成。當錯過此目標時，您可能會遇到 UI 卡頓或丟幀。

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

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

有關如何減少著色器編譯卡頓的更多資訊，請參閱減少移動裝置上的著色器編譯卡頓。

從上面的 Flutter 幀圖表中選擇一個卡頓幀（繪製緩慢，以紅色著色）會在幀分析選項卡中顯示除錯提示。這些提示有助於診斷您應用中的卡頓，並通知您任何我們檢測到的可能導致幀時間緩慢的耗時操作。

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

要獲得導航和使用跟蹤檢視器的幫助，請單擊時間線事件選項卡欄右上角的“?”按鈕。要使用應用程式的新事件重新整理時間線，請單擊重新整理按鈕（也位於選項卡控制元件的右上角）。

要檢視時間線事件圖表中更詳細的跟蹤資訊，請使用增強跟蹤下拉選單中的選項。

要檢視新的時間線事件，請重現您感興趣的跟蹤活動，然後選擇一個幀進行檢查。

要檢視時間線中的 `build()` 方法事件，請啟用“跟蹤 Widget 構建”選項。Widget 的名稱會顯示在時間線事件中。

觀看此影片以獲取跟蹤 Widget 構建的示例

要檢視時間線中的渲染物件佈局事件，請啟用“跟蹤佈局”選項。

觀看此影片以獲取跟蹤佈局的示例

要檢視時間線中的渲染物件繪製事件，請啟用“跟蹤繪製”選項。

觀看此影片以獲取跟蹤繪製的示例

要診斷與渲染層相關的效能問題，請切換關閉渲染層。這些選項預設啟用。

要檢視對您的應用程式效能的影響，請重現您的應用程式中的活動。然後選擇幀圖中的新幀來檢查停用圖層後的時間線事件。如果柵格時間顯著減少，那麼您停用的效果的過度使用可能導致您在應用程式中看到的卡頓。

渲染裁剪層

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

渲染透明層

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

渲染物理形狀層

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

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

要了解如何使用 DevTools 監控應用的效能並檢測卡頓，請參閱有關 Performance View 的分步教程。