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
Top comments (0)