Medindo o desempenho de um aplicativo em React Native

This content originally appeared on DEV Community and was authored by Gabriel Bonin

Por que é importante dar atenção ao desempenho de um Aplicativo?

Diferença de desempenho entre dispositivos android x iOS

Impactos de um aplicativo com baixo desempenho

Afeta diretamente a experiência do usuário
Avaliação (nota baixa) nas plataformas

1% de atraso no carregamento de uma página ou tela pode causar:

11% de perda de visualização
16% de diminuição na satisfação do cliente
7% de perda em conversões

Como melhorar o desempenho de um Aplicativo?

Reduzir o numero de renderizações e re-renderizações
Utilizar Flatlist ao invés de ScrollView
Explorar Partitioning e Lazy Loading (Aplicações que utilizam muita memória
Otimizar Imagens (FastImage)
Utilizar Componentes Nativos sempre que possível (Text, View, Scroll, Flatlist, Image)
Diminuir a utilização de bibliotecas de terceiros
Otimizar o código Java Script (RN-Debugger, Hermes, etc)

Ferramentas

FB Flipper
JS Thread
React Developer Tools
JS flame graph
React Native Performance Monitor Flipper plugin

Métricas

Emular ou utilizar um dispositivo "fraco" (Ex: Samsung J3 2017)
Desligar o JS DEV-MODE
Aguarde o início da renderização do componente e depois inicie os testes
Tempo médio indicado para testes: 10 segundos
Em caso de Listas (Flatlists/ScrollView) deslize os itens da lista para cima e para baixo manualmente ou utilize comandos:

 adb shell input swipe 500 1000 300 300 10

(varia com o tamanho e tipo de device)

Repita os testes entre 3 e 5 vezes

Casos de uso

Análise de desempenho em:

Componente com Flatlist

Antes de aplicar métricas de desempenho:

Após aplicar métricas de desempenho:

Componente de Player de video customizado

Antes de aplicar métricas de desempenho:

Após aplicar métricas de desempenho:

Resultado analisado pelo plugin React Native Performance Monitor Flipper plugin

Referências

This content originally appeared on DEV Community and was authored by Gabriel Bonin

Print Share Comment Cite Upload Translate Updates

APA

Gabriel Bonin | Sciencx (2024-08-11T23:38:13+00:00) Medindo o desempenho de um aplicativo em React Native. Retrieved from https://www.scien.cx/2024/08/11/medindo-o-desempenho-de-um-aplicativo-em-react-native/

MLA

" » Medindo o desempenho de um aplicativo em React Native." Gabriel Bonin | Sciencx - Sunday August 11, 2024, https://www.scien.cx/2024/08/11/medindo-o-desempenho-de-um-aplicativo-em-react-native/

HARVARD

Gabriel Bonin | Sciencx Sunday August 11, 2024 » Medindo o desempenho de um aplicativo em React Native., viewed ,<https://www.scien.cx/2024/08/11/medindo-o-desempenho-de-um-aplicativo-em-react-native/>

VANCOUVER

Gabriel Bonin | Sciencx - » Medindo o desempenho de um aplicativo em React Native. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/11/medindo-o-desempenho-de-um-aplicativo-em-react-native/

CHICAGO

" » Medindo o desempenho de um aplicativo em React Native." Gabriel Bonin | Sciencx - Accessed . https://www.scien.cx/2024/08/11/medindo-o-desempenho-de-um-aplicativo-em-react-native/

IEEE

" » Medindo o desempenho de um aplicativo em React Native." Gabriel Bonin | Sciencx [Online]. Available: https://www.scien.cx/2024/08/11/medindo-o-desempenho-de-um-aplicativo-em-react-native/. [Accessed: ]

rf:citation

» Medindo o desempenho de um aplicativo em React Native | Gabriel Bonin | Sciencx | https://www.scien.cx/2024/08/11/medindo-o-desempenho-de-um-aplicativo-em-react-native/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.