Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Voicyの生放送リスナー画面で パフォーマンスチューニングした話

numaMyk
November 14, 2023

Voicyの生放送リスナー画面で パフォーマンスチューニングした話

numaMyk

November 14, 2023
Tweet

More Decks by numaMyk

Other Decks in Programming

Transcript


  1. Voicyの生放送リスナー画面で

    パフォーマンスチューニングした話

    #potatotips 85


    View full-size slide




  2. 自己紹介 


    ★ ぬまさん(Miyuki Onuma)

    ★ DevPhoneというAndroidで初めての端末

    がリリースされる前からAndroidデベロッパー


    View full-size slide

  3. ©2023 Voicy, Inc.
    プロジェクト背景と課題

    ● 背景

    ○ 生放送の参加人数が一定数(1000人程)を超え
    てくるとリスナー一覧の描画レンダリングが重く操
    作が困難になっていた

    ● 課題

    ○ 一度に参加人数を取得しUIへ反映していたが、
    一定数を超えると描画レンダリングに負荷がか
    かって、カクツキやフリーズが発生していた。

    ● 目的

    ○ リスナー一覧の体験品質を向上したい。


    View full-size slide

  4. ©2023 Voicy, Inc.



    ページングとは


    1. キーを追跡する
    2. 正しい次のページをリクエストする
    3. 重複したリクエストを防ぐ
    https://youtu.be/1cwqGOku2a4

    View full-size slide

  5. ©2023 Voicy, Inc.
    Codelabでコードを書きながら

    学ぶこともできます

    Android ページングの高度な Codelab

    https://developer.android.com/codelabs/android-paging?hl=ja#0


    View full-size slide

  6. ©2023 Voicy, Inc.
    ● これまでの実装

    ○ 参加リスナーのuserId一覧をパラメータに、サーバーよりユーザー情報を定期
    取得し、並び替えを行いリスナー一覧に反映していた。


    ● 描画が重くなった要因

    ○ 一度に参加人数を取得しUIへ反映していたが、一定数を超えると描画レンダリ
    ングに負荷がかかっていた。


    View full-size slide

  7. ©2023 Voicy, Inc.
    なぜ描画が重いのか?

    ページング機能の中にRemoteMediatorというクラスがあります。RemoteMediatorは
    [Serverから取得しDB保存] 後、並び順に手を加えることなく表示する場合有効

    →Serverから取得後、並び替えが必要なケースでは描画のたびに差し込み処理が発生

    並び替えにはアニメーションが伴う


    View full-size slide

  8. ©2023 Voicy, Inc.
    端末の開発オプション機能でレンダリングの可視化することができま

    1. 端末で [設定] に移動し、[開発者向けオプション] をタップします。
    2. [監視] で、[GPU レンダリングのプロファイル作成] または [HWUI
    レンダリングのプロファイル作成] を選択します
    3. [GPU レンダリングのプロファイル作成] ダイアログで [バーとして
    画面に表示] を選択し、デバイスの画面にグラフをオーバーレイし
    ます。
    4. プロファイリングするアプリを開きます。



    レンダリング速度の検査


    View full-size slide

  9. ©2023 Voicy, Inc.
    レンダリング速度の検査

    緑部分が描画レンダリング処理に時間をかけすぎて
    いる可能性があります。
    https://developer.android.com/topic/
    performance/rendering/inspect-gpu-
    rendering?hl=ja

    View full-size slide

  10. ©2023 Voicy, Inc.
    BEから
    ページングで
    リスナー一覧
    取得し
    DBへ格納
    クエリで
    リスナー全件
    表示
    これまでの実装



    Aグループのリスナー
    Bグループのリスナー
    Cグループのリスナー
    ユーザーグループご
    とに並び替え

    View full-size slide

  11. ©2023 Voicy, Inc.
    BEから
    ページングで
    リスナー一覧
    取得
    対策



    クエリ
    Aグループのリスナー
    クエリ
    Bグループのリスナー
    クエリ
    Cグループのリスナー
    Aグループのリスナー
    Bグループのリスナー
    Cグループのリスナー
    ConcatAdapterで3種のAdapterを
    結合して表示

    View full-size slide

  12. ©2023 Voicy, Inc.
    結論


    ● RemoteMediatorを排除しサーバー取得→DB保存→UI反映の一気通貫処理をやめ、
    サーバー取得→DB保存とUI更新処理を切り分けることで負荷の高い並び替えと並び替
    えアニメーションを最適化


    View full-size slide

  13. ©2023 Voicy, Inc.

    View full-size slide