Voicyの生放送リスナー画面で パフォーマンスチューニングした話

Transcript

1. 
 Voicyの生放送リスナー画面で
 パフォーマンスチューニングした話
 #potatotips 85

2. 
 
 
 自己紹介 
 
 ★ ぬまさん（Miyuki Onuma）
 ★ DevPhoneというAndroidで初めての端末
 がリリースされる前からAndroidデベロッパー
 

3. ©2023 Voicy, Inc. プロジェクト背景と課題
 • 背景
 ◦ 生放送の参加人数が一定数（1000人程）を超え てくるとリスナー一覧の描画レンダリングが重く操 作が困難になっていた
 • 課題
 ◦ 一度に参加人数を取得しUIへ反映していたが、 一定数を超えると描画レンダリングに負荷がか かって、カクツキやフリーズが発生していた。
 • 目的
 ◦ リスナー一覧の体験品質を向上したい。

4. ©2023 Voicy, Inc. 
 
 
 ページングとは
 
 1. キーを追跡する 2. 正しい次のページをリクエストする 3. 重複したリクエストを防ぐ https://youtu.be/1cwqGOku2a4
5. ©2023 Voicy, Inc. Codelabでコードを書きながら
 学ぶこともできます
 Android ページングの高度な Codelab
 https://developer.android.com/codelabs/android-paging?hl=ja#0

6. ©2023 Voicy, Inc. • これまでの実装
 ◦ 参加リスナーのuserId一覧をパラメータに、サーバーよりユーザー情報を定期 取得し、並び替えを行いリスナー一覧に反映していた。
 
 • 描画が重くなった要因
 ◦ 一度に参加人数を取得しUIへ反映していたが、一定数を超えると描画レンダリ ングに負荷がかかっていた。

7. ©2023 Voicy, Inc. なぜ描画が重いのか？
 ページング機能の中にRemoteMediatorというクラスがあります。RemoteMediatorは [Serverから取得しDB保存] 後、並び順に手を加えることなく表示する場合有効
 →Serverから取得後、並び替えが必要なケースでは描画のたびに差し込み処理が発生
 並び替えにはアニメーションが伴う

8. ©2023 Voicy, Inc. 端末の開発オプション機能でレンダリングの可視化することができま す 1. 端末で [設定] に移動し、[開発者向けオプション] をタップします。 2. [監視] で、[GPU レンダリングのプロファイル作成] または [HWUI レンダリングのプロファイル作成] を選択します 3. [GPU レンダリングのプロファイル作成] ダイアログで [バーとして 画面に表示] を選択し、デバイスの画面にグラフをオーバーレイし ます。 4. プロファイリングするアプリを開きます。
 
 
 レンダリング速度の検査

9. ©2023 Voicy, Inc. レンダリング速度の検査
 緑部分が描画レンダリング処理に時間をかけすぎて いる可能性があります。 https://developer.android.com/topic/ performance/rendering/inspect-gpu- rendering?hl=ja
10. ©2023 Voicy, Inc. BEから ページングで リスナー一覧 取得し DBへ格納 クエリで リスナー全件 表示 これまでの実装
 
 
 Aグループのリスナー Bグループのリスナー Cグループのリスナー ユーザーグループご とに並び替え
11. ©2023 Voicy, Inc. BEから ページングで リスナー一覧 取得 対策
 
 
 クエリ Aグループのリスナー クエリ Bグループのリスナー クエリ Cグループのリスナー Aグループのリスナー Bグループのリスナー Cグループのリスナー ConcatAdapterで3種のAdapterを 結合して表示
12. ©2023 Voicy, Inc. 結論
 
 • RemoteMediatorを排除しサーバー取得→DB保存→UI反映の一気通貫処理をやめ、 サーバー取得→DB保存とUI更新処理を切り分けることで負荷の高い並び替えと並び替 えアニメーションを最適化
 

13. ©2023 Voicy, Inc.
14. fin.