Fase dan performa Compose
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Saat Compose memperbarui frame, Compose akan melalui tiga fase:
- Komposisi: Compose menentukan konten yang akan ditampilkan. Library ini menjalankan fungsi
composable dan membuat hierarki UI.
- Tata letak: Compose menentukan ukuran dan penempatan setiap elemen dalam
hierarki UI.
- Gambar: Compose benar-benar merender elemen UI individual.
Compose dapat dengan cermat melewati salah satu fase tersebut jika tidak diperlukan. Misalnya,
satu elemen grafis beralih antara dua ikon dengan ukuran
yang sama. Karena elemen ini tidak berubah ukuran, dan tidak ada elemen hierarki UI yang
ditambahkan atau dihapus, Compose dapat melewati fase komposisi dan tata letak
dan menggambar ulang elemen yang satu ini.
Namun, kesalahan coding dapat menyulitkan Compose untuk mengetahui fase mana
yang dapat dilewati dengan aman, dalam hal ini Compose menjalankan ketiga fase, yang dapat memperlambat
UI Anda. Jadi, banyak praktik terbaik performa adalah untuk membantu Compose
melewati fase yang tidak perlu dilakukan.
Untuk mengetahui informasi selengkapnya, lihat panduan Fase Jetpack Compose.
Prinsip umum
Ada beberapa prinsip umum yang perlu diikuti yang dapat meningkatkan performa
secara umum:
- Jika memungkinkan, pindahkan penghitungan dari fungsi composable Anda.
Fungsi composable mungkin perlu dijalankan kembali setiap kali UI berubah. Setiap
kode yang Anda masukkan ke dalam composable akan dieksekusi ulang, kemungkinan untuk setiap frame
animasi. Batasi kode composable hanya pada yang diperlukan untuk mem-build
UI.
- Tunda pembacaan status selama mungkin. Dengan memindahkan pembacaan status ke
composable turunan atau fase berikutnya, Anda dapat meminimalkan rekomposisi atau melewati
fase komposisi sepenuhnya. Anda dapat melakukannya dengan meneruskan fungsi lambda,
bukan nilai status untuk status yang sering berubah dan dengan memilih
pengubah berbasis lambda saat Anda meneruskan status yang sering berubah. Anda dapat
melihat contoh teknik ini di bagian Menunda pembacaan selama mungkin
di Mengikuti praktik terbaik.
Referensi Tambahan
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Compose phases and performance\n\nWhen Compose updates a frame, it goes through three phases:\n\n- **Composition:** Compose determines *what* to show. It runs composable functions and builds the UI tree.\n- **Layout:** Compose determines the size and placement of each element in the UI tree.\n- **Drawing:** Compose actually *renders* the individual UI elements.\n\nCompose can intelligently skip any of those phases if they aren't needed. For\nexample, suppose a single graphic element swaps between two icons of the same\nsize. Since this element isn't changing size, and no elements of the UI tree are\nbeing added or removed, Compose can skip over the composition and layout phases\nand redraw this one element.\n\nHowever, coding mistakes can make it hard for Compose to know which phases it\ncan safely skip, in which case Compose runs all three phases, which can slow\ndown your UI. So, many of the performance best practices are to help Compose\nskip the phases it doesn't need to do.\n\nFor more information, see the [Jetpack Compose Phases](/develop/ui/compose/phases) guide.\n\nGeneral principles\n------------------\n\nThere are a couple of broad principles to follow that can improve performance in\ngeneral:\n\n- **Whenever possible, move calculations out of your composable functions.** Composable functions might need to be rerun whenever the UI changes. Any code you put in the composable gets re-executed, potentially for every frame of an animation. Limit the composable's code to only what it needs to build the UI.\n- **Defer state reads for as long as possible.** By moving state reading to a child composable or a later phase, you can minimize recomposition or skip the composition phase entirely. You can do this by passing lambda functions instead of the state value for frequently changing state and by preferring lambda-based modifiers when you pass in frequently changing state. You can see an example of this technique in the [Defer reads as long as possible](/develop/ui/compose/performance/bestpractices#defer-reads) section of [Follow best practices](/develop/ui/compose/performance/bestpractices).\n\nAdditional Resources\n--------------------\n\n- **[App performance guide](/topic/performance/overview)**: Discover best practices, libraries, and tools to improve performance on Android.\n- **[Inspect Performance](/topic/performance/inspecting-overview):** Inspect app performance.\n- **[Benchmarking](/topic/performance/benchmarking/benchmarking-overview):** Benchmark app performance.\n- **[App startup](/topic/performance/appstartup/analysis-optimization):** Optimize app startup.\n- **[Baseline profiles](/baseline-profiles):** Understand baseline profiles."]]
