10 JavaScript-tips en -trucs om de prestaties te optimaliseren

JavaScript is essentieel voor webontwikkeling. De taal zit achter de meeste interactiviteit en animatie die je op websites ziet. Maar JavaScript kan er ook voor zorgen dat een website trager wordt als de code slecht geschreven is. Inefficiënties kunnen resulteren in zowel slechte laadtijden als een lage weergavesnelheid.

Pas de volgende praktijken toe om de snelheid en prestaties van uw website te verbeteren.

1. Variabelen lokaal definiëren

Als programmeur moet je het weten hoe scoping werkt. Er zijn twee soorten variabelen in JavaScript: lokale variabelen en globale variabelen.

Lokale variabelen zijn variabelen die binnen een functieblok worden gedeclareerd. Het bereik blijft alleen binnen de functie waarin ze zijn gedeclareerd. Globale variabelen zijn variabelen die overal in het script toegankelijk zijn. In het geval van globale variabelen blijft de reikwijdte gedurende het hele programma.

Telkens wanneer u probeert toegang te krijgen tot een variabele, doet de browser iets dat bekend staat als scope-zoekopdracht. Het controleert het dichtstbijzijnde bereik voor de variabele en blijft omhoog kijken totdat het de variabele vindt. Dus hoe meer bereikketen u in uw programma heeft, hoe langer het duurt om toegang te krijgen tot variabelen buiten het huidige bereik.

Om deze reden is het het beste om uw variabelen altijd dichter bij de uitvoeringscontext te definiëren. Gebruik globale variabelen alleen in zeldzame gevallen; wanneer u bijvoorbeeld gegevens wilt opslaan die in het hele script worden gebruikt. Hierdoor wordt het aantal scopes in uw programma verminderd, waardoor de prestaties verbeteren.

2. Laad JavaScript asynchroon

JavaScript is een programmeertaal met één thread. Dit betekent dat zodra een functie wordt uitgevoerd, deze tot het einde moet worden uitgevoerd voordat een andere functie kan worden uitgevoerd. Deze architectuur kan leiden tot situaties waarin code de thread kan blokkeren en de app kan bevriezen.

Om ervoor te zorgen dat de thread goed blijft presteren, moet u bepaalde tijdverslindende taken asynchroon uitvoeren. Wanneer een taak asynchroon wordt uitgevoerd, neemt deze niet alle verwerkingskracht van de thread in beslag. In plaats daarvan voegt de functie zich bij een gebeurteniswachtrij waar deze wordt geactiveerd na de uitvoering van alle andere codes.

API-aanroepen zijn perfect voor het asynchrone patroon omdat het tijd kost om ze op te lossen. Dus in plaats van dat het de draad ophoudt, zou je een op beloften gebaseerde bibliotheek zoals de fetch API gebruiken om de gegevens asynchroon op te halen. Op die manier kan andere code worden uitgevoerd terwijl de browser gegevens ophaalt uit de API.

Als u de fijne kneepjes van asynchrone programmering begrijpt, verbetert u de prestaties van uw toepassing.

3. Vermijd onnodige lussen

Lussen gebruiken in JavaScript kan duur zijn als je niet oppast. Door een verzameling items bladeren kan de browser zwaar belasten.

Hoewel je loops in je code absoluut niet kunt vermijden, moet je er zo min mogelijk werk in doen. U kunt andere technieken gebruiken die voorkomen dat u door de verzameling hoeft te lussen.

U kunt bijvoorbeeld de lengte van een array opslaan in een andere variabele, in plaats van deze te lezen tijdens elke iteratie van de lus. Als je krijgt wat je wilt van een lus, breek er dan onmiddellijk uit.

4. JavaScript-code verkleinen

Minificatie is een effectieve methode om JavaScript-code te optimaliseren. Een minimalizer transformeert uw onbewerkte broncode in een kleiner productiebestand. Ze verwijderen opmerkingen, snijden onnodige syntaxis af en verkorten lange namen van variabelen. Ze verwijderen ook ongebruikte code en optimaliseren bestaande functies om minder regels in beslag te nemen.

Voorbeelden van minimalizers zijn Google Closure Compiler, UglifyJS en Microsoft AJAX minifier. U kunt uw code ook handmatig verkleinen door deze te inspecteren en te zoeken naar manieren om deze te optimaliseren. Dat kan bijvoorbeeld vereenvoudig de if-statements in uw code.

