flutter的UI帧率FPS监测

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要做。