Como acelerar a execução do código JavaScript

Ao desenvolver um aplicativo ou um site, um dos elementos mais cruciais a serem considerados é o desempenho do aplicativo ou site. Como usuário, eu não gostaria que nenhum aplicativo levasse muito tempo para carregar ou sempre que clico em algo e tenho que esperar por alguma ação. Muitas vezes, se a página da web levar de 5 a 6 segundos para carregar a maioria dos usuários, incluindo eu, deixaria a página da web.

Para desenvolvedores da web, o JavaScript é uma ferramenta fantástica. Todo desenvolvedor da web aprendeu JavaScript em algum momento de sua vida. No entanto, o código JavaScript ruim resulta em sites mais lentos.

Com isso em mente, um desenvolvedor sempre procura maneiras de melhorar sua página da web. Você está com sorte porque hoje vamos falar sobre como acelerar a execução do código JavaScript.

Redução de atividades em loops

Um programador geralmente usa loops para encurtar seu código. No entanto, deve -se ter em mente que existem algumas maneiras ruins de usar loops que tornam seu programa lento.

Vamos dar um exemplo de loop "para".

Exemplo:

Este loop está programaticamente certo, mas seu desempenho será ruim. Podemos colocar o MyArray.Declaração de comprimento fora do loop para que não precise calcular o comprimento repetidamente até que o loop termine.

Solução:

Deixe Len = MyArray.comprimento;
para (vamos i = 0; i < len; i++)
//Olá

Nesse loop, podemos ver que o comprimento é fixo e o loop não precisa calcular o comprimento de uma matriz toda vez que ele itera. Portanto, a velocidade aumenta e o desempenho também.

Redução de acesso ao DOM

Se compararmos a declaração JavaScript para acessar o HTML DOM, descobriremos que o acesso a HTML DOM é muito lento. Isso não é um problema se não estivermos acessando ou executando muitas operações de DOM. No entanto, quando você realiza muitas operações de DOM, isso afeta a velocidade da página da web.

A solução para isso é armazenar o elemento DOM em uma variável local e depois podemos acessar isso várias vezes.

Por exemplo:

const myobj = documento.getElementById ("Speed"), innerhtml = "não alcançado";
const myobj = documento.getElementById ("velocidade").hidden = "false";
// lento e dificulta a velocidade

Isso faz com que nosso programa seja executado ineficientemente.

Vejamos outro exemplo que aborda esse problema.

const myobj = documento.getElementById ("Speed");
myobj.innerhtml = "alcançado";
myobj.hidden = "false";

Agora que analisamos a redução do DOM Access, vamos brilhar a luz sobre a redução do tamanho do DOM para melhorar a velocidade de nossa página da web em JavaScript.

Redução do tamanho do DOM

Antes de entrar na redução do tamanho do DOM, vejamos o tamanho excessivo do DOM, o que significa que sua página tem muitos nós DOM/componentes html se o tamanho do DOM for muito grande. Isso também pode significar que seus elementos da sua página são profundamente aninhados. Isso resulta no consumo de mais poder, reduzindo o desempenho ou a velocidade da página.

A solução é que o número de elementos deve ser minimizado no HTML DOM. A vantagem disso é que ele melhorará o carregamento da página, bem como acelerar o processo de renderização, que é a exibição da página. É muito útil, especialmente em dispositivos menores, como telefones celulares etc.

Eliminando variáveis ​​desnecessárias

Este é o truque mais simples para aprimorar o desempenho da sua página da web. Por que fazer variáveis ​​quando não são necessárias? Além disso, por que fazer variáveis ​​onde você sabe que está apenas usando para exibi -lo em algum lugar? Quando evitamos fazer variáveis ​​desnecessárias, o desempenho da página da web aumenta.

Por exemplo, código ruim:

Let FirstName = "Jhon";
Let LastName = "Cena";
Let FullName = FirstName+""+LastName;
alerta (nome completo);

Neste exemplo, podemos ver que estamos armazenando o primeiro nome e o último nome em FullName apenas para exibi -lo em um alerta. Não seria melhor alertar diretamente o primeiro nome e o último nome? É isso que eliminar variáveis ​​desnecessárias é.

Solução (bom código):

Let FirstName = "Jhon";
Let LastName = "Cena";
alerta (primeiro nome+""+lastName);

Carregamento de atraso de javascript

Para aprimorar o desempenho da página da web em JavaScript, é uma prática comum colocar uma etiqueta de script ou dentro da etiqueta do script, o código JavaScript no final da página HTML. O principal objetivo é que o navegador carregue o HTML primeiro e depois o código JavaScript. Para colocá -lo em termos técnicos, enquanto um script está baixando, o navegador não iniciará outros downloads e toda a análise e renderização será bloqueada.

Também podemos usar "adiar =" true "" em nossa tag de script. A função do atributo de adiamento é que ele especifica que o script só deve ser executado assim que a página terminar de analisar. Em outras palavras, espera até que todo o DOM seja carregado. Deve -se notar, no entanto, que é compatível apenas com scripts externos.

Exemplo:

Evite usar a palavra -chave "com"

Com a palavra -chave é usada para fazer referência às propriedades ou métodos de um objeto, pois é um tipo de taquigrafia. Usando a palavra -chave "com" diminua a velocidade. A outra razão para não usar a palavra -chave é que ela se esgota os escopos de JavaScript.

Minify JavaScriptCode

Minificação ou minimização do código JavaScript é outro método para acelerar a execução do nosso código JavaScript. Minificar o código JavaScript significa simplesmente remover ou alterar todos os caracteres indesejados e desnecessários do código -fonte JavaScript, mas sem alterar a funcionalidade do programa. Inclui várias coisas, como remover comentários, semicolons e espaços em branco. Além disso, também envolve o uso de nomes de função curta e variáveis. Vamos ver um exemplo antes e depois da minificação de nosso código:

Antes de minimizar:

//a função
// Qual log do console
// a primeira mensagem da pessoa
Função FirstMessage (nome)
console.log ("A primeira mensagem é de:", nome);

// Agora ligue para a função
FirstMessage ("John");

Depois de minimizar:

função fmsg (n) console.log ("A primeira mensagem é de:", n) FirstMessage ("John");

Conclusão

Um desenvolvedor sempre mantém o equilíbrio entre a confiabilidade e a otimização do código. É por esse motivo que discutimos como acelerar a execução do código JavaScript neste artigo. Todas as dicas e truques mencionados acima quando usados ​​juntos terão uma melhoria significativa na velocidade do código JavaScript. No entanto, deve -se ter em mente que, embora o desempenho seja necessário, não está acima de detectar erros ou adicionar funcionalidades.