Flutter Release 发版前肯定需要性能测试的，今天我们就一起来讨论下，这个话题可以聊的很深入，我这里就做个抛砖引玉吧。
本节目标调试工具使用
PerformanceCPU ProfilerMemoryPackage SizeInspector Widget 描边 性能优化几点建议 视频
https://www.bilibili.com/video/BV1Tb4y1p7t9/
参考
Flutter 性能分析
https://flutter.cn/docs/perf/rendering/ui-performance
使用性能视图 (Performance view)
https://flutter.cn/docs/development/tools/devtools/performance
Using the app size tool
https://docs.flutter.dev/development/tools/devtools/app-size#generating-size-files
调试必须真机！
vscode
“flutterMode”: “profile” 这个选项打开
命令模式打开 open devTools
选择在浏览器中打开
android studio / intellij
一键进入 profile 模式，很简单
performance cpu 排查点击 Open devTools 直接进入浏览器
加入测试代码
void imBusy() {
for (var i = 0; i < 9999999; i++) {}
}
@override
Widget build(BuildContext context) {
imBusy();
...
视图
UI 一般就是 cpu 了
Raster 可以理解成 gpu
颜色偏红就是耗时长
Timeline 最下面的一条就是你的代码栈
CPU Profiler 排查为了方便排查 勾选这三个项目，剩下的就是你自己的函数
Cpu Profile > Cpu Flame Chart 图标能查看具体的函数
需要点击 Record , 然后你操作界面, 记得 Stop
这边也是过滤掉系统的 ，三个都勾选上
Memory 视图64% 都消耗在了 imBusy 这个函数上，没啥好说了，还告诉你文件的位置
我们准备 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: [
// 载入大图
_buildBigAssetsPicture(),
_buildBigAssetsPicture2(),
...
Raster 这块耗时就很厉害了, 性能面板都友好的提示你这是错误了
Memory 分析点击 Performance Overlay 后 app 界面上会出来两个图标
上面的 Raster 就是 gpu
下面的 UI 就是你的 cpu
可以发现我载入两张图片后，平均每 71 ms / 帧，太耗时了，卡
cpu 还可以 平均 2.1 ms / 帧
包文件大小分析打开 Android Memory 选项，可以看的更详细
可以发现 Graphics 占用偏高
注意这个 Events 告诉你具体哪个资源，你可以参考
生成 snapshot.arm64-v8a.json 文件
> flutter build apk --analyze-size --target-platform=android-arm64
分析清单
app-release.apk (total compressed) 9 MB
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
res/
mipmap-xxxhdpi-v4 1 KB
meta-INF/
MANIFEST.MF 2 KB
kotlinx-coroutines-core.kotlin_module 1 KB
CERT.SF 3 KB
kotlin-stdlib.kotlin_module 3 KB
CERT.RSA 1013 B
lib/
arm64-v8a 5 MB
Dart AOT symbols accounted decompressed size 3 MB
package:flutter 1 MB
dart:core 234 KB
dart:typed_data 193 KB
dart:ui 170 KB
dart:collection 117 KB
dart:async 76 KB
dart:convert 50 KB
dart:io 40 KB
dart:isolate 29 KB
package:vector_math/
vector_math_64.dart 23 KB
dart:ffi 11 KB
dart:developer 8 KB
package:typed_data/
src/
typed_buffer.dart 5 KB
package:flutter_application_performance/
main.dart 2 KB
package:collection/
src/
priority_queue.dart 2 KB
dart:vmservice_io 635 B
dart:mirrors 492 B
dart:math 475 B
dart:nativewrappers 186 B
void/
44 B
assets/
flutter_assets 3 MB
kotlin/
reflect 1 KB
collections 1 KB
kotlin.kotlin_builtins 4 KB
resources.arsc 24 KB
AndroidManifest.xml 1 KB
classes.dex 250 KB
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
A summary of your APK analysis can be found at: /Users/ducafecat/.flutter-devtools/apk-code-size-analysis_02.json
分析结果文件 /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 的性能，包文件大小分析。
在开发中的一些建议:
影响性能分析的原因很多，比如你的手机本身就很卡，内存很小要多次在可疑的地方进行反复测试如果你自己感觉卡的话，可以用排除法，逐步找到原因不要在 build 的时候去做耗时运算资源要瘦身优化，尺寸大小排查的时候要区分清楚 cpu gpu 的问题布局优化用 key 加速性能内存优化 const 实例化，现在 ide 都有提示了高延迟可以 network 查看
end
© 猫哥
微信 ducafecat
博客 ducafecat.tech
github
bilibili
