Get best of the week

O que é desempenho de aplicativos da web?

imagem

Alguns aplicativos carregam rapidamente, outros lentamente, mas devido ao que isso acontece? A velocidade de carregamento da página é a única medida de desempenho do aplicativo?

Seria muito difícil responder a essas e muitas outras perguntas em um artigo. Então, montei um catálogo de links e o dividi em categorias. Mas para iniciantes - um pouco de teoria sobre o que é desempenho e quando você deve pensar sobre isso.

Quando surgem problemas de desempenho


Você pode desenvolver aplicativos da web por anos e praticamente não tem problemas com o desempenho do aplicativo.

Mas, muito provavelmente, surgem problemas nas seguintes situações:

  1. Aparecem grandes dados (é necessário renderizar grandes listas ou centenas de milhares de pontos no mapa).
  2. O aplicativo se torna grande (centenas de cenários de usuário, dezenas de telas, formulários etc.).
  3. Um grande número de clientes de diferentes regiões (por exemplo, mais de 300.000 clientes por dia de todo o mundo).
  4. Alta concorrência no mercado (com certeza, o usuário preferirá o aplicativo do seu concorrente se ele funcionar mais rápido).
  5. É necessária uma versão móvel (os navegadores em dispositivos móveis ainda sofrem de problemas de desempenho).

Em que consiste o desempenho


Globalmente, os problemas de desempenho de aplicativos da Web podem ser divididos em duas categorias: transferência de dados e tempo de execução.

  • Transferência de dados significa baixar todos os recursos necessários para o aplicativo funcionar.
  • Em tempo de execução - operação do aplicativo, renderização e processamento de entrada do usuário.

Cada uma dessas categorias contém muitas nuances nas quais geralmente não pensamos, mas que distinguem aplicativos de alta qualidade daqueles de baixa qualidade.

Aqui estão as métricas de desempenho de aplicativos da web mais populares (todas devem ser mínimas):

Carregamento da página



Tempo de execução


  • Tempo de resposta da entrada do usuário.
  • Tempo de redesenho da interface.

Embora TTFB e TTI sejam métricas para o desempenho do carregamento da página, problemas relacionados ao tempo de execução também podem afetá-los.

Como pesquisar e analisar problemas de desempenho


O principal kit de ferramentas no arsenal do desenvolvedor é Chrome DevTools ou ferramentas semelhantes, como as ferramentas de desenvolvedor do Firebug / Firefox .
Artigos separados podem ser escritos sobre eles, mas nos limitaremos aos pontos mais importantes.

Rede - permite analisar em detalhes quais recursos são carregados na página, de quais recursos, com que velocidade e assim por diante. Essa ferramenta é frequentemente usada para analisar manualmente a velocidade de carregamento da página.

Desempenho - nessa guia, você pode ativar a gravação de chamadas de execução de código, operações de entrada / saída e outras. Além disso, a gravação pode ser feita com emulação de rede de limitação e CPU. Por exemplo, verifique o aplicativo em dispositivos fracos.

Farol - Uma ferramenta integrada ao Chrome DevTools que inicia o carregamento da página, registra métricas, analisa-as e até emite recomendações para melhorar o desempenho.

Como medir / monitorar o desempenho


As ferramentas para monitorar o desempenho de aplicativos da Web podem ser divididas em duas categorias: aquelas que fazem medições sintéticas e aquelas que registram dados de desempenho de usuários reais.


Além disso, existem ferramentas como o Webpack-bundle-analyzer que não podem ser atribuídas a essas duas categorias. Mas com a ajuda deles, você pode medir alguns parâmetros que afetam o desempenho, como o tamanho do pacote.

Transferência de dados


Conexão TCP, pesquisa de DNS - você pode acelerar o carregamento da página mesmo devido à configuração correta das conexões com o servidor. Em particular, se você usar a pré-busca de DNS ou até endereços IP em vez de nomes de domínio.

TTFB (Tempo até o primeiro byte) . O tempo para obter o primeiro byte é uma métrica importante. Para acelerar, tente implementar o mínimo de lógica possível no servidor antes de emitir index.html.

HTTP1 vs HTTP2 - HTTP2 pode acelerar bastante o carregamento de páginas, multiplexando ou compactando cabeçalhos. Além disso, um novo protocolo (relativamente) abre vários recursos, como envio de servidor.

Fragmento de domínio. Se você precisar enviar muitos cabeçalhos HTTP para solicitações de API, mas não para solicitações estáticas, é melhor separá-los em domínios diferentes.

