Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FutureCon 2022 FlutterアプリのPerformance測定

FutureCon 2022 FlutterアプリのPerformance測定

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

4affdb6a9878e509da7ca41a87051352?s=128

h.fujita

July 21, 2022
Tweet

Other Decks in Programming

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 を4カテゴリに 分けて管理:

    “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 • #1)タイムラインにFrameごとの処理時間が表示 される。 • #2)UIイベントは、実装Dartコードを直接反映し ていて、Widgetレベルで実行イベントを確認でき る。*Enhance

    Tracing: Widget Tree, RenderObjectのトレー スをONにする。 • #3)Raster(GPU)イベント。UIイベントから作成 される。 • #4)「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. 1)Memory 使用量統計とイベントのグラフ DevToolsによる性能測定: Memory view 2)Heap Memory上のインスタンスを分析 ・ Analysisタブ: スナップショット時の、メモリ

    上のインスタンス数と使用サイズ(bytes) を表示 ・ Allocationsタブ: 選択するClassについてstack traceとallocationを監視 ・ Dart VM からのメモリ統計 ・ 各種イベント(Snapshot, GC, アプリのユー ザーイベント)
  9. 1)CPU Flame chart 「Record」した範囲の各処理のCPU消費 時間を可視化。 トップダウンで呼び出し処理を表示。 DevToolsによる性能測定: CPU profiling https://docs.flutter.dev/development/tools/devtools/

    cpu-profiler 3)Bottom up 呼出し処理の消費時間を、ボトムアップで 表示. 2)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測定