Flutterアプリにおけるパフォーマンス計測と改善【DeNA TechCon 2022】

2022/1/17に、音声ライブ配信アプリVoice PocochaがiOS向けにリリースされました。

こちらのアプリはPocochaを参考につつ、Flutterを用いて開発されています。

音声やアイテムエフェクト、ネットワークといった多くの処理が同時に発生するVoice Pocochaアプリ開発において、パフォーマンスの改善は欠かせません。

今回のTechConでは、高いパフォーマンスが求められるFlutterアプリ開発の中で、どのようにパフォーマンス計測・改善に取り組んでいるのかをご紹介します。

また、そこで得たFlutterアプリ開発における一般的なパフォーマンスの最適化方法や、もう一歩だけ深いレベルでのパフォーマンス改善についてもお話しさせて頂きます。

◆ You Tube
https://youtu.be/4f_aaK_HrZs

◆ You Tube チャンネル登録はこちら↓
https://youtube.com/c/denatech?sub_confirmation=1

◆ Twitter
https://twitter.com/DeNAxTech

◆ DeNA Engineering
https://engineering.dena.com/

◆ DeNA Engineer Blog
https://engineering.dena.com/blog/

◆ DeNA TechCon 2022 公式サイト
https://techcon2022.dena.dev/spring/

Transcript

