文章目录
- 1 profile / release 模式
- 2 监测FPS帧率
- 2.1 在Android Studio 和 IntelliJ IDEA中
- 2.2 代码中
- 2.3 打开Flutter开发者工具监控
- 2.3.1 安装DevTools
- 3 UI帧率 和 GPU帧率
App 流畅性的关键指标有 UI帧率，GPU帧率，我们期望它能达到 60fps，也就是16ms每帧。
1 profile / release 模式
那么如何获取到呢？
前面文章介绍了Flutter的三种运行模式，要获取FPS最好在profile / release 模式。
说明：
因为debug模式会有一些额外的检查工作，比如assert()等
为了加速开发效率，debug模式是以 JIT（Just in time）模式编译 dart 代码的，而profile和release是提前编译为机器码 AOT（Ahead Of Time），所以 debug 会慢很多
所以为了获取最接近生产环境的数据，我们应该选择一台尽可能低端的真机，并且以 profile 模式或者 release 模式下运行app。
2 监测FPS帧率
Flutter提供了监测帧率工具。那么如何开启呢？
2.1 在Android Studio 和 IntelliJ IDEA中
选中 View > Tool Windows > Flutter Inspector。
或者使用快捷方式，点击窗口右侧的Flutter Inspector。
然后点击上面图中的箭头所指的按钮。就会在手机或模拟器中打开了。如下图所示。
2.2 代码中
打开 在MaterialApp 或者 WidgetsApp的构造函数中设置showPerformanceOverlay属性为 true。同样可以在手机和模拟器中看的帧率检测。代码如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
showPerformanceOverlay: true, // 开启FPS监控
title: 'My Awesome App',
home: MyHomePage(title: 'My Awesome App'),
);
}
}2.3 打开Flutter开发者工具监控
使用Flutter开发跨平台应用时，经常需要用到一个开发者工具，即Dart DevTools，Dart DevTools是一套用于Dart和Flutter应用开发的性能和调试工具，可以用它来检测和分析应用的性能，以及用它来调试应用日志和进行内存分析等。
目前，Dart DevTools支持的功能有如下一些：
- 检查和分析应用程序的UI布局和状态。
- 诊断应用的UI 性能问题。
- 检测和分析应用程序的CPU使用情况。
- 分析应用程序的网络使用情况。
- Flutter或Dart应用程序的源代码级调试。
- 调试Flutter或Dart应用程序的内存使用情况和分析内存问题。
- 查看运行的Flutter或Dart应用程序的一般日志和诊断信息。
2.3.1 安装DevTools
使用DevTools之前需要先安装DevTools插件，如果还没有安装，可以先安装它。
1 Android Studio
默认情况下，只要安装了Flutter开发环境，基本就已经安装了DevTools工具，安装之后运行项目会在DevTools工具栏看到如下图所示的工具集。
如下图箭头所示。
点击图标，就在浏览器中打开了DevTools界面。在TimeLine中就可以看到正在运行的应用的FPS了。如下图所示。
3 UI帧率 和 GPU帧率
在上面打开的图表上观察是否出现红色线条。绿色代表当前帧，当页面有变动，图表会不断绘制。
蒙版上有2个图表，每个图表上有三横格，每个横格代表16ms。如果大多数帧都在第一格，说明达到了期望的帧率。
图表分别体现了 UI帧率 和 GPU帧率。
如果出现了红色，说明对应的线程有太多work要做。
