Flutter性能监控工具（2）--- Performance Overlay

如下图：

这个浮窗有两个图形：

1. 上面的是GPU thread 表示在GPU线程上生成每帧需要的时间。
2. 下面的UI thread 表示在UI线程上生成每帧需要的时间。

每个图形绘制的都是该线程最后300帧的数据。

为了保证60FPS，每帧耗费的时间应该是小于16ms的，看上图中绿色的粗线条，代表的是当前帧的数据，如果当前帧的数据符合预期（<16ms），那么就是绿色的，如果不符合，就是红色的，如下图：

遇到红色的就需要去具体分析，因为会造成APP卡顿：

1. 如果GPU thread是红色的

   说明当前场景太复杂了，导致无法快速渲染

2. 如果UI thread是红色的

   说明肯定是Dart代码里有耗时操作，导致阻塞了UI操作。

3. 如果两个都是红色的 建议从UI thread，也就是Dart代码查起。

0x02 如何开启Performance Overlay

开启Performance Overlay的方法有三种：

1、 Flutter Inspector

Flutter Inspector是一个强大的工具，Performance Overlay的功能也集成在Flutter Inspector里。

需要我们运行Flutter APP后才可以使用，

1. 在Android Studio里

选择 View > Tool Windows > Flutter Inspector，就可以打开Flutter Inspector，可以看到有很多功能，如下图：

然后选择Performance Overlay。

2. 在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'),
    );
  }
}
复制代码