使用效能檢視

效能頁面可以協助您診斷應用程式的效能問題和 UI 延遲。此頁面提供應用程式中活動的計時和效能資訊。它包含多種工具,協助您找出應用程式效能不佳的原因

  • Flutter 畫面圖表(僅限 Flutter 應用程式)
  • 畫面分析索引標籤(僅限 Flutter 應用程式)
  • 光柵統計資料索引標籤(僅限 Flutter 應用程式)
  • 時間軸事件追蹤檢視器(所有原生 Dart 應用程式)
  • 進階偵錯工具(僅限 Flutter 應用程式)

效能檢視也支援匯入和匯出資料快照。如需詳細資訊,請參閱 匯入和匯出 區段。

Flutter 中的畫面是什麼?

Flutter 設計為每秒渲染 60 個畫面(fps),或在支援 120Hz 更新的裝置上渲染 120 個畫面。每個渲染稱為一個畫面。這表示大約每 16 毫秒,UI 會更新以反映動畫或 UI 的其他變更。渲染時間超過 16 毫秒的畫面會導致顯示裝置出現延遲(不流暢的動作)。

Flutter 畫面圖表

此圖表包含應用程式的 Flutter 畫面資訊。圖表中的每個長條組代表一個單一的 Flutter 畫面。這些長條使用顏色編碼來強調在呈現 Flutter 畫面時發生的不同工作部分:使用者介面執行緒的工作和光柵執行緒的工作。

此圖表包含應用程式的 Flutter 畫面計時資訊。圖表中的每一對長條代表一個單一的 Flutter 畫面。從此圖表中選取畫面會更新在 畫面分析 標籤或 時間軸事件 標籤下方顯示的資料。(從 DevTools 2.23.1 開始,光柵統計資料 是沒有每個畫面資料的獨立功能)。

當新的畫面在應用程式中繪製時,Flutter 畫面圖表會更新。若要暫停更新此圖表,請按一下圖表右邊的暫停按鈕。可以摺疊此圖表,以提供更多檢視空間給下方資料,方法是按一下圖表上方的Flutter 畫面按鈕。

Screenshot of a Flutter frames chart

代表每個 Flutter 畫面的一對長條使用顏色編碼來強調在呈現 Flutter 畫面時發生的不同工作部分:使用者介面執行緒的工作和光柵執行緒的工作。

使用者介面

使用者介面執行緒在 Dart VM 中執行 Dart 程式碼。其中包括應用程式和 Flutter 架構的程式碼。當應用程式建立並顯示場景時,使用者介面執行緒會建立一個圖層樹,一個包含與裝置無關的繪製指令的輕量級物件,並將圖層樹傳送至光柵執行緒,以在裝置上呈現。不要 阻擋此執行緒。

光柵

光柵執行緒執行 Flutter Engine 中的圖形程式碼。此執行緒會擷取圖層樹,並透過與 GPU(圖形處理器)溝通來顯示圖層樹。您無法直接存取光柵執行緒或其資料,但如果此執行緒很慢,表示您在 Dart 程式碼中執行了某些動作。圖形函式庫 Skia 會在此執行緒上執行。Impeller 也會使用此執行緒。

有時,場景會產生一個容易建構但光柵執行緒難以呈現的圖層樹。在這種情況下,您需要找出程式碼中導致呈現程式碼變慢的部分。某些特定的工作負載對 GPU 來說比較困難。它們可能涉及不必要的 saveLayer() 呼叫、與多個物件相交的不透明度,以及特定情況下的剪裁或陰影。

如需有關剖析的更多資訊,請參閱 識別 GPU 圖形中的問題

卡頓(慢幀)

幀呈現圖表會以紅色覆蓋層顯示卡頓。如果幀完成時間超過 ~16 毫秒(適用於 60 FPS 裝置),則視為卡頓。若要達到 60 FPS(每秒幀數)的幀呈現率,每個幀都必須在 ~16 毫秒或更短的時間內呈現。如果未達到此目標,您可能會遇到 UI 卡頓或遺失幀。

如需有關如何分析應用程式效能的更多資訊,請參閱 Flutter 效能剖析

Shader 編譯

當您的 Flutter 應用程式中首次使用 shader 時,就會進行 shader 編譯。執行 shader 編譯的畫面會標示為深紅色

