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 los estilos siempre omiten la fase de composición.

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

Las mejoras en el rendimiento de los modificadores provienen de tres optimizaciones principales:

  • Cambio de fase: Los estilos suelen orientarse a la fase de dibujo. Cuando cambia un valor, Compose invalida solo la fase afectada (p.ej., Redraw) en lugar de activar una recomposición o un nuevo diseño completos.
  • Asignación diferida: Los estilos 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, border). Los estilos usan una sola lambda para aplicar varias propiedades, lo que reduce significativamente las asignaciones de memoria. Si se define un estilo en un tema, esa lambda se comparte en todos los componentes que usan ese tema.

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

La prueba basic_box_border_change destaca la solidez del sistema de estilos 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 de aproximadamente el 59% en el tiempo.

Método de prueba

Descripción

Cambio de tiempo

Cambio de 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 estilo 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 de texto a través de un estilo con el uso de CompositionLocalProvider.

+5.86%

+9.82%