tutoriais mais recente desenvolvimento web
 

JavaScript atuação


Como acelerar o seu código JavaScript.


Reduzir a atividade em Loops

Loops são muitas vezes usadas na programação.

Cada instrução em um loop, incluindo o for declaração, é executado para cada iteração do loop.

Procurar declarações ou atribuições que podem ser colocados fora do loop.

Bad cupom:

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

Melhor cupom:

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

O código ruim acessa a propriedade length de uma matriz cada vez que o loop é iterativo.

O código melhor acessa a propriedade de comprimento fora do loop, e faz com que o loop de execução mais rápida.


Reduzir DOM Acesso

Acessando o DOM HTML é muito lento, em comparação com outras instruções JavaScript.

Se você esperar para acessar um elemento DOM várias vezes, acessá-lo uma vez, e usá-lo como uma variável local:

Exemplo

obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Tente você mesmo "

Reduzir DOM Tamanho

Manter o número de elementos no HTML DOM pequena.

Esta será sempre melhorar o carregamento da página, e acelerar a renderização (exibição da página), especialmente em dispositivos menores.

Toda tentativa de procurar o DOM (como getElementsByTagName) beneficiarão de um DOM menor.


Evite Variáveis ​​desnecessários

Não crie novas variáveis ​​se você não planeja salvar valores.

Muitas vezes, você pode substituir um código como este:

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

Com isso:

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

Atraso JavaScript Carregando

Colocando seus scripts na parte inferior do corpo da página, permite que o navegador carregar a página pela primeira vez.

Enquanto um script está baixando, o navegador não irá iniciar quaisquer outros downloads. Além disso todas as atividades de análise e renderização pode ser bloqueado.

A especificação HTTP define que os navegadores não deve 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 página ter terminado a análise, mas ele só funciona para scripts externos.

Se possível, você pode adicionar seu script para a página de código, após o carregamento 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 com

Evite usar o com palavras-chave. Ela tem um efeito negativo sobre a velocidade. Ele também atravanca escopos JavaScript.

O com palavra-chave não é permitido no modo estrito.