Sådan fremskynder du din JavaScript-kode.
Sløjfer bruges ofte i programmering.
Hver sætning i en loop, inklusive for-sætningen, udføres for hver iteration af sløjfe.
Udsagn eller opgaver, der kan placeres uden for løkken, vil gøre loop løb hurtigere.
for (let i = 0; i < arr.length; i++) {
let l = arr.length;
for (let i = 0; i < l; i++) {
Den dårlige kode får adgang til længdeegenskaben for et array, hver gang løkken er itererede.
Jo bedre kode får adgang til egenskaben længde uden for løkken og gør loop løb hurtigere.
Adgang til HTML DOM er meget langsom sammenlignet med andre JavaScript-sætninger.
Hvis du forventer at få adgang til et DOM-element flere gange, skal du få adgang til det én gang og bruge det som en lokal variabel:
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Prøv det selv →
<!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>
Hold antallet af elementer i HTML DOM lille.
Dette vil altid forbedre sideindlæsning og fremskynde gengivelsen (sidevisning), især på mindre enheder.
Ethvert forsøg på at søge i DOM (som getElementsByTagName) vil gavne fra et mindre DOM.
Opret ikke nye variabler, hvis du ikke planlægger at gemme værdier.
Ofte kan du erstatte kode på denne måde:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Med dette:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Hvis du sætter dine scripts nederst på sidens krop, lader browseren indlæse side først.
Mens et script downloades, starter browseren ikke noget andet Downloads. Derudover kan al parsing og gengivelsesaktivitet blive blokeret.
HTTP-specifikationen definerer, at browsere ikke må downloade mere end to komponenter parallelt.
Et alternativ er at bruge defer="true"
i script-tagget. Det defer attribut specificerer, at scriptet skal udføres efter siden har færdig med at parse, men det virker kun for eksterne scripts.
Hvis det er muligt, kan du tilføje dit script til siden med kode, efter at siden er indlæst:
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Undgå at bruge søgeordet with
. Det har en negativ effekt på fart. Det roder også JavaScript-omfang.
Søgeordet with
er ikke tilladt i streng tilstand.