Flutter效能監控工具（2）--- Performance Overlay
摘要：
如下圖：
這個浮窗有兩個圖形：
上面的是GPU thread 表示在GPU執行緒上生成每幀需要的時間。
下面的UI thread 表示在UI執行緒上生成每幀需要的時間。
每個圖形繪製的都是該執行緒最後300幀的資料。
為了保證60FPS，...
如下圖：
這個浮窗有兩個圖形：
- 上面的是GPU thread 表示在GPU執行緒上生成每幀需要的時間。
- 下面的UI thread 表示在UI執行緒上生成每幀需要的時間。
每個圖形繪製的都是該執行緒最後300幀的資料。
為了保證60FPS，每幀耗費的時間應該是小於16ms的，看上圖中綠色的粗線條，代表的是當前幀的資料，如果當前幀的資料符合預期（<16ms），那麼就是綠色的，如果不符合，就是紅色的，如下圖：
遇到紅色的就需要去具體分析，因為會造成APP卡頓：
-
如果GPU thread是紅色的
說明當前場景太複雜了，導致無法快速渲染
-
如果UI thread是紅色的
說明肯定是Dart程式碼裡有耗時操作，導致阻塞了UI操作。
-
如果兩個都是紅色的 建議從UI thread，也就是Dart程式碼查起。
0x02 如何開啟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'),
);
}
}
複製程式碼