JavaScript Prestanda

Hur du kan accelerera ditt JavaScript-kod.

Reducer aktivitet i loopen

Loopar används ofta i programmering.

Varje gång loopen itererar, körs varje rad i loopen, inklusive for kommer att köras.

Uttryck eller tilldelningar som kan läggas utanför loopen kommer att göra loopen snabbare.

Dålig kod:

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

Bättre kod:

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

Dålig kod läser från arrayens length .

Bra kod läser från egenskapen utanför loopen length egenskaper, så att loopen går snabbare.

Reducera DOM-åtkomst

Åtkomst till HTML DOM är mycket långsammare jämfört med annat JavaScript.

Om du förväntar dig att komma åt en viss DOM-element flera gånger, besök det bara en gång och använd det som en lokal variabel:

Exempel

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

Prova det själv

Reducer DOM-storleken

Försök att hålla antalet element i HTML DOM lågt.

Detta kommer alltid att öka sidans laddningstid och förbättra renderingen (sida visas), särskilt på mindre enheter.

Varje gång du försöker söka i DOM (t.ex. getElementsByTagNameAllt kommer att dra nytta av en mindre DOM.

Undvik onödiga variabler

Skapa inte nya variabler som du inte planerar att lagra värden i.

Du kan vanligtvis ersätta koden med:

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

Använd detta kodexempel:

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

Fördröj JavaScript-laddning

Lägg skriptet på sidans botten, så att webbläsaren laddar sidan först.

När skriptet laddas ner startar webbläsaren inte några andra nedladdningar. Dessutom kan alla tolknings- och renderingsaktiviteter blockeras.

HTTP-standarden definierar att webbläsaren inte bör ladda ner mer än två typer av element parallellt.

En alternativ metod är att använda defer="true"defer-attributet anger när skriptet ska köras efter att sidan har解析ats, men det gäller endast för externa skript.

Om möjligt kan du lägga till skript på sidan efter att sidan har laddats klart genom att använda kod:

Exempel

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

Undvik att använda with

Undvik att använda with nyckelordet. Det har negativ inverkan på hastigheten. Det kommer också att förvirra JavaScript-omgivningen.

i strikt lägeFörbjudet with-nyckelordet.