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
360
Voicyの生放送リスナー画面で パフォーマンスチューニングした話
numaMyk
November 14, 2023
Tweet
Share
More Decks by numaMyk
See All by numaMyk
人の声を可視化する
miyuki2203
0
1.8k
開発用アプリで課金テストするためにやること
miyuki2203
0
4.7k
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
480
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
チームの境界をブチ抜いていけ
tokai235
0
220
CSC305 Lecture 10
javiergs
PRO
0
250
Go言語はstack overflowの夢を見るか?
logica0419
0
570
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.5k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
290
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
370
CSC509 Lecture 08
javiergs
PRO
0
250
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
Featured
See All Featured
Balancing Empowerment & Direction
lara
5
700
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
A better future with KSS
kneath
239
18k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Code Reviewing Like a Champion
maltzj
526
40k
Faster Mobile Websites
deanohume
310
31k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making Projects Easy
brettharned
120
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
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.