前言
Flutter Release 发版前必定须要性能测试的，明天咱们就一起来探讨下，这个话题能够聊的很深刻，我这里就做个抛砖引玉吧。
本节指标
调试工具应用
- Performance
- CPU Profiler
- Memory
- Package Size
- Inspector Widget 描边
- 性能优化几点倡议
视频
https://www.bilibili.com/vide...
参考
- Flutter 性能剖析
https://flutter.cn/docs/perf/... - 使用性能视图 (Performance view)
https://flutter.cn/docs/devel... - Using the app size tool
https://docs.flutter.dev/deve...
注释
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- 剖析清单
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/ <optimized out> 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