Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Voicyの生放送リスナー画面で パフォーマンスチューニングした話
Search
numaMyk
November 14, 2023
Programming
0
350
Voicyの生放送リスナー画面で パフォーマンスチューニングした話
numaMyk
November 14, 2023
Tweet
Share
More Decks by numaMyk
See All by numaMyk
人の声を可視化する
miyuki2203
0
1.7k
開発用アプリで課金テストするためにやること
miyuki2203
0
4.7k
Other Decks in Programming
See All in Programming
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
210
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2k
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
RDoc meets YARD
okuramasafumi
4
170
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
480
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
Testing Trophyは叫ばない
toms74209200
0
840
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
300
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.2k
Rancher と Terraform
fufuhu
2
240
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
290
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Practical Orchestrator
shlominoach
190
11k
Thoughts on Productivity
jonyablonski
70
4.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
Agile that works and the tools we love
rasmusluckow
330
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Designing for Performance
lara
610
69k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Transcript
Voicyの生放送リスナー画面で パフォーマンスチューニングした話 #potatotips 85
自己紹介 ★ ぬまさん(Miyuki Onuma) ★
DevPhoneというAndroidで初めての端末 がリリースされる前からAndroidデベロッパー
©2023 Voicy, Inc. プロジェクト背景と課題 • 背景 ◦ 生放送の参加人数が一定数(1000人程)を超え てくるとリスナー一覧の描画レンダリングが重く操 作が困難になっていた
• 課題 ◦ 一度に参加人数を取得しUIへ反映していたが、 一定数を超えると描画レンダリングに負荷がか かって、カクツキやフリーズが発生していた。 • 目的 ◦ リスナー一覧の体験品質を向上したい。
©2023 Voicy, Inc. ページングとは 1. キーを追跡する
2. 正しい次のページをリクエストする 3. 重複したリクエストを防ぐ https://youtu.be/1cwqGOku2a4
©2023 Voicy, Inc. Codelabでコードを書きながら 学ぶこともできます Android ページングの高度な Codelab https://developer.android.com/codelabs/android-paging?hl=ja#0
©2023 Voicy, Inc. • これまでの実装 ◦ 参加リスナーのuserId一覧をパラメータに、サーバーよりユーザー情報を定期 取得し、並び替えを行いリスナー一覧に反映していた。 •
描画が重くなった要因 ◦ 一度に参加人数を取得しUIへ反映していたが、一定数を超えると描画レンダリ ングに負荷がかかっていた。
©2023 Voicy, Inc. なぜ描画が重いのか? ページング機能の中にRemoteMediatorというクラスがあります。RemoteMediatorは [Serverから取得しDB保存] 後、並び順に手を加えることなく表示する場合有効 →Serverから取得後、並び替えが必要なケースでは描画のたびに差し込み処理が発生 並び替えにはアニメーションが伴う
©2023 Voicy, Inc. 端末の開発オプション機能でレンダリングの可視化することができま す 1. 端末で [設定] に移動し、[開発者向けオプション] をタップします。
2. [監視] で、[GPU レンダリングのプロファイル作成] または [HWUI レンダリングのプロファイル作成] を選択します 3. [GPU レンダリングのプロファイル作成] ダイアログで [バーとして 画面に表示] を選択し、デバイスの画面にグラフをオーバーレイし ます。 4. プロファイリングするアプリを開きます。 レンダリング速度の検査
©2023 Voicy, Inc. レンダリング速度の検査 緑部分が描画レンダリング処理に時間をかけすぎて いる可能性があります。 https://developer.android.com/topic/ performance/rendering/inspect-gpu- rendering?hl=ja
©2023 Voicy, Inc. BEから ページングで リスナー一覧 取得し DBへ格納 クエリで リスナー全件
表示 これまでの実装 Aグループのリスナー Bグループのリスナー Cグループのリスナー ユーザーグループご とに並び替え
©2023 Voicy, Inc. BEから ページングで リスナー一覧 取得 対策
クエリ Aグループのリスナー クエリ Bグループのリスナー クエリ Cグループのリスナー Aグループのリスナー Bグループのリスナー Cグループのリスナー ConcatAdapterで3種のAdapterを 結合して表示
©2023 Voicy, Inc. 結論 • RemoteMediatorを排除しサーバー取得→DB保存→UI反映の一気通貫処理をやめ、 サーバー取得→DB保存とUI更新処理を切り分けることで負荷の高い並び替えと並び替 えアニメーションを最適化
©2023 Voicy, Inc.
fin.