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
Google IO 2022 Jetpack Composeのパフォーマンス 社内LT会資料
Search
ぎーにょ
July 08, 2022
0
1.2k
Google IO 2022 Jetpack Composeのパフォーマンス 社内LT会資料
Sansan株式会社 技術本部 MobileApplicationGroupで行われた社内LT会の資料です。
ぎーにょ
July 08, 2022
Tweet
Share
More Decks by ぎーにょ
See All by ぎーにょ
AndroidにおけるNotificationのおさらい & Android16の新API Progress-centric Notifications
ginyolith
0
98
複雑なレイアウト組む時あるあるは コンポーネント化で解決しよう
ginyolith
0
1.3k
各OS1人ずつ開発の辛みあるあるは アーキテクチャで解決出来そう
ginyolith
2
420
クリぼっちでも出来る issue駆動開発
ginyolith
0
570
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Designing for humans not robots
tammielis
253
25k
Docker and Python
trallard
45
3.5k
RailsConf 2023
tenderlove
30
1.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Transcript
Google I/O 2022 社内LT会 Jetpack Compose のパフォーマンス 2022/06/24 赤城 史哉
話すこと - パフォーマンス計測の前に - Compose の段階 - 落とし穴 1 :
LazyList Key - 落とし穴 2 : derivedStateOf - 落とし穴 3 : Modifier.drawBhind
パフォーマンス計測の前に - リリースモードでビルドし、 R8 を使用する - デバッグの体験を向上させる、デバッグモードではパフォーマンスの最適化が行われない。 - R8 で冗長なコードが削除される
- Layout inspector の recomposition count が便利 - 動作環境 - Android Studio Electric Eel - Jetpack compose version : 1.2.0-alpha03 or higher.
Layout inspector の recomposition count Recompositionを スキップした回数 Recompose回数
Composeの段階 - Composition / コンポジション - UI の構成を決める。ツリーを作成。 - Layout
/ レイアウト - UI の配置、大きさを決める。 - Drawing / 描画 - UI 要素をキャンバス(通常はデバイス画面)に描画
LazyList Key // Do not @Composable fun NotesList(notes: List<Note>) {
LazyColumn { items( items = notes ) { note -> NoteRow(note) } } } Item 1 Item 2 Item 3 Item 4 Item 5 Item 2 Item 3 Item 4 Item 5 - LazyColumn の item のある要素が削除されると、以下の Item 全てが Recompose され てしまう
LazyList Key Item 1 Item 2 Item 3 Item 4
Item 5 Item 2 Item 3 Item 4 Item 5 - LazyColumn に Key を設定すれば、 item の index が変わっても適切に recomposition が制御されます。 // Do @Composable fun NotesList(notes: List<Note>) { LazyColumn { items( items = notes, key = { note -> // Return a stable, // unique key for the note note.id } ) { note -> NoteRow(note) } } }
LazyList Key - Key が重複すると、 Exception が吐かれるので注意
derivedStateOf // Do not val listState = rememberLazyListState() LazyColumn(state =
listState) { // ... } val showButton = listState.firstVisibleItemIndex > 0 AnimatedVisibility(visible = showButton) { ScrollToTopButton() } Scrollをする度に、Scrollしている最中の全ての フレームでRecomposeされる
derivedStateOf - derivedStateOf で listState など高い頻度で更新される state を wrap すると、
必要な時のみ recomposition されるように制御出来る。 // Do val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } val showButton by remember { derivedStateOf { listState.firstVisibleItemIndex > 0 } } AnimatedVisibility(visible = showButton) { ScrollToTopButton() } この条件式の結果が変わったタイミングでのみ Recomposeされる
Modifier.drawBhind を使って不要な Stepをスキップ - animateColorBetween で color が変わるたびに Recompose されてしまう
// Here, assume animateColorBetween() is a function that swaps between // two colors val color by animateColorBetween(Color.Cyan, Color.Magenta) Box(Modifier.fillMaxSize().background(color)) 2色の間でアニメーションされる架空の関数 毎フレームcolorが更新される
Modifier.drawBhind を使って不要な Stepをスキップ - drawBehind を使うと、 color に変更があっても composition と
layout はスキップされ、 draw だけ行われる。 - layout inspector では draw の実行のみだと recomposition として扱われなかった。 val color by animateColorBetween(Color.Cyan, Color.Magenta) Box( Modifier .fillMaxSize() .drawBehind { drawRect(color) } )
参考資料 - Compose のパフォーマンス - https://developer.android.google.cn/jetpack/compose/performance?hl=ja - Jetpack Compose の一般的なパフォーマンスの落とし穴
/ Google IO 2022 - https://io.google/2022/program/213421b6-9873-464f-9b36-38eeb232a854/intl/ja/ - Compose tooling / Layout Inspector - https://developer.android.com/jetpack/compose/tooling#layout-inspector