Beneficios de rendimiento con Styles

Por diseño, los estilos operan en la fase de diseño y dibujo de Compose. Esto evita la necesidad de crear modificadores basados en lambda, ya que Styles siempre omite la fase de composición.

Figura 1: Fases de Compose y dónde se ejecutan los estilos.

Las mejoras en el rendimiento en comparación con los modificadores provienen de tres optimizaciones principales:

• Cambio de fase: Los estilos suelen orientarse a la fase de dibujo. Cuando cambia un valor, Compose solo invalida la fase afectada (p.ej., Redibujo) en lugar de activar una recomposición o un nuevo diseño completos.
• Asignación diferida: Los diseños difieren la asignación de recursos de animación hasta que una animación realmente comienza. Esto reduce el trabajo necesario durante la composición inicial.
• Reducción de la sobrecarga de objetos: Los modificadores encadenados asignan un objeto para cada propiedad (p.ej., padding, borde). Los diseños usan una sola expresión lambda para aplicar varias propiedades, lo que reduce significativamente las asignaciones de memoria. Si se define un Style en un tema, esa expresión lambda se comparte entre todos los componentes que usan ese tema.

En la siguiente tabla, se muestran resultados ilustrativos de una comparativa de rendimiento interna para Compose 1.11.0-alpha06 de Styles, en comparación con una implementación en Compose sin Styles.

La prueba basic_box_border_change destaca la solidez del sistema de diseño para evitar la asignación de varios objetos modificadores durante las actualizaciones de propiedades, lo que genera una reducción masiva de aproximadamente el 77% en las asignaciones y del 59% en el tiempo.

Método de prueba	Descripción	Cambio de hora	Cambio en la asignación
basic_box_border_change	Alterna el color del borde de un Box para medir el rendimiento de la actualización.	-59.91%	-77.22%
input_state_basic_box	Compara los estados de desplazamiento, enfoque y presión basados en el diseño con la recopilación manual del estado de interacción.	-5.24%	-14.72%
basic_box	Mide la composición y el diseño iniciales de un Box con cinco modificadores encadenados.	-4.78%	-6.60%
basic_text	Renderiza cinco componentes BasicText con cadenas codificadas.	+0.62%	+2.41%
basic_text_provided_color	Compara la configuración del color del texto a través de un estilo con el uso de CompositionLocalProvider.	+5.86%	+9.82%