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
250
Voicyの生放送リスナー画面で パフォーマンスチューニングした話
numaMyk
November 14, 2023
Tweet
Share
More Decks by numaMyk
See All by numaMyk
人の声を可視化する
miyuki2203
0
1.4k
開発用アプリで課金テストするためにやること
miyuki2203
0
3.8k
Other Decks in Programming
See All in Programming
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
200
BQ+dbt+Lookerを用いた、月間800億件以上の広告リクエストに対するデータモデリング
hanon52_
4
990
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
2.7k
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
240
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
最高の構文木の設計 2024年版
yui_knk
7
2.4k
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
100
マルチモジュールにおけるテスト最適化
fxwx23
0
110
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
940
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
120
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
550
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Writing Fast Ruby
sferik
623
60k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
How STYLIGHT went responsive
nonsquared
93
5.1k
The Mythical Team-Month
searls
218
43k
The Language of Interfaces
destraynor
153
23k
A Tale of Four Properties
chriscoyier
155
22k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
122
18k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Atom: Resistance is Futile
akmur
261
25k
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.