Flutter性能监控工具（2）--- PerformanceOverlay简介

0x00 前言

PerformanceOverlay是在app上显示性能统计数据的浮窗。PerformanceOverlay是一个Widget，有几个属性，用于控制开启哪些功能。

0x01 PerformanceOverlay 分析

PerformanceOverlay的源码是：

~/flutter/packages/flutter/lib/src/widgets/performance_overlay.dart
复制代码

可以看出PerformanceOverlay有以下的属性：

final int optionsMask ：用于标记哪些功能打开的flag，有四个标志位，

displayRasterizerStatistics ：显示光栅化器统计信息（GPU） visualizeRasterizerStatistics ：可视化光栅化器统计信息(GPU) displayEngineStatistics ：显示引擎统计（CPU） visualizeEngineStatistics ：可视化引擎统计（CPU）
final int rasterizerThreshold : 光栅化的阈值，用于捕获SkPicture跟踪以进行进一步分析，它的值代表每隔几帧捕获一次，默认是0，代表功能是关闭的
final bool checkerboardRasterCacheImages ：检查缓存图片的情况
final bool checkerboardOffscreenLayers ：检查不必要的setlayer

0x02 启用 PerformanceOverlay

开启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. 使用代码设置

我们知道PerformanceOverlay是一个widget，PerformanceOverlay是在WidgetsApp里被使用的，MaterialApp又使用了WidgetsApp，所以我们通过给MaterialApp 或者 WidgetsApp 设置参数来控制PerformanceOverlay的功能。

所以为了，开启将PerformanceOverlay，要将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'),
    );
  }
}
复制代码

0x03 PerformanceOverlay：GPU、CPU统计信息

如下图：

这个浮窗有两个图形：

上面的是GPU thread

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

表示在UI线程上生成每帧需要的时间。
纵轴

图中的纵轴代表时间，每个图形都被分成三格，每小隔代表16ms，如果图中超过这三条线之一，那么您的运行频率低于60Hz。
横轴

横轴代表帧。该图仅在应用程序绘制时更新，因此如果它处于空闲状态，该图将停止移动。每个图形绘制的都是该线程最后300帧的数据。

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

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

如果GPU thread是红色的

那么可能是绘制的图形过于复杂，或者是执行了过多的GPU操作。
如果UI thread是红色的

说明肯定是Dart代码里有耗时操作，导致阻塞了UI操作。
如果两个都是红色的建议从UI thread，也就是Dart代码查起。

0x03 GPU问题定位

辅助定位GPU问题的，就是PerformanceOverlay的下面两个功能：

PerformanceOverlay：checkerboardRasterCacheImages -- 检查缓存图片的情况

还有一个拖慢GPU渲染速度的是没有给静态图像做缓存，导致每次build都会重新绘制。我们可以把静态图像加到RepaintBoundry中，引擎会自动判断图像是否复杂到需要repaint boundary。
PerformanceOverlay：checkerboardOffscreenLayers -- 检查不必要的setlayer

setlayer是Canvas里的操作，非常耗性能，所以要尽量避免这个操作。你可能会好奇，我根本没用到这个，是的，我们一般是不会使用这个函数的，所以当你开启了这个检查后，会发现啥也没有，正好说明了你没有用到setlayer。我们一般都是被动的使用，比如需要剪切、透明的操作，用到一些widget的时候，这些widget会用到setlayer方法，一旦遇到这种情况，我们要想一下是否一定要这么做，能不能通过其他方式实现。

开启这两个功能的方法：

MaterialApp(
    showPerformanceOverlay: true,
    checkerboardOffscreenLayers: true, //使用了saveLayer的图像会显示为棋盘格式并随着页面刷新而闪烁
    checkerboardRasterCacheImages: true, // 做了缓存的静态图像图片在刷新页面使不会改变棋盘格的颜色；如果棋盘格颜色变了，说明被重新缓存，这是我们要避免的
    ...
);
复制代码

0x04 GPU优化 tip

一些效果尽量设置在子Widget上，而不是父Widget

例如，要实现一个混合图层的半透明效果，如果把透明度设置在顶层Widget上，CPU会把每个子Widget的图层渲染出来，在执行saveLayer操作保存为一个图层，最后给这个图层设置透明度，但是saveLayer的开销很大，所以官方给出建议：首先确认这些效果是否真的有必要；如果有必要，应该把透明度设置到每个子Widget上，而不是父Widget。裁剪操作也是类似。

0x05 UI问题定位

可以使用 Observatory里的timeline的功能分析。

看这一篇 Flutter性能监控工具（3）--- Observatory使用