Desempenho em JavaScript

Como acelerar seu código JavaScript.

Reduza as atividades no loop

O loop é frequentemente usado em programação.

Cada iteração do loop, cada linha no loop, incluindo for Sentenças, todas serão executadas.

Sentenças ou atribuições que podem ser colocadas fora do loop tornarão o loop mais rápido.

Código ruim:

var i;
for (i = 0; i < arr.length; i++) {

Código melhor:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

Código ruim acessa o array length Atributo.

Boa código acessa fora do loop length Atributos, tornando o loop mais rápido.

Reduza as consultas ao DOM

Em comparação com outros JavaScript, o acesso ao HTML DOM é muito lento.

Se você esperar acessar um elemento DOM várias vezes, acesse apenas uma vez e use-o como uma variável local:

Exemplo

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Experimente pessoalmente

Reduza o tamanho do DOM

Tente manter o número de elementos no HTML DOM menor.

Fazer isso sempre aumentará a carga da página e acelerará a renderização (apresentação da página), especialmente em dispositivos menores.

Cada vez que tentar buscar no DOM (por exemplo getElementsByTagNameTudo isso beneficiará um DOM menor.

Evite variáveis desnecessárias

Não crie variáveis novas que não pretenda armazenar valores.

Normalmente, você pode substituir o código:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Use este código:

document.getElementById("demo").innerHTML = firstName + " " + lastName

Atrasar o carregamento do JavaScript

Coloque o script no final da página, para que o navegador carregue a página primeiro.

Quando o script é baixado, o navegador não iniciará nenhuma outra download. Além disso, todas as atividades de análise e renderização podem ser bloqueadas.

O padrão HTTP define que o navegador não deve baixar simultaneamente mais de dois tipos de elementos.

Uma opção é usar defer="true"A propriedade defer determina que o script deve ser executado após a conclusão da análise da página, mas é aplicável apenas a scripts externos.

Se possível, você pode adicionar scripts à página através de código após a conclusão da carga da página:

Exemplo

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

Evite usar with

Evite usar with Palavra-chave. Ela tem impacto negativo na velocidade. Também pode confundir o escopo do JavaScript.

No modo estritoNão permitido Palavra-chave with.