0x00 前言
Performance Overlay是在app上顯示效能統計資料的浮窗。
0x01 Performance Overlay
如下圖：
這個浮窗有兩個圖形：
-
上面的是GPU thread
表示在GPU執行緒上生成每幀需要的時間。
-
下面的UI thread
表示在UI執行緒上生成每幀需要的時間。
每個圖形繪製的都是該執行緒最後300幀的資料。
為了保證60FPS，每幀耗費的時間應該是小於16ms的，看上圖中綠色的粗線條，代表的是當前幀的資料，如果當前幀的資料符合預期（<
16ms），那麼就是綠色的，如果不符合，就是紅色的，如下圖：
遇到紅色的就需要去具體分析，因為會造成APP卡頓：
-
如果GPU thread是紅色的
那麼可能是繪製的圖形過於複雜，或者是執行了過多的GPU操作。
-
如果UI thread是紅色的
說明肯定是Dart程式碼裡有耗時操作，導致阻塞了UI操作。
-
如果兩個都是紅色的建議從UI thread，也就是Dart程式碼查起。
0x02 GPU問題定位
- 一些效果儘量設定在子Widget上，而不是父Widget
例如，要實現一個混合圖層的半透明效果，如果把透明度設定在頂層Widget上，CPU會把每個子Widget的圖層渲染出來，在執行saveLayer操作儲存為一個圖層，最後給這個圖層設定透明度，但是saveLayer的開銷很大，所以官方給出建議：首先確認這些效果是否真的有必要；如果有必要，應該把透明度設定到每個子Widget上，而不是父Widget。裁剪操作也是類似。
- 影像快取
還有一個拖慢GPU渲染速度的是沒有給靜態影像做快取，導致每次build都會重新繪製。我們可以把靜態影像加到RepaintBoundry中，引擎會自動判斷影像是否複雜到需要repaint boundary。
- 開啟saveLayer和影像快取的檢查
MaterialApp( showPerformanceOverlay: true, checkerboardOffscreenLayers: true, //使用了saveLayer的影像會顯示為棋盤格式並隨著頁面重新整理而閃爍 checkerboardRasterCacheImages: true, // 做了快取的靜態影像圖片在重新整理頁面使不會改變棋盤格的顏色；如果棋盤格顏色變了，說明被重新快取，這是我們要避免的 ...);
複製程式碼0x03 UI問題定位
可以使用 Observatory裡的timeline的功能分析。
0x04 如何開啟Performance Overlay
開啟Performance Overlay的方法有三種：
1、 Flutter Inspector
Flutter Inspector是一個強大的工具，Performance Overlay的功能也整合在Flutter Inspector裡。
需要我們執行Flutter APP後才可以使用，
- 在Android Studio裡
選擇 View >
Tool Windows >
Flutter Inspector，就可以開啟Flutter Inspector，可以看到有很多功能，如下圖：
然後選擇Performance Overlay。
- 在VS Code裡
通過 View >
Command Palette 或者 cmd+p開啟命令板，輸入“performance” 然後選擇 Toggle Performance Overlay 就行。
2. 使用程式碼設定
將 MaterialApp 或者 WidgetsApp 的showPerformanceOverlay 屬性設定為true，如下：
class MyApp extends StatelessWidget {
@override Widget build(BuildContext context) {
return MaterialApp( showPerformanceOverlay: true, title: 'My Awesome App', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'My Awesome App'), );
}
}複製程式碼