JavaScript Performance

Hoe u uw JavaScript-code kunt versnellen.

Vermindere de activiteit binnen de lus

Programmeren gebruikt vaak lussen.

Elke iteratie van de lus, elke staat in de lus, inclusief for Zullen worden uitgevoerd.

Staten of toewijzingen die buiten de lus kunnen worden geplaatst, zullen de lus sneller laten draaien.

Slechte code:

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

Beter code:

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

Slechte code zal tijdens elke iteratie van de lus toegang krijgen tot de length Eigenschappen.

Goede code raakt buiten de lus toegang tot length Eigenschappen, zodat de lus sneller wordt.

Vermindere de toegang tot de DOM

Het toegangspunt tot de HTML DOM is veel traag in vergelijking met andere JavaScript.

Als u een DOM-element meerdere keren wilt gebruiken, raadpleeg het slechts een keer en gebruik het als een lokale variabele:

Voorbeeld

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

Probeer het zelf uit

Verklein de omvang van de DOM

Probeer zoveel mogelijk elementen in de HTML DOM te verminderen.

Dit zal altijd de laadtijd van de pagina verbeteren en de rendering (het weergeven van de pagina) versnellen, vooral op kleinere apparaten.

Elke poging om de DOM te zoeken (bijvoorbeeld getElementsByTagNameAlles zal profiteren van een kleinere DOM.

Voorkom onnodige variabelen

Maak geen nieuwe variabelen aan die u niet van plan bent op te slaan.

U kunt meestal de code vervangen door:

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

Gebruik deze code:

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

Vertraag het laden van JavaScript

Plaats de script aan het einde van de pagina, zodat de browser eerst de pagina laadt.

Bij het downloaden van scripts, start de browser geen andere downloads. Bovendien kunnen alle parsing- en renderingactiviteiten worden geblokkeerd.

Het HTTP-protocol definieert dat de browser geen meerderheid van twee elementen parallel moet downloaden.

Een optie is om de defer="true"De defer-eigenschap bepaalt dat het script moet worden uitgevoerd nadat de pagina is geparseerd, maar het is alleen van toepassing op externe scripts.

Indien mogelijk, kunt u scripts toevoegen aan de pagina met behulp van code nadat de pagina is geladen:

Voorbeeld

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

Vermijd het gebruik van with

Vermijd het gebruik van with sleutelwoorden. Het heeft een negatieve invloed op de snelheid. Het kan ook de JavaScript-scope verwarren.

In strikt modusNiet toegestaan with-sleutelwoord.