共计 3107 个字符，预计需要花费 8 分钟才能阅读完成。
前言
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