A CDN (rede de entrega de conteúdo) ajudará a acelerar o carregamento para clientes distribuídos geograficamente.

A priorização de recursos (pré-carregamento, pré-busca, pré-conexão) é a aceleração do carregamento da página devido à estratégia correta de carregamento de recursos. Os navegadores permitem definir prioridades para diferentes tipos de recursos e fazer o download mais cedo do que é importante para a primeira renderização.

Compressão estática: GZIP e Brotli . Brotli é um algoritmo de compactação que reduzirá o peso estático e, consequentemente, aumentará a velocidade de download. E aqui está uma ótima solução do meu colega.

Webp vs Png & Jpg. Webp é uma ótima alternativa ao Png. Além do menor peso das imagens, o Webp não tem qualidade inferior. Agora, este formato suporta aproximadamente 78% dos navegadores . Mas mesmo se você precisar de 100% de suporte, poderá implementar fallback no Png usando a tag picture .

Tempo de execução


Tarefas, microtaks . Ao priorizar corretamente a execução do código, você pode se livrar dos frisos e acelerar a resposta à entrada do usuário.

requestIdleCallback é uma função útil que permite executar código em seu tempo livre no final do quadro (quadro / tick) ou quando o usuário está inativo. Isso ajudará a livrar-se dos mesmos atrasos e "congelamentos".

requestAnimationFrame permite planejar adequadamente a animação e maximizar as chances de renderizar 60 quadros por segundo.

ES2015 vs ES5 . O ES2015 fornece muitos recursos mais produtivos que o ES5.

Manipulação Dom. As manipulações com o DOM são caras, é necessário executá-las com cuidado e significado. Por exemplo, não chame querySelector () em um loop se isso puder ser feito com uma única chamada.

Renderizar recurso de bloqueio . Carregar alguns recursos pode bloquear a renderização. Para evitar isso, você precisa usar os atributos adiar, assíncrono, pré-carregar.

60 FPS por eventos-ponteiro: nenhum é um grande truque com o qual você pode atingir 60 FPS rolando a página. Funciona de maneira muito simples: todos os manipuladores de eventos do mouse são desativados durante a rolagem.

Ouvinte de evento passivo- uma maneira de fazer a página rolar suavemente em telas sensíveis ao toque. Em resumo, o navegador possui um processamento de fluxo imperfeito para ouvintes de eventos de toque. Se você definir o parâmetro passivo ao criar o manipulador de eventos, o navegador entenderá claramente que o manipulador não cancelará a rolagem e a renderização, sem esperar pela conclusão.

A rolagem virtual é uma maneira inteligente de não renderizar listas grandes, mas gerá-las durante a rolagem. Permite consumir menos memória e facilitar as listas de rolagem.

Evite grandes layouts complexos e thrashing de layout . Layout / reflow é uma operação cara que faz muitos recálculos dos parâmetros de renderização. Para evitar a chamada frequente, você precisa criar corretamente o layout e manipular o DOM.

O que força o layout / refluxo - uma folha de dicas onde você pode encontrar uma lista de funções e parâmetros que funcionam com os quais causa layout / refluxo.

Montagem


Tree shake - remova o código não utilizado do pacote e acelere o carregamento da página.

Divisão de código - dividindo o código em partes, você pode otimizar a primeira carga e abrir a capacidade de baixar partes do código "preguiçosamente".

A ofuscação pode reduzir o tamanho do pacote e até ajudar um pouco a esconder seu código de olhares indiscretos.

Arquitetura


A renderização no servidor é provavelmente a maneira mais conhecida de renderizar o SPA imediatamente na primeira inicialização. Este é um requisito importante para alguns mecanismos de pesquisa (e não apenas).

Carregamento lento de imagens e vídeo ( + nativo ) - uma solução nativa projetada para melhorar as métricas da primeira renderização devido ao carregamento "lento" de imagens e vídeos.

Módulos / rotas de carregamento lento é uma ferramenta encontrada em todas as estruturas e bibliotecas populares. Permite carregar "preguiçosamente" partes da funcionalidade do aplicativo.

O armazenamento em cache de arquivos com trabalhadores do Serviço permite que você armazene em cache arquivos em um navegador e não faça o download sempre do servidor. Talvez a única maneira de executar o modo offline em um aplicativo de navegador.

Cache HTTP - Usando alguns cabeçalhos HTTP, você pode melhorar bastante a velocidade de carregamento da página e reduzir a carga do servidor.

More articles:


All Articles