Screenshot of shader compilation for a frame

如需瞭解如何減少 shader 編譯延遲的詳細資訊,請參閱 減少行動裝置上的 shader 編譯延遲

畫面分析標籤

從上方的 Flutter 畫面圖表中選取延遲畫面(速度慢,以紅色標示),會在畫面分析標籤中顯示除錯提示。這些提示可協助您診斷應用程式的延遲,並通知您我們偵測到的任何昂貴作業,這些作業可能導致畫面時間變慢。

Screenshot of the frame analysis tab

光柵化統計資料標籤

如果您有延遲的 Flutter 畫面,且光柵化執行緒時間很慢,這個工具可能會協助您診斷效能低落的原因。若要產生光柵化統計資料

  1. 導覽至應用程式中您看到光柵化執行緒延遲的畫面。
  2. 按一下擷取快照
  3. 檢視不同的圖層及其各自的渲染時間。

如果您看到昂貴的圖層,請找出應用程式中產生這個圖層的 Dart 程式碼,並進一步調查。您可以變更您的程式碼、熱重載,並擷取新的快照,以查看您的變更是否改善圖層的效能。

Screenshot of the raster stats tab

時間軸事件標籤

時序事件圖表顯示應用程式中的所有事件追蹤。Flutter 架構會在建構畫面、繪製場景,以及追蹤其他活動(例如 HTTP 要求時間和垃圾收集)時發出時序事件。這些事件會顯示在時序中。您也可以使用 dart:developer TimelineTimelineTask API 來傳送自己的時序事件。

時序事件分頁的螢幕截圖如需瀏覽和使用追蹤檢視器的說明,請按一下時序事件分頁工具列右上角的?按鈕。如要使用應用程式中的新事件更新時序,請按一下更新按鈕(也位於分頁控制項的右上角)。

進階除錯工具

加強追蹤

如要在時序事件圖表中查看更詳細的追蹤,請使用加強追蹤下拉式選單中的選項

Screenshot of enhanced tracing options

如要查看新的時序事件,請在應用程式中重現您有興趣追蹤的活動,然後選擇一個畫面來檢查時序。

追蹤小工具建構

如要在時序中查看 build() 方法事件,請啟用追蹤小工具建構選項。小工具的名稱會顯示在時序事件中。

Screenshot of track widget builds

觀看這段影片,了解追蹤小工具建構的範例

追蹤配置

如要在時序中查看渲染物件配置事件,請啟用追蹤配置選項

Screenshot of track layouts

觀看這段影片,了解追蹤配置的範例

追蹤繪製

如要在時序中查看渲染物件繪製事件,請啟用追蹤繪製選項

Screenshot of track paints

觀看此影片,了解追蹤繪製的範例

更多偵錯選項

若要診斷與呈現圖層相關的效能問題,請切換關閉呈現圖層。這些選項預設為啟用。

若要查看對應用程式效能的影響,請在應用程式中重現活動。然後在畫面圖表中選取新的畫面,以檢查已停用圖層的時間軸事件。如果光柵化時間大幅減少,則您停用的效果過度使用,可能會導致應用程式中出現您看到的卡頓。

呈現剪裁圖層
停用此選項以檢查過度使用剪裁是否會影響效能。如果停用此選項後效能改善,請嘗試減少應用程式中剪裁效果的使用。
呈現不透明度圖層
停用此選項以檢查過度使用不透明度效果是否會影響效能。如果停用此選項後效能改善,請嘗試減少應用程式中不透明度效果的使用。
呈現實體形狀圖層
停用此選項以檢查過度使用實體建模效果是否會影響效能,例如陰影或高度。如果停用此選項後效能改善,請嘗試減少應用程式中實體建模效果的使用。

Screenshot of more debugging options

匯入和匯出

DevTools 支援匯入和匯出效能快照。按一下匯出按鈕(在畫面呈現圖表上方右上角)會下載效能頁面上目前資料的快照。若要匯入效能快照,您可以從任何頁面將快照拖放到 DevTools 中。請注意,DevTools 僅支援匯入最初從 DevTools 匯出的檔案。

其他資源

若要瞭解如何使用 DevTools 來監控應用程式的效能並偵測卡頓,請查看引導式 效能檢視教學