JavaScript code optimalisatie tips voor frontenders

Één van de meest populaire code talen, JavaScript, wordt gebruikt in 96% van alle websites. Als JavaScript developer moet je altijd rekening houden met de eindgebruiker. Zo moet je ten aller tijde je code geoptimaliseerd hebben voor verschillende hardware. Maar hoe optimaliseer je JavaScript code eigenlijk?

Verwijder code die je niet gebruikt

Soms neem je functies op die helemaal niet worden gebruikt. Het is beter om deze extra code alleen in de ontwikkelomgeving te bewaren en niet voor productie te pushen, zodat de browser van de klant niet met ongebruikte code wordt belast.

Je kunt ongebruikte code handmatig verwijderen of met tools zoals Uglify of Google’s Closure Compiler. Je kunt zelfs een techniek genaamd Tree Shaking gebruiken die ongebruikte code uit de applicatie verwijderd. Bundlers zoals Webpack bieden deze techniek aan. Als je ongebruikte npm-pakketten wilt verwijderen, kun je het commando npm prune gebruiken. Meer informatie is te lezen in NPM-docs.

Cache waar mogelijk

Caching verhoogt de snelheid en prestaties van je website door de latency en het netwerkverkeer te verminderen en daardoor de tijd te verkorten die nodig is om een weergave van een bron weer te geven. Dit kan worden bereikt met behulp van de Cache API of HTTP-caching. Je vraagt je misschien af wat er gebeurt als je de content veranderd. De bovenstaande cachemechanismen zijn in staat om de cache te verwerken en opnieuw te genereren wanneer aan bepaalde voorwaarden is voldaan, zoals het publiceren van nieuwe inhoud.

Voorkom memory leaks

Omdat het een taal op een hoog niveau is, zorgt JS voor verschillende lagere beheerniveau’s, zoals geheugenbeheer. Garbage collection is een proces dat gebruikelijk is voor de meeste programmeertalen. Garbage Collection is eenvoudigweg het verzamelen en vrijmaken van geheugen dat is toegewezen aan objecten, maar dat momenteel niet wordt gebruikt in het programma. In programmeertalen zoals C moet de ontwikkelaar zorgen voor geheugentoewijzing en deallocatie met behulp van malloc () en dealloc () functies.

Hoewel garbage collection automatisch wordt uitgevoerd in JavaScript, kan het in bepaalde gevallen niet perfect zijn. In JavaScript werden ES6, Map en Set geïntroduceerd met hun “zwakkere” broers en zussen. Deze “zwakkere” tegenhanger, bekend als WeakMap en WeakSet, bevat “zwakke” verwijzingen naar objecten. Ze maken het mogelijk om niet-gerefereerde waarden te verzamelen en zo geheugenlekken te voorkomen. Je kunt hier meer lezen over WeakMaps.

Maak loops zo kort mogelijk

Looping voor grote cycli kan veel kostbare tijd kosten. Daarom moet je altijd proberen om vroegtijdig uit een loop te breken. Je kunt dit doen met behulp van het zoekwoord break en doorgaan met het trefwoord. Het is jouw verantwoordelijkheid om de meest efficiënte code te schrijven. Als je in het onderstaande voorbeeld niet uit de loop breekt met break, voert je code de loop 1000000000 keer uit, wat een duidelijke overbelasting is.

let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 'found') {
        console.log("Found");
        break;
    }
}

Als je in het onderstaande voorbeeld niet continue gebruikt terwijl de loop niet overeenkomt met de condition, voer je de functie nog steeds 1000000000 keer uit. We verwerken het array-element alleen als het in een gelijkmatige positie staat. Dit vermindert de loop executie met bijna de helft.

let arr = new Array(1000000000).fill('----');
arr[970] = 'found';
for (let i = 0; i < arr.length; i++) {
  if(i%2!=0){
        continue;
    };
    process(arr[i]);
}

Je kan hier meer lezen over loops en de performance van loops.

En zo zijn er nog veel meer tips, kijk hier naar het originele artikel op Bits and Pieces door Mahdhi Rezvi

0

0