Fases y rendimiento de Compose
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Cuando Compose actualiza un fotograma, pasa por tres fases:
- Composición: Compose determina qué mostrar. Ejecuta funciones de componibilidad y compila el árbol de IU.
- Diseño: Compose determina el tamaño y la posición de cada elemento en el árbol de IU.
- Dibujo: En realidad, Compose renderiza los elementos individuales de la IU.
Compose puede omitir de manera inteligente cualquiera de esas fases si no es necesaria. Por ejemplo, supongamos que un solo elemento gráfico cambia entre dos íconos del mismo tamaño. Como este elemento no cambia de tamaño y no se agregan ni quitan elementos del árbol de IU, Compose puede omitir las fases de composición y diseño, y volver a dibujar este elemento.
Sin embargo, los errores de programación pueden dificultar que Compose sepa qué fases puede omitir de forma segura, en cuyo caso Compose ejecuta las tres fases, lo que puede ralentizar tu IU. Por lo tanto, muchas de las prácticas recomendadas para el rendimiento ayudan a Compose a omitir las fases que no necesita.
Para obtener más información, consulta la guía de fases de Jetpack Compose.
Principios generales
Se deben seguir algunos principios generales que pueden mejorar el rendimiento en general:
- Siempre que sea posible, quita los cálculos de las funciones de componibilidad.
Es posible que se deban volver a ejecutar las funciones de componibilidad cada vez que cambie la IU. Cualquier código que coloques en el elemento componible se volverá a ejecutar, posiblemente para cada fotograma de una animación. Limita el código del elemento componible solo a lo que necesita para compilar la IU.
- Aplaza las lecturas de estado el mayor tiempo posible. Si mueves la lectura de estado a un elemento secundario componible o a una fase posterior, puedes minimizar la recomposición, o bien omitir la fase de composición por completo. Para ello, puedes pasar las funciones lambda en lugar del valor de estado para el estado que cambia con frecuencia y si prefieres modificadores basados en lambda cuando pasas un estado que cambia con frecuencia. Puedes ver un ejemplo de esta técnica en la sección Aplaza las lecturas el mayor tiempo posible de Sigue las prácticas recomendadas.
Recursos adicionales
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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."]]