JavaScript- prestaties
Hoe u uw JavaScript-code kunt versnellen.
Activiteit in lussen verminderen
Loops worden vaak gebruikt bij het programmeren.
Elke instructie in een lus, inclusief de for-instructie, wordt uitgevoerd voor elke iteratie van de lus.
Uitspraken of opdrachten die buiten de lus kunnen worden geplaatst, zorgen ervoor dat de lus sneller loopt.
Slechte:
for (let i = 0; i < arr.length; i++) {
Betere code:
let l = arr.length;
for (let i = 0; i < l; i++) {
Elke keer dat de lus wordt herhaald, krijgt de slechte code toegang tot de eigenschap length van een array.
De betere code heeft toegang tot de eigenschap length buiten de lus en zorgt ervoor dat de lus sneller wordt uitgevoerd.
DOM-toegang verminderen
Toegang tot de HTML DOM is erg traag in vergelijking met andere JavaScript-instructies.
Als u verwacht meerdere keren toegang te krijgen tot een DOM-element, open het dan één keer en gebruik het als een lokale variabele:
Voorbeeld
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
DOM-grootte verkleinen
Houd het aantal elementen in de HTML DOM klein.
Dit zal altijd het laden van pagina's verbeteren en het renderen (paginaweergave) versnellen, vooral op kleinere apparaten.
Elke poging om de DOM te doorzoeken (zoals getElementsByTagName) heeft baat bij een kleinere DOM.
Vermijd onnodige variabelen
Maak geen nieuwe variabelen als u niet van plan bent waarden op te slaan.
Vaak kun je code als volgt vervangen:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Hiermee:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Het laden van JavaScript vertragen
Door uw scripts onderaan de pagina te plaatsen, kan de browser de pagina eerst laden.
Terwijl een script wordt gedownload, zal de browser geen andere downloads starten. Bovendien kunnen alle parseer- en weergaveactiviteiten worden geblokkeerd.
De HTTP-specificatie definieert dat browsers niet meer dan twee componenten parallel mogen downloaden.
Een alternatief is om defer="true"
in de scripttag te gebruiken. Het kenmerk defer geeft aan dat het script moet worden uitgevoerd nadat de pagina is geparseerd, maar het werkt alleen voor externe scripts.
Indien mogelijk kunt u uw script met code aan de pagina toevoegen, nadat de pagina is geladen:
Voorbeeld
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Vermijd gebruik met
Vermijd het gebruik van het with
trefwoord. Het heeft een negatief effect op de snelheid. Het vervuilt ook JavaScript-scopes.
Het with
trefwoord is niet toegestaan in de strikte modus.