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
340
Voicyの生放送リスナー画面で パフォーマンスチューニングした話
numaMyk
November 14, 2023
Tweet
Share
More Decks by numaMyk
See All by numaMyk
人の声を可視化する
miyuki2203
0
1.7k
開発用アプリで課金テストするためにやること
miyuki2203
0
4.6k
Other Decks in Programming
See All in Programming
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
180
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
180
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
200
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
130
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
180
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
120
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Being A Developer After 40
akosma
90
590k
Designing for humans not robots
tammielis
253
25k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Bash Introduction
62gerente
613
210k
Become a Pro
speakerdeck
PRO
29
5.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Unsuck your backbone
ammeep
671
58k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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.