O desempenho é um dos problemas mais importantes enfrentados pelos desenvolvedores ou aplicativos da web. Ninguém ficará satisfeito com um aplicativo ou uma página carregada há muito tempo que trava por excesso de carga. Os usuários do site não estão prontos para esperar muito tempo por seus downloads ou para colocar suas páginas em condições de funcionamento. Segundo a
Kissmetrics , 47% dos visitantes esperam que um site seja carregado em menos de 2 segundos. 40% dos visitantes sairão do site se demorar mais de 3 segundos para carregá-lo.
O autor do material, cuja tradução publicamos hoje, afirma que, levando em consideração os números acima, fica claro que o desempenho é algo que os desenvolvedores da Web devem sempre lembrar. Aqui estão 12 dicas para melhorar o desempenho dos projetos JS.
1. Use mecanismos de cache do navegador
Existem duas maneiras principais de armazenar dados em cache usando navegadores. O primeiro é o uso da API JavaScript do JavaScript do cache, que é tratada pelos trabalhadores do serviço. O segundo é um cache HTTP comum.
Os scripts geralmente são usados para organizar o acesso a determinados objetos. Se você armazena uma referência a um objeto que geralmente precisa acessar em uma variável e também se usa essa variável em operações repetidas que requerem acesso ao objeto, você pode melhorar o desempenho do código.
2. Otimize o código para os ambientes nos quais ele será executado
Para avaliar adequadamente as melhorias feitas no programa, é recomendável formar um conjunto de ambientes nos quais as medições possam ser feitas.
Na prática, você não poderá executar estudos de desempenho do código, por exemplo, em todas as versões existentes dos mecanismos JS, além de otimizar o código para todos os ambientes nos quais ele pode ser executado. Mas deve-se observar que testar o código em qualquer ambiente também não é a melhor prática. Essa abordagem pode gerar resultados distorcidos. Portanto, é importante criar um conjunto de ambientes nos quais o código provavelmente será executado e testar projetos nesses ambientes.
3. Livre-se do código JS não utilizado
A remoção de código não utilizado do projeto melhorará não apenas o tempo de carregamento do navegador para scripts, mas também o tempo necessário para os navegadores analisarem e compilarem o código. Para se livrar do código não utilizado, você deve prestar atenção aos recursos do projeto. Portanto, se você encontrar alguma funcionalidade com a qual os usuários não trabalham, considere removê-la do projeto e, ao mesmo tempo, considere o código JS associado a ele. Como resultado, o site será carregado mais rapidamente, será mais rápido se preparar para o trabalho no navegador. Isso terá um efeito benéfico nas impressões que os usuários experimentarão no site. Ao analisar um projeto, lembre-se de que, por exemplo, uma determinada biblioteca incluída em sua composição pode ser incluída por engano. Pode muito bem não ser usado nele. Vale a pena se livrar disso. O mesmo se aplica ao uso de certas dependências que implementam o que já está implementado nos navegadores modernos. Como resultado, a mudança para os recursos padrão do navegador duplicados por essa dependência ajudará a se livrar de códigos desnecessários.
4. Economize memória
Vale a pena nos esforçar para garantir que os projetos da Web usem apenas essa memória, sem a qual eles são absolutamente incapazes de fazer. O fato é que um desenvolvedor não pode saber antecipadamente quanta memória pode ser acessada por seu aplicativo em um determinado dispositivo. Se o aplicativo usar injustificadamente grandes quantidades de memória, isso criará uma carga aumentada nos mecanismos de gerenciamento de memória do mecanismo JS do navegador. Em particular, isso se aplica ao coletor de lixo. A coleta freqüente de lixo chama programas de lentidão. Isso afeta negativamente a usabilidade do projeto.
5. Use mecanismos de carregamento adiado para scripts menores
Os usuários desejam que as páginas da Web sejam carregadas o mais rápido possível. Mas é improvável que todo o código JS do projeto seja necessário para a exibição inicial da página. Se um usuário precisar executar alguma ação para ativar um determinado código (por exemplo, clique em um elemento ou vá para alguma guia do aplicativo), o download desse código poderá ser adiado após a conclusão do carregamento da página inicial e dos recursos mais importantes.
Com essa abordagem, você pode evitar que o navegador carregue e compile uma grande quantidade de código JS no início, ou seja, evite diminuir a velocidade da saída da página causada pela necessidade de executar essas operações. Após a conclusão do download do mais importante, você poderá começar a baixar o código adicional. Como resultado, quando o usuário precisar desse código, ele já estará disponível para ele. De acordo com o modelo
RAIL , o Google recomenda executar sessões de script de carregamento lento com duração de aproximadamente 50 ms. Com essa abordagem, as operações de carregamento de código não afetarão a interação do usuário com a página.
6. Evite vazamentos de memória
Se ocorrer um vazamento de memória no seu aplicativo, isso fará com que a página carregada solicite mais e mais memória do navegador. Como resultado, o consumo de memória desta página pode atingir um nível tal que afetará adversamente o desempenho de todo o sistema. Você provavelmente enfrentou um problema semelhante (e provavelmente não gostou). É possível que a página na qual houve um vazamento de memória contenha algum tipo de visualizador de imagens - como um controle deslizante ou um "carrossel".
Usando as Ferramentas do desenvolvedor do Chrome, você pode analisar seu site quanto a vazamentos de memória. Isso é feito examinando os indicadores usando a guia Desempenho. Normalmente, vazamentos de memória vêm de fragmentos DOM removidos da página, mas vinculados a algumas variáveis. Isso impede que o coletor de lixo limpe a memória ocupada pelos dados em fragmentos DOM desnecessários.
7. Se você precisar fazer computação pesada, use web workers
Nos materiais do recurso MDN, você pode descobrir que os trabalhadores da Web podem executar código em um thread em segundo plano separado do segmento principal do aplicativo da Web. A vantagem dessa abordagem é que cálculos pesados podem ser realizados em um encadeamento separado. Isso permite que o encadeamento principal (geralmente responsável por manter a interface do usuário) seja executado sem bloquear ou diminuir a velocidade.
Os trabalhadores da Web permitem executar cálculos que usam o processador intensivamente, sem bloquear o fluxo da interface do usuário. Essa tecnologia permite criar novos threads e dar-lhes tarefas, o que tem um efeito benéfico no desempenho do aplicativo. Com essa abordagem, as tarefas que levam muito tempo para serem concluídas não bloqueiam a execução de outras tarefas. Ao executar tarefas semelhantes no encadeamento principal, outras tarefas são bloqueadas.
8. Se você acessar o elemento DOM várias vezes, salve o link em uma variável
Obter uma referência a um elemento DOM é uma operação lenta. Se você deseja acessar um elemento várias vezes, é melhor salvar um link para ele em uma variável local. Mas aqui é importante lembrar que, se o elemento cujo link está armazenado na variável for posteriormente removido do DOM, será necessário remover o link da variável. Por exemplo, você pode fazer isso escrevendo
null em uma variável. Isso evitará vazamentos de memória.
9. Procure declarar variáveis no mesmo escopo em que serão usadas.
O JavaScript, ao tentar acessar uma variável, primeiro a procura no escopo local. Se não aparecer lá, a pesquisa continuará no escopo, no qual o escopo local está incorporado. Isso acontece até que as variáveis globais sejam verificadas. Salvar variáveis em escopos locais acelera o acesso a elas.
Tente, sem necessidade especial, não usar a palavra-chave
var ao declarar variáveis. Em vez disso, use as palavras-chave
let e
const para declarar variáveis e constantes, respectivamente. Eles diferem no escopo do bloco e em alguns outros recursos úteis. Preste atenção ao uso de variáveis nas funções, tentando garantir que as variáveis que você acessa dentro da função sejam locais para ela. Esteja ciente dos problemas que a declaração implícita de variáveis globais pode causar.
10. Tente não usar variáveis globais
Variáveis globais existem durante todo o tempo em que o script é executado. Variáveis locais são destruídas quando o escopo local é destruído. Portanto, variáveis globais devem ser usadas apenas quando for realmente necessário.
11. Aplique nas otimizações de código JavaScript que você aplicaria a programas escritos em outros idiomas
- Sempre use algoritmos com a menor complexidade computacional possível, resolva problemas usando estruturas de dados ideais.
- Otimize os algoritmos usados para obter os mesmos resultados com menos cálculos.
- Evite chamadas recursivas.
- Crie peças repetidas de computação como funções.
- Simplifique os cálculos matemáticos.
- Use matrizes de pesquisa em vez de construções de switch / case.
- Esforce-se para garantir que as condições verificadas nas construções condicionais com mais frequência aceitem valores verdadeiros. Isso contribui para o uso mais eficiente dos recursos do processador para execução proativa de instruções.
- Se você tiver a oportunidade de usar operadores bit a bit para executar determinadas ações, faça isso. A realização desses cálculos requer menos recursos do processador.
12. Use ferramentas de pesquisa de desempenho de aplicativos
Para explorar vários aspectos dos projetos da web, a ferramenta Lighthouse pode ser recomendada. Ele classifica o aplicativo com base nos seguintes indicadores: Desempenho, Aplicativo Web Progressivo, Acessibilidade, Melhores Práticas, SEO. O farol não apenas fornece marcas, mas também fornece recomendações para melhorar o projeto. Outra ferramenta de análise de produtividade, o
Google PageSpeed , foi criada para ajudar os desenvolvedores a explorar seus sites e ver como eles podem melhorar.
Tanto o Lighthouse quanto o PageSpeed não são ferramentas perfeitas, mas seu uso ajuda a ver problemas que, à primeira vista, podem se tornar invisíveis.
No menu do Chrome, você pode encontrar o comando que abre o gerenciador de tarefas. Ele exibe informações sobre os recursos do sistema usados pelas guias abertas do navegador. Você pode obter informações mais detalhadas sobre o que está acontecendo na página, abrindo a guia Desempenho das Ferramentas do desenvolvedor do Chrome (outros navegadores têm ferramentas semelhantes). Essa guia permite analisar muitos indicadores relacionados ao desempenho do site.
Guia Desempenho nas Ferramentas do desenvolvedor do ChromeDurante a coleta de informações de desempenho da página usando o Chrome, você pode configurar os recursos do processador e da rede disponíveis para as páginas, o que permite identificar e corrigir problemas.
Análise de desempenho da página do ChromePara analisar o site mais profundamente, você pode usar o tempo de navegação da API. Permite medir vários indicadores diretamente no código do aplicativo.
Se você estiver desenvolvendo projetos do lado do servidor usando JavaScript usando o Node.js, poderá usar a plataforma NodeSource para uma análise detalhada de seus aplicativos. As medições realizadas pelas ferramentas desta plataforma têm pouco impacto no projeto. No ambiente do Node.js., como no navegador, muitos problemas podem surgir - como os mesmos vazamentos de memória. A análise de projetos com base no Node.js ajuda a identificar e corrigir problemas com seu desempenho.
Sumário
É importante manter um equilíbrio entre otimização de código e legibilidade. O código é interpretado por um computador, mas as pessoas precisam apoiá-lo. Portanto, o código deve ser compreensível não apenas para o computador, mas também para os seres humanos.
Além disso, é útil lembrar que o desempenho sempre deve ser levado em consideração, mas não deve ser mais importante do que garantir a operação do código sem erros e implementar os recursos dos aplicativos de que os usuários precisam.
Caros leitores! Como você otimiza seus projetos JS?
