Hur du snabbar upp din JavaScript-kod.
Slingor används ofta i programmering.
Varje sats i en loop, inklusive for-satsen, exekveras för varje iteration av slinga.
Påståenden eller uppdrag som kan placeras utanför slingan kommer att göra loop köra snabbare.
for (let i = 0; i < arr.length; i++) {
let l = arr.length;
for (let i = 0; i < l; i++) {
Den dåliga koden kommer åt egenskapen length för en array varje gång slingan är itererade.
Den bättre koden kommer åt egenskapen length utanför loopen och gör loop köra snabbare.
Åtkomst till HTML DOM är mycket långsam, jämfört med andra JavaScript-satser.
Om du förväntar dig att komma åt ett DOM-element flera gånger, få tillgång till det en gång och använd det som en lokal variabel:
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Prova själv →
<!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>
Håll antalet element i HTML DOM litet.
Detta kommer alltid förbättra sidladdningen och snabba upp renderingen (sidvisning), särskilt på mindre enheter.
Varje försök att söka i DOM (som getElementsByTagName) kommer att gynnas från ett mindre DOM.
Skapa inte nya variabler om du inte planerar att spara värden.
Ofta kan du ersätta kod så här:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Med detta:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Om du lägger dina skript längst ner på sidans kropp låter webbläsaren ladda sidan först.
Medan ett skript laddas ner kommer webbläsaren inte att starta något annat Nedladdningar. Dessutom kan all analys- och renderingsaktivitet blockeras.
HTTP-specifikationen definierar att webbläsare inte ska ladda ner mer än två komponenter parallellt.
Ett alternativ är att använda defer="true"
i skripttaggen. De defer-attributet anger att skriptet ska köras efter att sidan har gjort det klar med parsningen, men det fungerar bara för externa skript.
Om möjligt kan du lägga till ditt skript på sidan med kod, efter att sidan har laddats:
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Undvik att använda nyckelordet with
. Det har en negativ effekt på fart. Det rör också upp JavaScript-omfång.
Nyckelordet with
är inte tillåtet i strikt läge.