Contents

使用效能檢視 (Performance view)

Contents

基礎的效能概念

效能檢視是什麼?

效能檢視提供了應用活動的時間線以及效能資訊。它由三個部分組成，且每個部分的粒度都更加細。

  • Flutter 火焰圖（僅支援 Flutter 應用）

  • 時間線事件圖

  • CPU 監控

The performance view also supports importing and exporting of data snapshots. For more information, check out the Import and export section.

What is a frame in Flutter?

Flutter is designed to render its UI at 60 frames per second (fps), or 120 fps on devices capable of 120Hz updates. Each render is called a frame. This means that, approximately every 16ms, the UI updates to reflect animations or other changes to the UI. A frame that takes longer than 16ms to render causes jank (jerky motion) on the display device.

Flutter frames chart

This chart contains Flutter frame information for your application. Each bar set in the chart represents a single Flutter frame. The bars are color-coded to highlight the different portions of work that occur when rendering a Flutter frame: work from the UI thread and work from the raster thread (previously known as the GPU thread).

Screenshot from a performance snapshot

Selecting a bar from this chart centers the flame chart below on the timeline events corresponding to the selected Flutter frame. The events are highlighted with blue brackets.

Screenshot from a timeline recording

UI

UI 執行緒執行 Dart VM 中的 Dart 程式碼。它包括你的應用程式和 Flutter 框架的所有程式碼。當你建立或開啟一個頁面， UI 執行緒會建立一個圖層樹和一個輕量級的與裝置無關的繪製指令集，並把圖層樹交給裝置的 raster（網格）執行緒進行渲染。 不要 阻塞這個執行緒。

網格執行緒

網格化執行緒（也就是我們之前知道的 GPU 執行緒）執行 Flutter 引擎中圖形相關的程式碼。這個執行緒透過與 GPU (圖形處理單元) 通訊，獲取圖形樹並顯示它。你不能直接存取 Raster 執行緒或它的資料，但如果這個執行緒較慢，那它肯定是由你的 Dart 程式碼引起的。圖形化庫 Skia 執行在這個執行緒上，有時候也稱它為光柵執行緒。

有時候一個頁面的圖形層樹比較容易建構但 raster 執行緒的渲染卻比較昂貴。在這種情形下，你需要找出導致渲染變慢的程式碼。為 GPU 設定特定多種型別的 workload 是相當困難的。在一些特定的情形下，多個物件的透明度重疊、剪下或陰影，有可能會導致不必要的 saveLayer() 的呼叫。

更多詳細資訊，請檢視文件 定位 GPU 圖表中的問題。

卡頓 (Jank)

幀渲染圖表使用紅色圖層顯示幀延時。如果一幀的渲染時間超過 16ms，則會被認為此幀是延時的，為了達到幀渲染頻率到 60 FPS (每秒幀數)，每一幀的渲染時間必須等於或少於 16 ms。如果沒有達到這個目標，你會發現 UI 不流暢或丟幀。

更多關於效能分析資訊，請檢視文件：Flutter 效能分析。

著色器渲染

著色器渲染

在 Flutter 應用中，著色器會在初次使用時發生渲染。參與了著色器編譯的建構幀已標記為深紅色：

Screenshot of shader compilation for a frame

想要了解更多關於如何減少著色器快取卡頓的內容，閱讀 在移動端減少著色器編譯卡頓。

時間線事件表

The timeline events chart shows all event tracing from your application. The Flutter framework emits timeline events as it works to build frames, draw scenes, and track other activity such as HTTP traffic. These events show up here in the Timeline. You can also send your own Timeline events using the dart:developer Timeline and TimelineTask APIs.

Screenshot of timeline events for a frame

The flame chart supports zooming and panning:

  • To zoom, scroll up and down with the mouse wheel / trackpad
  • To pan horizontally, either click and drag the chart or scroll horizontally with the mouse wheel / trackpad
  • To pan vertically, either click and drag the chart or use alt + scroll
  • The WASD keys also work for controlling zoom and horizontal scroll position

You can click an event to view CPU profiling information in the CPU profiler below, described in the next section.

增強的追蹤選項

想要在時間線事件圖表裡檢視更詳細的追蹤內容，請使用增強的追蹤下拉控制項裡的選項：

Screenshot of enhance tracing dropdown

你可以重複操作你想要追蹤的行為來檢視新的時間線事件，操作後可以在時間線中選擇一個建構幀進行檢視。

追蹤 widget 的建構

想要在時間線中檢視 build() 方法的事件，啟用 Track Widget Builds 選項，時間線中將出現 widget 對應名稱的事件。

Screenshot of track widget builds

追蹤佈局

想要在時間線中檢視 RenderObject 佈局建構的事件，啟用 Track Layouts 選項：

Screenshot of track layouts

追蹤繪製

想要在時間線中檢視 RenderObject 的繪製事件，啟用 Track Paints 選項：

Screenshot of track paints

更多除錯選項

想要診斷渲染圖層相關的問題，請先關閉渲染層。下述的選項將會預設啟動。

想要檢視你的應用的效能影響，請嘗試以相同的操作重現效能問題。在渲染層關閉的情況下，於建構幀圖表裡選擇一個新的建構幀，檢視它的時間線細節。如果 Raster 執行緒的時間消耗有顯著降低，那麼你禁用的效果的濫用可能是導致卡頓的主要原因。

渲染裁剪的圖層
禁用該選項來檢查已使用的裁剪圖層是否影響了效能。如果禁用後效能有顯著提升，請嘗試減少你的應用中裁剪效果的使用。

渲染透明度圖層
禁用該選項來檢查已使用的透明度圖層是否影響了效能。如果禁用後效能有顯著提升，請嘗試減少你的應用中透明度效果的使用。

渲染物理形狀圖層
禁用該選項來檢查已使用的物理形狀圖層是否影響了效能，例如陰影和背景特效。如果禁用後效能有顯著提升，請嘗試減少你的應用中物理效果的使用。

Screenshot of more debugging options

匯入匯出

DevTools 支援匯入和匯出時間線快照。單擊 export 按鈕 (幀渲染圖表右上角) 下載當前時間線的快照。要匯入時間線快照，可以從任何頁面拖放快照到 DevTools。提示：DevTools 僅支援匯入 DevTools 匯出的原始檔。