JavaScript Performance

Hvordan du kan accelerere din JavaScript-kode.

Reducer aktiviteter i løkker

Programmering bruger ofte løkker.

Hver gang cyklussen itererer, vil hver sætning i cyklussen, herunder for vill blive udført.

Sætninger eller tildelinger, der kan placeres uden for løkken, vil gøre cyklussen hurtigere.

Dårlig kode:

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

Bedre kode:

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

Dårlig kode vil besøge arrayets length egenskaber.

God kode adgang uden for løkker length egenskaber, så cyklussen bliver hurtigere.

Reducer DOM-adgang

Adgang til HTML DOM er meget langsom sammenlignet med andet JavaScript.

Hvis du forventer at få adgang til en DOM-element flere gange, besøg den kun én gang og brug den som en lokal variabel:

Eksempel

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

Prøv det selv

Reducer DOM-størrelsen

Prøv at holde HTML DOM med færre elementer.

Dette vil altid forbedre indlæsning af siden og accelerere rendering (siden vises), især på mindre enheder.

Hver gang du forsøger at søge DOM (f.eks. getElementsByTagNameAlt vil gavne af en mindre DOM.

Undgå unødvendige variabler

Opret ikke nye variabler, som du ikke har intention om at gemme værdier i.

Du kan normalt erstatte koden:

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

Brug denne kode:

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

Forsink JavaScript-indlæsning

Placer scriptet i bunden af siden, så browseren først indlæser siden.

Når skriptet downloades, starter browseren ikke nogen andre downloads. Derudover kan alle analysering og rendering aktiviteter blive blokeret.

HTTP-specifikationen definerer, at browseren ikke bør downloade mere end to typer elementer parallelt.

En mulighed er at bruge defer="true"defer-attributten bestemmer, at skriptet skal udføres, når siden er blevet fuldt解析et, men det gælder kun for eksterne skript.

Hvis det er muligt, kan du tilføje skript til siden ved hjælp af kode, når siden er blevet fuldt indlæst:

Eksempel

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

Undgå at bruge with

Undgå at bruge with Nøgleordet. Det har en negativ indflydelse på hastigheden. Det vil også forvirre JavaScript-omgivelserne.

Strengt tilstand.Ikke tilladt with-nøgleordet.