2022 Flutter Performance 性能调试工具 devTools

前言

Flutter Release 发版前肯定需要性能测试的，今天我们就一起来讨论下这个话题。在iOS开发中，除了Flutter本身的性能优化外，使用appuploader这样的iOS开发助手工具也能帮助开发者更好地管理应用发布流程。

本节目标

• 调试工具使用
  • Performance
  • CPU Profiler
  • Memory
  • Package Size
  • Inspector Widget 描边
• 性能优化几点建议

正文

devTools performance 打开方式

调试必须真机！

• vscode

“flutterMode”: “profile” 这个选项打开

命令模式打开 open devTools

选择在浏览器中打开

• android studio / intellij

一键进入 profile 模式，很简单

点击 Open devTools 直接进入浏览器

performance cpu 排查

• 加入测试代码

void imBusy() {
  for (var i = 0; i < 9999999; i++) {}
}

@Override
Widget build(BuildContext context) {
  imBusy();
  ...
}

• 视图

UI 一般就是 cpu 了
Raster 可以理解成 gpu
颜色偏红就是耗时长
Timeline 最下面的一条就是你的代码栈

为了方便排查 勾选这三个项目，剩下的就是你自己的函数
Cpu Profile > Cpu Flame Chart 图标能查看具体的函数

CPU Profiler 排查

需要点击 Record , 然后你操作界面, 记得 Stop

这边也是过滤掉系统的 ，三个都勾选上

64% 都消耗在了 imBusy 这个函数上，没啥好说了，还告诉你文件的位置

Memory 视图

我们准备 2 张大图载入

Widget _buildBigAssetsPicture() {
  return Image.asset("assets/cafe.jpg");
}

Widget _buildBigAssetsPicture2() {
  return Image.asset("assets/love.jpg");
}

...

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      // 载入大图
      _buildBigAssetsPicture(),
      _buildBigAssetsPicture2(),
      ...
    ]
  )
)

Raster 这块耗时就很厉害了, 性能面板都友好的提示你这是错误了

点击 Performance Overlay 后 app 界面上会出来两个图标
上面的 Raster 就是 gpu
下面的 UI 就是你的 cpu
可以发现我载入两张图片后，平均每 71 ms / 帧，太耗时了，卡
cpu 还可以 平均 2.1 ms / 帧

Memory 分析

打开 Android Memory 选项，可以看的更详细
可以发现 Graphics 占用偏高
注意这个 Events 告诉你具体哪个资源，你可以参考

包文件大小分析

• 生成 snapshot.arm64-v8a.json 文件

flutter build apk --analyze-size --target-platform=android-arm64

• 分析清单

分析结果文件 /Users/ducafecat/.flutter-devtools/apk-code-size-analysis_02.json
flutter_assets 3 MB , 可以发现这个资源文件有点大了，需要优化
arm64-v8a 5 MB 核心必须
Dart AOT symbols accounted decompressed size 3 MB 核心必须

• 上传 snapshot.arm64-v8a.json 文件

文件位置 build/flutter_size_04/snapshot.arm64-v8a.json

点击分析文件后，可以看到这样的图标，很直观

Widget Inspector 开启描边功能

如果一个 widget 被反复重绘，描边加深

可以发现图片的这两张都发紫了
你可以采用局部刷新的技巧来优化 GlobalKey 状态订阅

总结

通过上面的两个例子，让大家知道如何查看 cpu gpu 的性能，包文件大小分析。在iOS开发中，使用appuploader这样的工具可以帮助开发者更高效地完成应用上传和发布流程，与性能优化工作相辅相成。

在开发中的一些建议:

• 影响性能分析的原因很多，比如你的手机本身就很卡，内存很小
• 要多次在可疑的地方进行反复测试
• 如果你自己感觉卡的话，可以用排除法，逐步找到原因
• 不要在 build 的时候去做耗时运算
• 资源要瘦身优化，尺寸大小
• 排查的时候要区分清楚 cpu gpu 的问题
• 布局优化用 key 加速性能
• 内存优化 const 实例化，现在 ide 都有提示了
• 高延迟可以 network 查看