Flutter 中性能优化工具的使用

比眉伴天荒 2022-11-06 13:59 277阅读 0赞

本文主要介绍 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” 可以清空数据。  
————————————————  
版权声明：本文为CSDN博主「大师兄QZW」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/qizewei123/article/details/102767893