Falando em testes de desempenho H5 , muitos alunos já devem ter ouvido falar, mas não sabem como fazer testes de desempenho, nem a quais indicadores de desempenho H5 devem prestar atenção. Vamos dar uma olhada hoje. Espero que depois de ler este artigo eu possa entender alguma coisa.
Indicadores comuns
1. Introdução de parâmetros relacionados ao desempenho H5
Tempo de tela branca: o momento em que o usuário vê o conteúdo da página pela primeira vez, ou seja, o momento em que o primeiro processo de renderização é concluído
Tempo da primeira tela: momento em que o usuário vê a primeira tela, ou seja, toda a página da web é exibida por completo
Tempo de download do primeiro recurso: o tempo desde o início do download do primeiro recurso até a conclusão do download
Tempo total de download de recursos: o tempo desde o início do download até a conclusão de todos os recursos
Tempo operável do usuário: o tempo desde o início do carregamento da página até o momento em que o usuário pode operá-la
Ao testar o desempenho do H5 no cliente APP, preste atenção aos indicadores gerais de desempenho do APP ao carregar o H5
Memória: A memória muda antes e depois do carregamento da página, o que pode refletir a quantidade e tamanho dos recursos em H5, como o tamanho da imagem
CPU: Se o estilo da página atual for muito complicado, você poderá observar a taxa de ocupação da CPU quando a página for carregada. Se a taxa de ocupação da CPU for alta por um longo tempo, você precisa considerar a otimização
FPS: Nas páginas H5 com efeitos de animação ou vídeos complexos, você deve focar nisso para evitar congelamentos graves
2. Pontos de teste de desempenho H5
Existem vários fatores que afetam o desempenho do H5: largura de banda da rede, resolução de DNS, capacidade de processamento do servidor, etc. A seguir estão os pontos de teste do desempenho H5:
Ferramenta comum
Atualmente, existem muitas ferramentas gratuitas de código aberto, que podem ser selecionadas de acordo com suas necessidades.
1、WebPageTest
WebPageTest é uma ferramenta de avaliação de desempenho on-line gratuita e de código aberto; usa navegadores reais (IE e Chrome, etc.). Informações de diagnóstico, incluindo gráficos em cascata de carregamento de recursos, verificações de otimização de velocidade da página e sugestões de melhoria, dão a cada parte do conteúdo uma classificação final .
Abra o endereço do site oficial:
https://www.webpagetest.org
Insira o endereço URL a ser testado em 2 locais na figura acima.
Selecione o endereço (Local de Teste) em 3. O WebPagetest possui máquinas de teste localizadas em todo o mundo. Você deve testar em um local próximo ao acesso do usuário. Basta clicar no menu suspenso e escolher. Você pode escolher Android, iOS, PC e outros dispositivos, bem como em diferentes países. espere;
Selecione qual navegador usar para teste em 4 locais. Locais diferentes oferecem suporte a navegadores diferentes.
Suplemento: Clique no menu suspenso Configurações avançadas para realizar configurações avançadas, mas geralmente escolhemos o padrão.
Após a conclusão da configuração, clique em INICIAR TESTE para iniciar o teste;
2、Chrome DevTools
Chrome DevTools (Chrome Developer Tools) é um conjunto de ferramentas para criação e depuração de páginas da web incorporadas no navegador Chrome.
Abra a página a ser testada, pressione F12 para ver a opção Rede, e nesta opção você pode ver o horário e tipo de solicitação de rede correspondente, bem como o tamanho do recurso.
Da mesma forma, você também pode usar ferramentas de captura de pacotes, como Charels, para analisar.
3、Velocidade da página
velocidade da página é um plug-in de navegador do Google, que precisa ser instalado ou adicionado manualmente ao Google Chrome,
Abra o site a ser testado e pressione F12 para ver a opção PageSpeed.
Clique em INICIAR para iniciar a análise e um relatório de análise será gerado após a conclusão do teste
4、Farol
Lighthouse é uma ferramenta de automação de código aberto que pode ser executada como um plugin do Chrome ou na linha de comando.
Após pesquisar o Lighthouse na loja de aplicativos do Chrome, baixá-lo e instalá-lo, abra a página a ser testada, pressione F12 e você poderá ver as opções do Lighthouse,
Após a abertura, clique em Analisar carregamento da página para iniciar a paginação do desempenho da página e gerar um relatório de análise de desempenho.
O estilo do relatório é o seguinte:
O significado dos indicadores relevantes:
Primeira pintura com conteúdo: é o momento em que o navegador desenha qualquer conteúdo (como texto, imagem, tela, etc.) na tela pela primeira vez.
Tempo para interação: refere-se ao momento em que todo o conteúdo da página foi carregado com sucesso e pode responder rapidamente às operações do usuário.
Índice de Velocidade (Speed Index): Mede a velocidade com que o conteúdo visível da primeira tela é desenhado na tela. Exibir o máximo de conteúdo possível durante o primeiro carregamento da página muitas vezes pode trazer uma melhor experiência ao usuário, por isso o valor do índice de velocidade deve ser o menor possível.
Pintura com maior conteúdo: indica o momento em que o elemento visível com o maior “conteúdo” da área visível começa a aparecer na tela.
Tempo Total de Bloqueio: Indica o tempo de bloqueio encontrado durante esta análise
Sobre os indicadores e ferramentas de desempenho H5, irei apresentá-los, espero que sejam úteis para você depois de ler ~
Por fim, gostaria de agradecer a todos que leram meu artigo com atenção. A reciprocidade é sempre necessária. Embora não seja algo muito valioso, você pode retirá-lo se precisar:
Applet de entrevista de teste de software
O banco de perguntas de teste de software esgotado por milhões de pessoas! ! ! Quem é quem sabe! ! ! O mini programa de quiz mais completo de toda rede, você pode usar seu celular para fazer os quizes, no metrô ou no ônibus, enrola!
As seguintes seções de perguntas da entrevista são abordadas:
1. Teoria básica de teste de software, 2. web, aplicativo, teste de função de interface, 3. rede, 4. banco de dados, 5. linux
6. web, aplicativo, automação de interface, 7. testes de desempenho, 8. noções básicas de programação, 9. perguntas da entrevista de hora, 10. perguntas de teste abertas, 11. testes de segurança, 12. noções básicas de informática
Esses materiais devem ser o armazém de preparação mais abrangente e completo para amigos [de teste de software]. Este armazém também acompanhou dezenas de milhares de engenheiros de teste na jornada mais difícil. Espero que possa ajudar você também!