前言
Flutter Release 發(fā)版前肯定需要性能測(cè)試的，今天我們就一起來(lái)討論下，這個(gè)話題可以聊的很深入，我這里就做個(gè)拋磚引玉吧。
本節(jié)目標(biāo)
- 調(diào)試工具使用
- Performance
- CPU Profiler
- Memory
- Package Size
- Inspector Widget 描邊
- 性能優(yōu)化幾點(diǎn)建議
視頻
https://www.bilibili.com/video/BV1Tb4y1p7t9/
參考
Flutter 性能分析
https://flutter.cn/docs/perf/rendering/ui-performance使用性能視圖 (Performance view)
https://flutter.cn/docs/development/tools/devtools/performanceUsing the app size tool
https://docs.flutter.dev/development/tools/devtools/app-size#generating-size-files
正文
devTools performance 打開(kāi)方式
調(diào)試必須真機(jī)！
- vscode
"flutterMode": "profile" 這個(gè)選項(xiàng)打開(kāi)
命令模式打開(kāi)
open devTools
選擇在瀏覽器中打開(kāi)
- android studio / intellij
一鍵進(jìn)入
profile模式，很簡(jiǎn)單
點(diǎn)擊
Open devTools直接進(jìn)入瀏覽器
performance cpu 排查
- 加入測(cè)試代碼
void imBusy() {
for (var i = 0; i < 9999999; i++) {}
}
@override
Widget build(BuildContext context) {
imBusy();
...
- 視圖
UI 一般就是 cpu 了
Raster 可以理解成 gpu
顏色偏紅就是耗時(shí)長(zhǎng)
Timeline 最下面的一條就是你的代碼棧
為了方便排查 勾選這三個(gè)項(xiàng)目，剩下的就是你自己的函數(shù)
Cpu Profile > Cpu Flame Chart 圖標(biāo)能查看具體的函數(shù)
CPU Profiler 排查
需要點(diǎn)擊 Record , 然后你操作界面, 記得 Stop
這邊也是過(guò)濾掉系統(tǒng)的 ，三個(gè)都勾選上
64% 都消耗在了 imBusy 這個(gè)函數(shù)上，沒(méi)啥好說(shuō)了，還告訴你文件的位置
Memory 視圖
我們準(zhǔn)備 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 這塊耗時(shí)就很厲害了, 性能面板都友好的提示你這是錯(cuò)誤了
點(diǎn)擊 Performance Overlay 后 app 界面上會(huì)出來(lái)兩個(gè)圖標(biāo)
上面的 Raster 就是 gpu
下面的 UI 就是你的 cpu
可以發(fā)現(xiàn)我載入兩張圖片后，平均每 71 ms / 幀，太耗時(shí)了，卡
cpu 還可以 平均 2.1 ms / 幀
Memory 分析
打開(kāi) Android Memory 選項(xiàng)，可以看的更詳細(xì)
可以發(fā)現(xiàn) Graphics 占用偏高
注意這個(gè) Events 告訴你具體哪個(gè)資源，你可以參考
包文件大小分析
- 生成
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
分析結(jié)果文件 /Users/ducafecat/.flutter-devtools/apk-code-size-analysis_02.json
flutter_assets 3 MB , 可以發(fā)現(xiàn)這個(gè)資源文件有點(diǎn)大了，需要優(yōu)化
arm64-v8a 5 MB 核心必須
Dart AOT symbols accounted decompressed size 3 MB 核心必須
- 上傳
snapshot.arm64-v8a.json文件
文件位置
build/flutter_size_04/snapshot.arm64-v8a.json
點(diǎn)擊分析文件后，可以看到這樣的圖標(biāo)，很直觀
Widget Inspector 開(kāi)啟描邊功能
如果一個(gè) widget 被反復(fù)重繪，描邊加深
可以發(fā)現(xiàn)圖片的這兩張都發(fā)紫了
你可以采用局部刷新的技巧來(lái)優(yōu)化GlobalKey狀態(tài)訂閱
總結(jié)
通過(guò)上面的兩個(gè)例子，讓大家知道如何查看 cpu gpu 的性能，包文件大小分析。
在開(kāi)發(fā)中的一些建議:
- 影響性能分析的原因很多，比如你的手機(jī)本身就很卡，內(nèi)存很小
- 要多次在可疑的地方進(jìn)行反復(fù)測(cè)試
- 如果你自己感覺(jué)卡的話，可以用排除法，逐步找到原因
- 不要在 build 的時(shí)候去做耗時(shí)運(yùn)算
- 資源要瘦身優(yōu)化，尺寸大小
- 排查的時(shí)候要區(qū)分清楚 cpu gpu 的問(wèn)題
- 布局優(yōu)化用 key 加速性能
- 內(nèi)存優(yōu)化 const 實(shí)例化，現(xiàn)在 ide 都有提示了
- 高延遲可以 network 查看
end
? 貓哥
微信 ducafecat
