本文主要介绍 Flutter UI 代码优化工具 PerformanceOverlay 和 内存优化工具 Observatory的介绍和使用。

 

代码优化工具 ： PerformanceOverlay

A. 在 Flutter 项目中打开 PerformanceOverlay

1. 首先打开 PerformanceOverlay 工具，在 AndroidStudio -> Preference -> Language&Frameworks -> Flutter 中打开相应开关，如图：

2. 然后 run 我们的APP，就可以在AS的左边看到 Flutter Inspector的窗口(标记)，如图：

3. 然后打开 PerformanceOverlay，点击Flutter Inspector 窗口左上角树状图按钮(标记2) ，即可在屏幕上显示当前UI帧率和GPU帧率的波图。

B. aar 模式混合开发的项目 打开 Flutter Inspector

只需要在Flutter 项目的根布局或者入口布局的 MaterialApp 的Widget中加入即可：

```

showPerformanceOverlay: true 

```

C. PerformanceOverlay 分析

打开PerformanceOverlay后，我们APP会增加两个浮层，如图：

1. 绿色代表当前帧，如果页面UI有变动，图表便会不断绘制。
2. 蒙版上有两个图表，每个图表有三个格，每一格代表16ms，如果大多数帧都没超过第一行，说明达到了期望的帧率。
3. 蒙版上有两个图表，分别表示UI 线程帧率和 GPU 线程帧率。
       UI 线程主要执行虚拟机中的Dart代码，包括制作视图树和业务逻辑。
       GPU 线程主要绘制视图树，即渲染视图。
4. 优化建议：
      1. 如果 UI 线程当前帧率由绿色变为红色，那么可能是执行了某个较耗时的函数，或者函数调用过多，算法复杂度高。
      解决方法：
      此处多为业务逻辑，优化业务逻辑代码为主。
      耗时的计算放到独立的 isolate 去执行。
      2. 如果 GPU 线程当前帧率由绿色变为红色，那么可能是要绘制的图形过于复杂，或者执行了过多GPU操作。
      解决方法：
      优化Widget的布局，减少不必要的层级。
      具体属性 Widget 设置到具体的Widget。

内存优化工具 ： Observatory

Observatory是用于分析和调试Dart代码的工具，因为Flutter自带Dart VM，所以也可以用Observatory

Observatory打开方式

1. 在 Flutter Inspector 中点击秒表图标，如图：

2. 在命令行输入（要求有main 函数）:
```
flutter run
```
3. 运行成功后会显示：

4. 点击网址进入，点击左下角选择当前线程，如图：

5. 进入线程页面后，我们可以再 Main 菜单里看到许多数据分析，包括CPU分析和Log台等，我们点击 allocation profile ,如图所示：

 

6. 进入 allocation profile

 

内存分析

1. 在这个页面，我们可以看到程序内存的分析：

• New generation: 新创建的对象，一般来说对象比较小，生命周期短，如local 变量。在这里GC活动频繁。
• Old generation：从GC中存活下来的New generation将会转移到Old generation，它比新生代空间大，更适合大的对象和生命周期长的对象。

2. 该图表提供一些功能，能帮我们更方便的排查内存泄漏。

• 点击右上角的 “Auto-refresh on GC ” 选项来实时的检测内存表现；
• 点击顶部的按钮 “ GC ” 来实现手动GC；
• 点击顶部的 “ Reset Accumulator” 可以清空数据。