Benefícios de performance com estilos

Por design, os estilos operam na fase de layout e exibição do Compose. Isso evita a necessidade de criar modificadores baseados em lambda, já que os estilos sempre ignoram a fase de composição.

Fases do Compose e onde os estilos
são executados
Figura 1. Fases do Compose e onde os estilos são executados.

As melhorias de performance em relação aos modificadores vêm de três otimizações principais:

  • Mudança de fase: os estilos geralmente têm como destino a fase de exibição. Quando um valor muda, o Compose invalida apenas a fase afetada (por exemplo, Redraw) em vez de acionar uma recomposição ou um novo layout completo.
  • Alocação lenta: os estilos adiam a alocação de recursos de animação até que uma animação seja iniciada. Isso reduz o trabalho necessário durante a composição inicial.
  • Sobrecarga de objeto reduzida: modificadores encadeados alocam um objeto para cada propriedade (por exemplo, padding, borda). Os estilos usam uma única lambda para aplicar várias propriedades, reduzindo significativamente as alocações de memória. Se um estilo for definido em um tema, essa lambda será compartilhada entre todos os componentes que usam esse tema.

A tabela a seguir mostra resultados ilustrativos de um benchmark de performance interno para o Compose 1.11.0-alpha06 de estilos, em comparação com uma implementação no Compose sem estilos.

O teste basic_box_border_change destaca a força do sistema de estilos ao evitar a alocação de vários objetos modificadores durante as atualizações de propriedades, resultando em uma redução enorme de ~77% nas alocações e ~59% no tempo.

Método de teste

Descrição

Mudança de tempo

Mudança de alocação

basic_box_border_change

Alterna a cor da borda de uma Box para medir a performance da atualização.

-59,91%

-77,22%

input_state_basic_box

Compara estados de foco/passar o cursor/pressionar baseados em estilo com a coleta manual de estados de interação.

-5,24%

-14,72%

basic_box

Mede a composição e o layout iniciais de uma Box com cinco modificadores encadeados.

-4,78%

-6,60%

basic_text

Renderiza cinco componentes BasicText com strings codificadas.

+0,62%

+2,41%

basic_text_provided_color

Compara a definição da cor do texto usando um estilo com o uso de CompositionLocalProvider.

+5,86%

+9,82%