1. Flutterアプリの パフォーマンス計測と改善 砂賀 開晴
2. 自己紹介 砂賀開晴（ぎもちん） • ライブストリーミング事業本部新規戦略室 • 21新卒 経歴 • 2020~2021 日比谷音楽祭 Flutterアプリ開発 • 2021~ Voice Pococha Flutterアプリ開発
3. 注意点
4. 注意点 • 「アプリの動作速度や発熱度合い、リソース使用率」をパフォーマンスと呼んでいます
5. 注意点 • 「アプリの動作速度や発熱度合い、リソース使用率」をパフォーマンスと呼んでいます • iOS寄りの話が含まれます
6. 注意点 • 「アプリの動作速度や発熱度合い、リソース使用率」をパフォーマンスと呼んでいます • iOS寄りの話が含まれます • Flutterを知っている/開発経験がある方を対象としています
7. TABLE CONTENTS 1. VoicePocochaとは 3. パフォーマンス改善 1. 汎用的なアプローチ 2. 特殊なアプローチ 1. 負荷ツールの作成 2. パフォーマンスの計測 2. パフォーマンス計測 1. パフォーマンス計測の背景
8. 1. Voice Pocochaとは
9. 1. Voice Pocochaとは 2022/1/17 リリース
10. 1. Voice Pocochaとは 2022/1/17 リリース 「声でつながるライブ配信アプリ」 誰でも無料で、音声ライブ配信・視聴を行える
11. 1. Voice Pocochaとは 2022/1/17 リリース 「声でつながるライブ配信アプリ」 誰でも無料で、音声ライブ配信・視聴を行える Flutterを用いて開発
12. 1. Voice Pocochaとは 配信と視聴について
13. 1. Voice Pocochaとは 配信と視聴について • 音声配信と再生
14. 1. Voice Pocochaとは 配信と視聴について • 音声配信と再生 • アイテム
15. 1. Voice Pocochaとは 配信と視聴について • 音声配信と再生 • アイテム • コメント
16. 1. パフォーマンス計測の背景
17. 1. パフォーマンス計測の背景 Voice Pocochaでは、多くのI/O処理が同時に発生する
18. 1. パフォーマンス計測の背景 Voice Pocochaでは、多くのI/O処理が同時に発生する • ネットワーク • オーディオ • アイテムエフェクト • ディスクアクセス • etc
19. 1. パフォーマンス計測の背景 Voice Pocochaでは、多くのI/O処理が同時に発生する • ネットワーク • オーディオ • アイテムエフェクト • ディスクアクセス • etc 配信・視聴時の発熱・バッテリー消費が顕著に
20. 1. パフォーマンス計測の背景 パフォーマンス改善が必要！！
21. 1. パフォーマンス計測の背景 しかし
22. 1. パフォーマンス計測の背景 どう改善する？
23. 1. パフォーマンス計測の背景 パフォーマンスを計測しよう！
24. 2. パフォーマンス計測 パフォーマンス計測時の課題
25. 2. パフォーマンス計測 パフォーマンス計測時の課題 負荷の生成方法
26. 2. パフォーマンス計測 パフォーマンス計測時の課題 負荷の生成方法 大勢のリスナーが必要
27. 2. パフォーマンス計測 パフォーマンス計測時の課題 負荷の生成方法 大勢のリスナーが必要 → 課題1：リスナーの生成ツールが必要
28. 2. パフォーマンス計測 パフォーマンス計測時の課題 負荷の生成方法 大勢のリスナーが必要 → 課題1：リスナーの生成ツールが必要 負荷の特定方法
29. 2. パフォーマンス計測 パフォーマンス計測時の課題 負荷の生成方法 大勢のリスナーが必要 → 課題1：リスナーの生成ツールが必要 負荷の特定方法 どこの負荷が高いのか、調べる必要がある
30. 2. パフォーマンス計測 パフォーマンス計測時の課題 負荷の生成方法 大勢のリスナーが必要 → 課題1：リスナーの生成ツールが必要 負荷の特定方法 どこの負荷が高いのか、調べる必要がある → 課題2：各機能の出し分けツールが必要
31. 負荷生成・特定ツールを作るぞ！ 2. パフォーマンス計測
32. 1. 負荷ツールの作成 課題1：リスナーの生成ツールが必要
33. 1. 負荷ツールの作成 課題1：リスナーの生成ツールが必要 → 負荷生成ツール「bigbang」を内製して解決
34. 1. 負荷ツールの作成 課題1：リスナーの生成ツールが必要 → 負荷生成ツール「bigbang」を内製して解決 APIを使って、配信枠のシミュレーション
35. 1. 負荷ツールの作成 課題1：リスナーの生成ツールが必要 → 負荷生成ツール「bigbang」を内製して解決 APIを使って、配信枠のシミュレーション • Pocochaのデータからパラメータを決定
36. 1. 負荷ツールの作成 課題1：リスナーの生成ツールが必要 → 負荷生成ツール「bigbang」を内製して解決 APIを使って、配信枠のシミュレーション • Pocochaのデータからパラメータを決定 • 負荷生成用のサーバーも準備
37. 1. 負荷ツールの作成 課題1：リスナーの生成ツールが必要 → 負荷生成ツール「bigbang」を内製して解決 APIを使って、配信枠のシミュレーション • Pocochaのデータからパラメータを決定 • 負荷生成用のサーバーも準備 負荷生成に成功 🎉
38. 1. 負荷ツールの作成 課題2：各機能の出し分けツールが必要
39. 1. 負荷ツールの作成 課題2：各機能の出し分けツールが必要 アイテム？ 音声？ 描 画 ？
40. 1. 負荷ツールの作成 課題2：各機能の出し分けツールが必要 → 負荷要因をON/OFFできる機能を追加 アイテム？ 音声？ 描 画 ？
41. 1. 負荷ツールの作成 課題2：各機能の出し分けツールが必要 → 負荷要因をON/OFFできる機能を追加 なるほど、 音声処理が重たいな High Low 負荷 音声 アイテムエフェクト Flutter描画 API通信 …
42. 1. 負荷ツールの作成
43. 1. 負荷ツールの作成 負荷生成
44. 1. 負荷ツールの作成 負荷生成 負荷特定
45. 1. 負荷ツールの作成 パフォーマンス計測の課題をクリア 🎉 負荷生成 負荷特定
46. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？
47. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ Instruments
48. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ Instruments iOS標準のモニタリングツール
49. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ Instruments iOS標準のモニタリングツール • 発熱状態
50. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ Instruments iOS標準のモニタリングツール • 発熱状態 • CPU使用率
51. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ Instruments iOS標準のモニタリングツール • 発熱状態 • CPU使用率 • 各処理時間の調査 ◦ signposts
52. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ DevTools
53. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ DevTools Flutter用のツール
54. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ DevTools Flutter用のツール • FPS監視
55. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ DevTools Flutter用のツール • FPS監視 • Widgetリビルドの調査
56. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ DevTools Flutter用のツール • FPS監視 • Widgetリビルドの調査 • コード最適化の確認
57. 2. パフォーマンスの計測 どうやってパフォーマンスを計測する？ DevTools Flutter用のツール • FPS監視 • Widgetリビルドの調査 • コード最適化の確認 • メモリ情報
58. 2. パフォーマンスの計測
59. 2. パフォーマンスの計測 QAチームと協力し、定期的に計測
60. 2. パフォーマンスの計測 QAチームと協力し、定期的に計測 InstrumentsにてCPU使用率と発熱を監視
61. 2. パフォーマンスの計測 パフォーマンス計測に成功 🎉
62. 3. パフォーマンス改善
63. 3. パフォーマンス改善 パフォーマンスの計測ができた！ あとはどう改善する？
64. 3. パフォーマンス改善 パフォーマンスの計測ができた！ あとはどう改善する？ 汎用的なアプローチ 1. constの使用 2. Widgetの代用 3. リビルド範囲の縮小
65. 3. パフォーマンス改善 パフォーマンスの計測ができた！ あとはどう改善する？ 汎用的なアプローチ 1. constの使用 2. Widgetの代用 3. リビルド範囲の縮小 特殊なアプローチ 1. Isolateの分割 2. Flutterのアップデート
66. 1. constの使用
67. 1. constの使用 constを使うメリット
68. 1. constの使用 constを使うメリット メモリ使用量削減
69. 1. constの使用 constを使うメリット メモリ使用量削減 constインスタンスは使いまわされる
70. 1. constの使用 constを使うメリット メモリ使用量削減 constインスタンスは使いまわされる
71. 1. constの使用 constを使うメリット メモリ使用量削減 constインスタンスは使いまわされる
72. 1. constの使用 constを使うメリット メモリ使用量削減 constインスタンスは使いまわされる
73. 1. constの使用 constを使うメリット メモリ使用量削減 constインスタンスは使いまわされる 48MB > 16B
74. 1. constの使用 constを使うメリット メモリ使用量削減 constインスタンスは使いまわされる → 積極的にconst化する
75. 2. Widgetの代用
76. 2. Widgetの代用 Widgetには、処理が重たいものがある
77. 2. Widgetの代用 Widgetには、処理が重たいものがある → 別のWidgetで代用できないか検討する
78. 2. Widgetの代用 代用できるWidget
79. 2. Widgetの代用 代用できるWidget Opacity
80. 2. Widgetの代用 代用できるWidget Opacity
81. 2. Widgetの代用 代用できるWidget Opacity → Color.withOpacity
82. 2. Widgetの代用 代用できるWidget Clip系のWidget
83. 2. Widgetの代用 代用できるWidget Clip系のWidget → DecoratedBox BoxDecoration • borderRadius • shape
84. 3. リビルド範囲の縮小
85. 3. リビルド範囲の縮小 Stateful Widgetの移動
86. 3. リビルド範囲の縮小 Stateful Widgetの移動 • Widgetツリーの末端へ追いやる
87. 3. リビルド範囲の縮小 Stateful Widgetの移動 • Widgetツリーの末端へ追いやる
88. 3. リビルド範囲の縮小 Stateful Widgetの移動 • Widgetツリーの末端へ追いやる
89. 3. リビルド範囲の縮小 Stateful Widgetの移動 • Widgetツリーの末端へ追いやる • InheritedWidgetで解決する
90. 3. リビルド範囲の縮小 Stateful Widgetの移動 • Widgetツリーの末端へ追いやる • InheritedWidgetで解決する InheritedWidgetの使用 特定のWidgetだけリビルドできる
91. 3. リビルド範囲の縮小 Stateful Widgetの移動 • Widgetツリーの末端へ追いやる • InheritedWidgetで解決する InheritedWidgetの使用 特定のWidgetだけリビルドできる • MediaQuery.of(context), Theme.of(context)
92. 3. リビルド範囲の縮小 Stateful Widgetの移動 • Widgetツリーの末端へ追いやる • InheritedWidgetで解決する InheritedWidgetの使用 特定のWidgetだけリビルドできる • MediaQuery.of(context), Theme.of(context) • provider, riverpod
93. 3. パフォーマンス改善 汎用的なアプローチ✅ 1. constの使用 2. Widgetの代用 3. リビルド範囲の縮小
94. 3. パフォーマンス改善 汎用的なアプローチ✅ 1. constの使用 2. Widgetの代用 3. リビルド範囲の縮小 特殊なアプローチ 1. Isolateの分割 2. Flutterのアップデート
95. 1. Isolateの分割
96. 1. Isolateの分割 Isolateの分割によって効率よくCPUコアを使用できる
97. 1. Isolateの分割 Isolateの分割によって効率よくCPUコアを使用できる • 描画のカクツキ減少
98. 1. Isolateの分割 Isolateの分割によって効率よくCPUコアを使用できる • 描画のカクツキ減少 • 処理時間の短縮
99. 1. Isolateの分割 Isolateの分割によって効率よくCPUコアを使用できる • 描画のカクツキ減少 • 処理時間の短縮 活用できる場面は限られる
100. 1. Isolateの分割 Isolateの分割によって効率よくCPUコアを使用できる • 描画のカクツキ減少 • 処理時間の短縮 活用できる場面は限られる • UI処理 ❌
101. 1. Isolateの分割 Isolateの分割によって効率よくCPUコアを使用できる • 描画のカクツキ減少 • 処理時間の短縮 活用できる場面は限られる • UI処理 ❌ • ネットワーク ⭕ • ファイル操作 ⭕
102. 1. Isolateの分割 Isolateの分割によって効率よくCPUコアを使用できる • 描画のカクツキ減少 • 処理時間の短縮 活用できる場面は限られる • UI処理 ❌ • ネットワーク ⭕ • ファイル操作 ⭕ → エンコード、デコード、圧縮、解凍など
103. 1. Isolateの分割 高性能コアと高効率コア
104. 1. Isolateの分割 高性能コアと高効率コア 高性能コア：性能が高いが、電力消費も大きい
105. 1. Isolateの分割 高性能コアと高効率コア 高性能コア：性能が高いが、電力消費も大きい 高効率コア：性能は劣るが、電力消費が少ない
106. 1. Isolateの分割 高性能コアと高効率コア 高性能コア：性能が高いが、電力消費も大きい 高効率コア：性能は劣るが、電力消費が少ない → 1つのIsolateだと、高性能コアを占有する可能性がある
107. 1. Isolateの分割 高性能コアと高効率コア 高性能コア：性能が高いが、電力消費も大きい 高効率コア：性能は劣るが、電力消費が少ない → 1つのIsolateだと、高性能コアを占有する可能性がある 高性能コアを使いすぎると・・・
108. 1. Isolateの分割 高性能コアと高効率コア 高性能コア：性能が高いが、電力消費も大きい 高効率コア：性能は劣るが、電力消費が少ない → 1つのIsolateだと、高性能コアを占有する可能性がある 高性能コアを使いすぎると・・・ • 発熱 ◦ サーマルスロットリング
109. 1. Isolateの分割 高性能コアと高効率コア 高性能コア：性能が高いが、電力消費も大きい 高効率コア：性能は劣るが、電力消費が少ない → 1つのIsolateだと、高性能コアを占有する可能性がある 高性能コアを使いすぎると・・・ • 発熱 ◦ サーマルスロットリング • バッテリー消費
110. 1. Isolateの分割 高性能コアと高効率コア 高性能コア：性能が高いが、電力消費も大きい 高効率コア：性能は劣るが、電力消費が少ない → 1つのIsolateだと、高性能コアを占有する可能性がある 高性能コアを使いすぎると・・・ • 発熱 ◦ サーマルスロットリング • バッテリー消費 → Isolateを分け、高性能コアの占有を減らす
111. 1. Isolateの分割 複数Isolateで、計1億個の配列要素を生成 配列
112. 1. Isolateの分割 複数Isolateで、計1億個の配列要素を生成 配列 Isolate A
113. 1. Isolateの分割 複数Isolateで、計1億個の配列要素を生成 配列 Isolate A Isolate B
114. 1. Isolateの分割 1 Isolate 複数Isolateで、計1億個の配列要素を生成 高性能コア 高効率コア
115. 1. Isolateの分割 1 Isolate 8 Isolates 複数Isolateで、計1億個の配列要素を生成
116. 1. Isolateの分割 1 Isolate 8 Isolates 複数Isolateで、計1億個の配列要素を生成 2.4s 1.5s
117. 1. Isolateの分割 1 Isolate 8 Isolates 複数Isolateで、計1億個の配列要素を生成 2.4s 1.5s → 処理時間短縮、高性能コアの使用率低下
118. 2. Flutterのアップデート Flutterはパフォーマンス改善のアップデートが多い
119. 2. Flutterのアップデート Flutterはパフォーマンス改善のアップデートが多い 2.8 • RAM使用量の削減 • 起動速度の改善
120. 2. Flutterのアップデート Flutterはパフォーマンス改善のアップデートが多い 2.8 • RAM使用量の削減 • 起動速度の改善 2.5 • GC回数の削減 • Platform Channelの改善 などなど・・・
121. 2. Flutterのアップデート Flutterはパフォーマンス改善のアップデートが多い 2.8 • RAM使用量の削減 • 起動速度の改善 2.5 • GC回数の削減 • Platform Channelの改善 などなど・・・ → Flutterを更新するだけで、パフォーマンス改善
122. 3. パフォーマンス改善 汎用的なアプローチ 1. constの使用 2. Widgetの代用 3. リビルド範囲の縮小 特殊なアプローチ 1. Isolateの分割 2. Flutterのアップデート
123. 3. パフォーマンス改善 汎用的なアプローチ 1. constの使用 2. Widgetの代用 3. リビルド範囲の縮小 特殊なアプローチ 1. Isolateの分割 2. Flutterのアップデート → 開発初期から意識して、パフォーマンスの良いアプリ作り
124. 最後に・・・
125. Flutterはデフォルトでパフォーマンスが良いです。 過度にパフォーマンスを気にする必要性はありません。