Aprenda como acelerar suas páginas da web ajustando seu JavaScript para remover gargalos.
JavaScript é vital para o desenvolvimento web. A linguagem está por trás da maior parte da interatividade e animação que você verá nos sites. Mas o JavaScript também pode fazer com que um site fique lento se o código for mal escrito. Ineficiências podem resultar em tempos de carregamento insatisfatórios e velocidade de renderização lenta.
Adote as seguintes práticas para melhorar a velocidade e o desempenho do seu site.
1. Definir Variáveis Localmente
Como programador, você precisa saber como funciona o escopo. Existem dois tipos de variáveis em JavaScript: variáveis locais e variáveis globais.
Variáveis locais são variáveis declaradas dentro de um bloco de função. O escopo permanece dentro da função apenas na qual eles são declarados. As variáveis globais são variáveis acessíveis em todo o script. No caso de variáveis globais, o escopo permanece ao longo do programa.
Sempre que você tenta acessar uma variável, o navegador faz algo conhecido como pesquisa de escopo. Ele verifica o escopo mais próximo da variável e continua procurando até encontrar a variável. Assim, quanto mais cadeia de escopo você tiver em seu programa, mais tempo levará para acessar variáveis além do escopo atual.
Por esse motivo, é melhor sempre definir suas variáveis mais próximas do contexto de execução. Use variáveis globais apenas em raras ocasiões; quando você deseja armazenar dados usados em todo o script, por exemplo. Isso reduzirá o número de escopos em seu programa, melhorando assim o desempenho.
2. Carregar JavaScript de forma assíncrona
JavaScript é uma linguagem de programação de thread único. Isso significa que uma vez que uma função é executada, ela deve ser executada até o final antes que outra função possa ser executada. Essa arquitetura pode levar a situações em que o código pode bloquear o thread e congelar o aplicativo.
Para manter o bom desempenho do encadeamento, você deve executar certas tarefas que desperdiçam tempo de forma assíncrona. Quando uma tarefa é executada em assincronia, ela não ocupa todo o poder de processamento do thread. Em vez disso, a função ingressa em uma fila de eventos onde é acionada após a execução de todos os outros códigos.
As chamadas de API são perfeitas para o padrão assíncrono porque levam tempo para serem resolvidas. Portanto, em vez de interromper o encadeamento, você usaria uma biblioteca baseada em promessa, como a API de busca, para buscar os dados de forma assíncrona. Dessa forma, outro código pode ser executado enquanto o navegador recupera dados da API.
Entenda as complexidades da programação assíncrona e você melhorará o desempenho de seu aplicativo.
3. Evite loops desnecessários
Usando loops em JavaScript pode ser caro se você não for cuidadoso. Percorrer uma coleção de itens pode sobrecarregar o navegador.
Embora você definitivamente não possa evitar loops em seu código, você precisa trabalhar o mínimo possível neles. Você pode usar outras técnicas que evitam a necessidade de percorrer a coleção.
Por exemplo, você pode armazenar o comprimento de uma matriz em uma variável diferente, em vez de lê-la durante cada iteração do loop. Se você conseguir o que deseja de um loop, saia dele imediatamente.
4. Minificar Código JavaScript
A minificação é um método eficaz para otimizar o código JavaScript. Um minimizador transforma seu código-fonte bruto em um arquivo de produção menor. Eles removem comentários, aparam sintaxe desnecessária e encurtam nomes longos de variáveis. Eles também removem o código não utilizado e otimizam as funções existentes para ocupar menos linhas.
Exemplos de minimizadores são Google Closure Compiler, UglifyJS e Microsoft AJAX minifier. Você também pode minificar manualmente seu código inspecionando-o e procurando maneiras de otimizá-lo. Por exemplo, você pode simplifique as instruções if em seu código.
5. Compactar arquivos grandes com Gzip
A maioria dos clientes use Gzip para compactar e descompactar grandes arquivos JavaScript. Quando um navegador solicita um recurso, o servidor pode compactá-lo para retornar um arquivo menor na resposta. Quando o cliente recebe o arquivo, ele o descompacta. No geral, essa abordagem economiza largura de banda e reduz a latência, melhorando o desempenho do aplicativo.
6. Minimizar o acesso DOM
Acessar o DOM pode afetar o desempenho do seu aplicativo porque o navegador precisa ser atualizado a cada atualização do DOM. É melhor limitar o acesso DOM à menor frequência possível. Uma maneira de fazer isso é armazenando referências a objetos do navegador.
Você também pode usar uma biblioteca como React, que faz alterações no DOM virtual antes de enviá-las para o DOM real. Como resultado, o navegador atualiza as partes do aplicativo que precisam ser atualizadas, em vez de atualizar a página inteira.
7. Adiar carregamento desnecessário de JavaScript
Embora seja essencial que sua página carregue no prazo, nem todas as funções precisam estar funcionando no carregamento inicial. Suponha que você tenha um botão clicável e um menu de guia que faça referência ao código JavaScript; você pode adiar ambos até que a página carregue.
Esse método libera poder de processamento, permitindo renderizar os elementos de página necessários no prazo. Você atrasa a compilação do código que pode conter a exibição inicial da página. Então, assim que a página terminar de carregar, você pode começar a carregar as funcionalidades. Dessa forma, o usuário pode aproveitar o tempo de carregamento rápido e começar a interagir com os elementos na hora.
Você também pode incluir a menor quantidade de CSS e JavaScript em seu elemento head, para que ele carregue imediatamente. O código secundário pode residir em arquivos .css e .js separados. Esta técnica requer um conhecimento decente de como funciona o DOM.
8. Use um CDN para carregar JavaScript
O uso de uma rede de entrega de conteúdo ajuda a acelerar o tempo de carregamento da página, mas nem sempre é eficaz. Por exemplo, se você escolher um CDN sem um servidor local no país de um visitante, ele não se beneficiará.
Para resolver esse problema, você pode usar ferramentas para comparar vários CDNs e decidir qual oferece o melhor desempenho para seu caso de uso. Para saber qual CDN é melhor para sua biblioteca, confira o cdnjs local na rede Internet.
9. Remover vazamentos de memória
Vazamentos de memória podem afetar negativamente o desempenho de um aplicativo. Vazamentos ocorrem quando a página carregada ocupa cada vez mais memória.
Um exemplo de vazamento de memória é quando seu navegador começa a ficar lento após uma longa sessão de trabalho com o aplicativo.
Você pode usar as ferramentas do desenvolvedor do Chrome para detectar vazamentos de memória em seu aplicativo. A ferramenta registra a linha do tempo na guia de desempenho. Muitos vazamentos de memória ocorrem como resultado da remoção de elementos DOM. O coletor de lixo só liberará memória quando todas as variáveis que fazem referência a esses elementos estiverem fora do escopo.
Ferramentas como Lighthouse, Google PageSpeed Insights e Chrome podem ajudá-lo a detectar problemas. O Lighthouse verifica problemas de acessibilidade, desempenho e SEO. O Google PageSpeed pode ajudá-lo a otimizar o JavaScript para melhorar o desempenho do seu aplicativo.
O navegador Chrome fornece um recurso de Ferramentas do desenvolvedor que você pode alternar clicando em F12 em sua palavra-chave. Você pode usar sua análise de desempenho para ligar e desligar a rede e verificar o consumo da CPU. Ele também verifica outras métricas para descobrir problemas que afetam seu site.
Como desenvolvedor da Web, você trabalhará muito em seu navegador da Web. A maioria dos navegadores vem com um conjunto de ferramentas de desenvolvedor para ajudá-lo a solucionar problemas do site. O recurso Ferramentas do desenvolvedor do Google Chrome tem muitas funções para ajudá-lo.