FutureCon 2022 FlutterアプリのPerformance測定

FutureConference 2022
https://future-architect.github.io/articles/20220712a/
にて、Flutterアプリのperformance測定について、開発、テスト、その後の運用フェーズでの利用例を含めてご紹介しました。

Transcript

1. 1 FutureCon 2022 FlutterアプリのPerformance測定
2. 自己紹介 • R&Dもやるエンジニアコンサル。最近はFlutter, Go, Python, ちょっ とTerraformを使います。 • 業界問わず多種PJで設計開発。各種PoCやR&D案件の要件定義も。 • 分散処理バッチの設計やAPI性能検証にも携わりアプリケーション性能に興味あり。 最近はFlutterの将来性とコミュニティの熱量に魅せられてる。
3. コンテンツ 1. Performanceについて 2. DevToolsについて 3. DevTools使用例（レンダリングprofiling） 4. Performance 測定の応用例 • DevTools • Performance test / benchmark • Firebase Performance monitoring
4. Performanceについて • 複数の観点がある： • Flutter GitHub リポジトリではPerformance issue を４カテゴリに 分けて管理： “perf: speed”, “perf: memory”, “perf: app size”, “perf: energy” • Speedには、レンダリング速度、ファイルIOなども影響する
5. DevToolsについて • Flutter公式の性能測定 + デバッグツール • VSCodeではDart/Flutter Extensionと同時にインストール、 AndroidStudio, IntelliJではPluginとして導入可能。 • 実機を用いた「Profile mode」での測定を前提としている。 • 多種類の機能を持っている。 • Widget Inspector • CPU profiler (web アプリは非対応) • Memory view • Performance view (レンダリングのプロファイリング)など
6. DevToolsによる性能測定: Performance view • #１）タイムラインにFrameごとの処理時間が表示 される。 • #２）UIイベントは、実装Dartコードを直接反映し ていて、Widgetレベルで実行イベントを確認でき る。＊Enhance Tracing: Widget Tree, RenderObjectのトレー スをONにする。 • #３）Raster(GPU)イベント。UIイベントから作成 される。 • ＃４）「Performance Overlay」ボタンをONにす ると、アプリ画面に重ねる形で、UIグラフとGPU グラフを確認できる。
7. Frameと処理時間 • 1frame（UI thread + GPU thread）が1秒間に60回以上処理される速さ ならば、スムーズに描画される＝人間の目にスムーズに見える。 • 1/60 = 16.666…… ms 以内に、UI thread + GPU threadが処理される必 要がある。 • Flutterでは、約17ms以上かかったframe (Jank)は描画されず、その frame分がskipされるため、画面の見た目はその分滑らかでなくなる。
8. １）Memory 使用量統計とイベントのグラフ DevToolsによる性能測定: Memory view ２）Heap Memory上のインスタンスを分析 ・ Analysisタブ： スナップショット時の、メモリ 上のインスタンス数と使用サイズ(bytes) を表示 ・ Allocationsタブ: 選択するClassについてstack traceとallocationを監視 ・ Dart VM からのメモリ統計 ・ 各種イベント（Snapshot, GC, アプリのユー ザーイベント）
9. １）CPU Flame chart 「Record」した範囲の各処理のCPU消費 時間を可視化。 トップダウンで呼び出し処理を表示。 DevToolsによる性能測定: CPU profiling https://docs.flutter.dev/development/tools/devtools/ cpu-profiler 3）Bottom up 呼出し処理の消費時間を、ボトムアップで 表示. ２）Call tree 呼出し処理の消費時間を、処理単位、関数 単位で確認できる. 呼出し元からトップダ ウンで表示.
10. DevToolsによる性能測定例 ソースコードと実装のポイントについては、技術ブログを参照ください：https://future-architect.github.io/articles/20220525a/
11. DevToolsによる性能測定例 ソースコードと実装のポイントについては、技術ブログを参照ください：https://future-architect.github.io/articles/20220525a/
12. Performance測定の応用
13. Performance測定の応用1: 実業務でのDevTools使用例 • 画面の初期読み込み、イベント処理時間遅延の原因特定の補助ツー ルとして。CPU Profilerにより、時間のかかっている処理を判別。 • アニメーション動作の問題を可視化するツールとして。 Performance viewにより、Widget ビルドとレンダリングの’Jank’が 発生しているか、その原因は何かを確認。
14. Performance測定の応用2: performance test / benchmark • integration_test_driverライブラリやflutter_driver_extensionライブラリを用いたPerformance profiling: 任意の処理(Widget)についてTraceコードを付与することで、Frameのビルド/レン ダリング時間の統計値やskipされたframe数などを出力. • https://docs.flutter.dev/cookbook/testing/integration/profiling • https://www.velotio.com/engineering-blog/performance-testing-of-flutter-apps • Flutter GitHub リポジトリ(https://github.com/flutter)ではCommit毎にperformanceのベンチマ ーク(各種ベンチマーク指標)を記録。結果はFlutter Dashboardから確認できる。 • Flutter Dashboard: https://flutter-dashboard.appspot.com/#/ • https://github.com/flutter/cocoon/blob/main/dashboard/USER_GUIDE.md • https://github.com/flutter/flutter/wiki/How-to-write-a-render-speed-test-for-Flutter
15. Performance測定の応用3: Firebase performance monitoringの利用 • Firebase: Google社提供のBaaS. 品質の高いモバイルアプリ/Webアプリ開発を 高速に行うために便利な15以上の機能を提供している. • Flutterアプリ用のSDKを利用できる. • Flutterアプリから利用できるプラグイン（アナリティクス, 認証, Cloud Storage, Performance Monitoringなど） • https://firebase.google.com/docs/flutter/setup?hl=ja&platform=ios#available-plugins
16. Performance測定の応用3: Firebase performance monitoring概要 • Performance monitoring SDKをアプリに統合すると、performance 指標がロギングされる • Flutter アプリの場合、デフォルトでアプリの開始時間などライフサイクルに関連するデー タ、HTTP/Sネットワークリクエスト（現状Flutterアプリでは画面ごとのレンダリングモ ニタリングは行えない） • 特定コードのカスタム監視が追加可能： • 画像読み込みやDBクエリなど特定処理の時間測定 • アプリバージョン、国、デバイスなどに加え、カスタム属性（ユーザプロパティ、 ゲームレベルなど）を追加可能 • performance関連カスタムメトリック（キャッシュのヒットとミスの数、UIが応答し なくなった回数など）を作成可能 • 特定ネットワークリクエストの監視が追加可能 • Performanceダッシュボードで表示、フィルタリング https://firebase.google.com/docs/perf-mon https://firebase.google.com/docs/perf-mon/flutter/get-started https://firebase.google.com/docs/perf-mon/custom-code-traces?platform=flutter https://firebase.google.com/docs/perf-mon/custom-network-traces?platform=flutter
17. Performance測定の応用3: Firebase performance monitoringによる収集データの利用 • 属性を使用してperformanceデータを調査（BigQueryにExportして 分析することも可能） • コンソールでperformance問題を追跡（トレースやリクエスト数の 増加が事前定義の閾値を超えたら報告） • アプリのperformanceを低下させるコード変更のアラート設定 • アプリのperformanceを低下させるネットワークリクエストのアラ ート設定 https://firebase.google.com/docs/perf-mon https://firebase.google.com/docs/perf-mon/flutter/get-started https://firebase.google.com/docs/perf-mon/custom-code-traces?platform=flutter
18. まとめ • Flutterアプリのperformance測定について、開発、テスト、その後 の運用フェーズでの利用例を含めてご紹介しました。 • Flutterアプリ/サービス構築検討時にお役にたてれば幸いです。
19. 19 FutureCon 2022 FlutterアプリのPerformance測定