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
Jetpack Composeの スクロールパフォーマンス改善を検証した話
Search
umsys
March 05, 2024
Programming
0
600
Jetpack Composeの スクロールパフォーマンス改善を検証した話
umsys
March 05, 2024
Tweet
Share
More Decks by umsys
See All by umsys
Gemini APIを使ってみよう@potatotips#86
umsys
0
4.6k
ZOZOTOWNアプリでのフルCompos実装取り組み事例
umsys
0
1.1k
Other Decks in Programming
See All in Programming
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
180
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
型で語るカタ
irof
0
130
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
550
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Porting a visionOS App to Android XR
akkeylab
0
480
Team operations that are not burdened by SRE
kazatohiei
1
310
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
200
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
170
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Agile that works and the tools we love
rasmusluckow
329
21k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Become a Pro
speakerdeck
PRO
29
5.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Transcript
Jetpack Composeの スクロールパフォーマンス改善を検証 した話 2024/03/05 Mobile勉強会 Wantedly × チームラボ ×
Sansan #13 内山雅由(@umsys_)
自己紹介 株式会社ZOZO X: @umsys_ Bluesky: @umsys.bsky.social GitHub: https://github.com/umsys
内山 雅由 • 車の運転とゲームとハリネズミが大好きです。 • 最近はポケモンカードにハマっています。 • 月曜日に治療した虫歯が神経に近かったため、 半年くらい40℃前後のものしか飲食できなくなりました。 つらいです。
Jetpack Compose導入において (個人的な)最大のメリット
Lazy コンポーネント! • LazyColumn • LazyRow • LazyVerticalGrid • LazyVerticalStaggeredGrid(experimental)
などなど
便利なLazyコンポーネントですが 各所で不満の声も。 その一つが。。。
スクロールパフォーマンスに難がある 特に、画像表示と組み合わせるとカクつきが目立つ話は 各所で話が上がっていました。 パラメータを調整したり、遅延読み込みを実装したりなど、 皆様苦労されている様子です。
朗報です! スクロールパフォーマンス改善を謳った バージョンがリリースされました🎉
Compose 1.6.0 • 全体的にパフォーマンスが大幅に向上 • スクロール パフォーマンスが20% 向上(1.5.0から比較して) • 起動時間が12%
向上(1.5.0から比較して) • ほとんどのアプリでは最新バージョンにアップグレードするだけで OK • 他のコードを変更する必要はない 引用:https://android-developers.googleblog.com/2024/01/whats-new-in-jetpack-compose-january-24-release.html
Jetpack Composeの画像表示で よく使われているCoilも パフォーマンス改善を謳った バージョンがリリースされました🎉
Coil 2.6.0 • rememberAsyncImagePainter、AsyncImage、および SubcomposeAsyncImage を再起動およびスキップ可能に • コンポーザブルの引数のいずれかが変更されない限り、再コンポ ジションが回避され、パフォーマンスが向上 •
通常メインスレッドで発生する遅い初期化を修正 • などなど 引用:https://github.com/coil-kt/coil/blob/main/CHANGELOG.md#260---february-23-2024
ということで、 アップデート前後でそれぞれの パフォーマンスを比較しました。
検証環境 / 使用ツール • 検証端末:Pixel7(Android14) • メトリクス測定:Macrobenchmark ◦ N =
5 ◦ CompilationMode.DEFAULT ▪ GooglePlay経由でインストールした状態を再現 • JetpackCompose1.5.4 / 1.6.0、Coil2.5.0 / 2.6.0の 組み合わせでそれぞれ計測
検証環境 / 使用ツール パフォーマンス計測対象のUI
検証環境 / 使用ツール パフォーマンス計測対象のUI ビルド
検証環境 / 使用ツール Macrobenchmarkの テストケース 引用 :https://github.com/android/perfor mance-samples/blob/main/Macrob enchmarkSample/macrobenchmark /src/main/java/com/example/macr
obenchmark/benchmark/scroll/Scr ollBenchmark.kt
検証環境 / 使用ツール Macrobenchmarkの テストケース スクロールダウン×2、スクロールアップ×2を実行 スクロール速度:15000pic/sec(デフォルトの2倍) ※デフォルトのスクロール速度はちょっと遅かった
メトリクス • timeToInitialDisplayMs ◦ 初期表示までの時間 • frameDurationCpuMs ◦ UI スレッドと
Renderスレッドの両方でフレームの生成に CPU でかかった 時間。 • frameOverrunMs ◦ 指定されたフレームが期限を超過した時間。 ◦ 正の数値はフレーム落ちや目に見えるジャンクまたはスタッターを示します。 →すべての数値は低ければ低いほどパフォーマンスが高い 引用:https://developer.android.com/topic/performance/benchmarking/macrobenchmark-metrics?hl=ja
検証結果
グラフ作成:chatGPT 253.1 286.4 270.9 261.9 278.6 307.7 283.5 266.0 494.5
548.3 421.1 395.4
グラフ作成:chatGPT 253.1 286.4 270.9 261.9 278.6 307.7 283.5 266.0 494.5
548.3 421.1 395.4 リリースノート通り Coil 2.6.0によって 遅い初期化を修正がされている。
4.7 4.1 4.4 4.6 7.1 6.7 7.2 7.3 8.2 7.4
8.5 8.5 11.6 10.0 13.0 12.2
4.7 4.1 4.4 4.6 7.1 6.7 7.2 7.3 8.2 7.4
8.5 8.5 11.6 10.0 13.0 12.2 強いて言うなら、 Compose 1.6.0に上げただけの場合に パフォーマンスが少し向上している
-10.3 -10.5-10.6 -9.4 -3.8 -3.9 -3.9 -3.6 -3.4 -3.7 -3.2
-3.5 2.4 4.2 9.2 9.2
-10.3 -10.5-10.6 -9.4 -3.8 -3.9 -3.9 -3.6 -3.4 -3.7 -3.2
-3.5 2.4 4.2 9.2 9.2 Coil 2.6.0によって 遅い初期化を修正がされていたが、 P99においてフレームの期限超過時間が 上昇してしまっている。
メトリクス上において Compose1.6.0によって改善される 目を見張るような顕著な差は 見受けられなかった このままではお蔵入り
目視でカクつきが減っていることを 確信していたので、 ジャンクフレームの発生率に 注目して再度分析
Jetpack Compose 1.5.4
Jetpack Compose 1.6.0
ジャンクフレーム発生が 激減していました🎉 やったね!
まとめ • Compose 1.6.0に上げることでジャンクフレームが減る=ユーザー体験が良くなる • Coil 2.6.0に上げることで初期表示は速くなるが、フレーム期限超過時間のレイテンシが悪くなりそう • 目視確認は大切
ご清聴ありがとうございました!