Desempenho JavaScript
Como acelerar seu código JavaScript.
Reduza a atividade em loops
Loops são frequentemente usados em programação.
Cada instrução em um loop, incluindo a instrução for, é executada para cada iteração do loop.
Instruções ou atribuições que podem ser colocadas fora do loop tornarão o loop mais rápido.
Ruim:
for (let i = 0; i < arr.length; i++) {
Código melhor:
let l = arr.length;
for (let i = 0; i < l; i++) {
O código incorreto acessa a propriedade length de um array toda vez que o loop é iterado.
O melhor código acessa a propriedade length fora do loop e faz com que o loop seja executado mais rapidamente.
Reduzir o acesso ao DOM
O acesso ao HTML DOM é muito lento, comparado a outras instruções JavaScript.
Se você espera acessar um elemento DOM várias vezes, acesse-o uma vez e use-o como uma variável local:
Exemplo
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Reduzir o tamanho do DOM
Mantenha o número de elementos no HTML DOM pequeno.
Isso sempre melhorará o carregamento da página e acelerará a renderização (exibição da página), especialmente em dispositivos menores.
Cada tentativa de pesquisar o DOM (como getElementsByTagName) se beneficiará de um DOM menor.
Evite variáveis desnecessárias
Não crie novas variáveis se você não planeja salvar valores.
Muitas vezes você pode substituir o código como este:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Com isso:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Atrasar o carregamento do JavaScript
Colocar seus scripts na parte inferior do corpo da página permite que o navegador carregue a página primeiro.
Durante o download de um script, o navegador não iniciará nenhum outro download. Além disso, todas as atividades de análise e renderização podem ser bloqueadas.
A especificação HTTP define que os navegadores não devem baixar mais de dois componentes em paralelo.
Uma alternativa é usar defer="true"
na tag script. O atributo defer especifica que o script deve ser executado após a conclusão da análise da página, mas só funciona para scripts externos.
Se possível, você pode adicionar seu script à página por código, após o carregamento da página:
Exemplo
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Evite usar com
Evite usar a palavra- with
chave. Tem um efeito negativo na velocidade. Ele também desordena os escopos do JavaScript.
A with
palavra-chave não é permitida no modo estrito.