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
dynamic!
moro
10
7.2k
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
430
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
8
1.6k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
150
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
理論と実務のギャップを超える
eycjur
0
120
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
200
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
140
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
800
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Producing Creativity
orderedlist
PRO
347
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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.