前言
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