0x00 前言
Performance Overlay是在app上显示性能统计数据的浮窗。
0x01 Performance Overlay
如下图：
这个浮窗有两个图形：
- 上面的是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'),
);
}
}
复制代码