Como acelerar seu código JavaScript.
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. laço.
Instruções ou atribuições que podem ser colocadas fora do loop farão com que o loop é executado mais rápido.
for (let i = 0; i < arr.length; i++) {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 o loop é executado mais rápido.
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 como uma variável local:
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Performance</h2>
<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>
<p id="demo"></p>
<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>
</body>
</html>
Mantenha pequeno o número de elementos no HTML DOM.
Isso sempre será 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) será beneficiada de um DOM menor.
Não crie novas variáveis se não planeja salvar valores.
Muitas vezes você pode substituir um código como este:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;Com isso:
document.getElementById("demo").innerHTML = firstName + " " + lastName;Colocar seus scripts na parte inferior do corpo da página permite que o navegador carregue o página primeiro.
Enquanto um script está sendo baixado, o navegador não iniciará nenhum outro Transferências. 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 do que dois componentes em paralelo.
Uma alternativa é usar defer="true" na tag do script. O atributo defer especifica que o script deve ser executado após a página ter sido terminou a análise, 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:
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>Evite usar a palavra-chave with. Tem um efeito negativo sobre velocidade. Também desorganiza os escopos do JavaScript.
A palavra-chave with não é permitida no modo estrito.