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

0x00 前言

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

0x01 PerformanceOverlay 分析

PerformanceOverlay的源码是：

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

能够看出PerformanceOverlay有如下的属性：

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

   displayRasterizerStatistics ：显示光栅化器统计信息（GPU） visualizeRasterizerStatistics ：可视化光栅化器统计信息(GPU) displayEngineStatistics ：显示引擎统计（CPU） visualizeEngineStatistics ：可视化引擎统计（CPU）

2. final int rasterizerThreshold : 光栅化的阈值，用于捕获SkPicture跟踪以进行进一步分析，它的值表明每隔几帧捕获一次，默认是0，表明功能是关闭的

3. final bool checkerboardRasterCacheImages ：检查缓存图片的状况

4. final bool checkerboardOffscreenLayers ：检查没必要要的setlayer

0x02 启用 PerformanceOverlay

开启Performance Overlay的方法有三种：

一、 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. 使用代码设置

咱们知道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统计信息

以下图：

这个浮窗有两个图形：

1. 上面的是GPU thread

   表示在GPU线程上生成每帧须要的时间。

2. 下面的UI thread

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

3. 纵轴

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

4. 横轴

   横轴表明帧。 该图仅在应用程序绘制时更新，所以若是它处于空闲状态，该图将中止移动。每一个图形绘制的都是该线程最后300帧的数据。

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

遇到红色的就须要去具体分析，由于会形成APP卡顿：

1. 若是GPU thread是红色的

   那么多是绘制的图形过于复杂，或者是执行了过多的GPU操做。

2. 若是UI thread是红色的

   说明确定是Dart代码里有耗时操做，致使阻塞了UI操做。

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

0x03 GPU问题定位

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

1. PerformanceOverlay：checkerboardRasterCacheImages -- 检查缓存图片的状况

   还有一个拖慢GPU渲染速度的是没有给静态图像作缓存，致使每次build都会从新绘制。咱们能够把静态图像加到RepaintBoundry中，引擎会自动判断图像是否复杂到须要repaint boundary。

2. PerformanceOverlay：checkerboardOffscreenLayers -- 检查没必要要的setlayer

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

开启这两个功能的方法：

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

0x04 GPU优化 tip

1. 一些效果尽可能设置在子Widget上，而不是父Widget

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

0x05 UI问题定位

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

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

0x08 UI优化 tip