Phases et performances de Compose
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Lorsque Compose met à jour un frame, il passe par trois phases:
- Composition:Compose détermine ce qui doit être affiché. Il exécute des fonctions modulables et crée l'arborescence de l'interface utilisateur.
- Mise en page:Compose détermine la taille et l'emplacement de chaque élément dans l'arborescence de l'interface utilisateur.
- Dessin:Compose affiche les éléments individuels de l'interface utilisateur.
Compose peut ignorer ces phases de manière intelligente si elles ne sont pas nécessaires. Par exemple, supposons qu'un seul élément graphique bascule entre deux icônes de même taille. Étant donné que cet élément ne change pas de taille et qu'aucun élément de l'arborescence de l'UI n'est ajouté ni supprimé, Compose peut ignorer les phases de composition et de mise en page et redessiner cet élément.
Cependant, en raison d'erreurs de codage, Compose peut avoir du mal à identifier les phases qu'il peut ignorer en toute sécurité. Dans ce cas, Compose exécute les trois phases, ce qui peut ralentir votre interface utilisateur. Ainsi, de nombreuses bonnes pratiques en matière de performances visent à aider Compose à ignorer les phases qu'il n'a pas besoin de suivre.
Pour en savoir plus, consultez le guide Phases Jetpack Compose.
Principes généraux
Vous devez suivre deux grands principes qui peuvent améliorer les performances en général:
- Dans la mesure du possible, retirez les calculs de vos fonctions composables.
Vous devrez peut-être réexécuter les fonctions modulables chaque fois que l'UI change. Tout code que vous placez dans le composable est réexécuté, potentiellement pour chaque frame d'une animation. Limitez le code du composable à ce dont il a besoin pour créer l'UI.
- Différez les lectures d'état le plus longtemps possible. En déplaçant la lecture de l'état vers un composable enfant ou une phase ultérieure, vous pouvez réduire la recomposition ou ignorer complètement la phase de composition. Pour ce faire, vous pouvez transmettre des fonctions lambda au lieu de la valeur d'état pour un état changeant fréquemment, et privilégier les modificateurs basés sur lambda lorsque vous passez dans un état changeant fréquemment. Vous trouverez un exemple de cette technique dans la section Reporter les lectures le plus longtemps possible de Suivre les bonnes pratiques.
Autres ressources
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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."]]