5. Comprimeer grote bestanden met Gzip

De meeste klanten gebruik Gzip om te comprimeren en decomprimeren grote JavaScript-bestanden. Wanneer een browser een bron opvraagt, kan de server deze comprimeren om een ​​kleiner bestand in het antwoord terug te sturen. Wanneer de client het bestand ontvangt, decomprimeert het het. Over het algemeen bespaart deze aanpak bandbreedte en vermindert de latentie, waardoor de prestaties van de applicatie verbeteren.

6. DOM-toegang minimaliseren

Toegang tot de DOM kan van invloed zijn op de prestaties van uw toepassing, omdat de browser bij elke DOM-update moet worden vernieuwd. Het is het beste om DOM-toegang te beperken tot de laagst mogelijke frequentie. Een manier waarop u dit kunt doen, is door verwijzingen naar browserobjecten op te slaan.

Je kunt ook een bibliotheek zoals React gebruiken die wijzigingen aanbrengt in de virtuele DOM voordat ze naar de echte DOM worden gepusht. Als gevolg hiervan werkt de browser de delen van de applicatie bij die moeten worden bijgewerkt, in plaats van de hele pagina te vernieuwen.

7. Stel onnodige belasting van JavaScript uit

Hoewel het essentieel is dat uw pagina op tijd laadt, hoeven niet alle functies te werken bij de eerste keer laden. Stel dat u een klikbare knop en een tabbladmenu heeft die verwijzen naar JavaScript-code; u kunt beide uitstellen tot nadat de pagina is geladen.

Deze methode maakt verwerkingskracht vrij, waardoor u de benodigde pagina-elementen op tijd kunt renderen. U vertraagt ​​het compileren van code die de eerste weergave van de pagina zou kunnen bevatten. Zodra de pagina klaar is met laden, kunt u beginnen met het laden van de functionaliteiten. Op die manier kan de gebruiker genieten van een snelle laadtijd en op tijd beginnen met interactie met de elementen.

U kunt ook de kleinste hoeveelheid CSS en JavaScript in uw head-element opnemen, zodat deze onmiddellijk wordt geladen. Secundaire code kan dan in aparte .css- en .js-bestanden staan. Deze techniek vereist een behoorlijke kennis van hoe de DOM werkt.

8. Gebruik een CDN om JavaScript te laden

Het gebruik van een netwerk voor inhoudslevering helpt de laadtijd van pagina's te versnellen, maar is niet altijd effectief. Als u bijvoorbeeld een CDN kiest zonder een lokale server in het land van een bezoeker, profiteert deze niet.

Om dit probleem op te lossen, kunt u tools gebruiken om verschillende CDN's te vergelijken en te beslissen welke de beste prestaties biedt voor uw gebruiksscenario. Bekijk de cdnjs website.

9. Geheugenlekken verwijderen

Geheugenlekken kunnen een negatieve invloed hebben op de prestaties van een applicatie. Lekken treden op wanneer de geladen pagina steeds meer geheugen in beslag neemt.

Een voorbeeld van een geheugenlek is wanneer uw browser langzamer begint te werken na een lange werksessie met de applicatie.

U kunt Chrome Developer Tools gebruiken om geheugenlekken in uw app op te sporen. De tool registreert de tijdlijn op het tabblad Prestaties. Veel geheugenlekken treden op als gevolg van het verwijderen van DOM-elementen. De Garbage Collector zal pas geheugen vrijgeven als alle variabelen die verwijzen naar deze elementen buiten bereik zijn.

Tools zoals Lighthouse, Google PageSpeed ​​Insights en Chrome kunnen u helpen bij het opsporen van problemen. Lighthouse controleert op toegankelijkheid, prestaties en SEO-problemen. Google PageSpeed ​​kan u helpen JavaScript te optimaliseren om de prestaties van uw toepassing te verbeteren.

De Chrome-browser biedt een Developer Tools-functie die u kunt schakelen door op F12 op uw zoekwoord te klikken. U kunt de prestatieanalyse gebruiken om het netwerk in en uit te schakelen en het CPU-verbruik te controleren. Het controleert ook andere statistieken om problemen met uw website aan het licht te brengen.

Als webontwikkelaar ga je veel in je webbrowser werken. De meeste browsers worden geleverd met een reeks hulpprogramma's voor ontwikkelaars om u te helpen bij het oplossen van websiteproblemen. De functie Developer Tools van Google Chrome heeft veel functies om u te helpen.