10 JavaScript-tips och tricks för att optimera prestanda

JavaScript är avgörande för webbutveckling. Språket ligger bakom det mesta av den interaktivitet och animation du kommer att se på webbplatser. Men JavaScript kan också göra att en webbplats saktar ner om koden är dåligt skriven. Ineffektivitet kan resultera i både dåliga laddningstider och långsam renderingshastighet.

Använd följande metoder för att förbättra hastigheten och prestandan på din webbplats.

1. Definiera variabler lokalt

Som programmerare behöver du veta hur scoping fungerar. Det finns två typer av variabler i JavaScript: lokala variabler och globala variabler.

Lokala variabler är variabler som deklareras inom ett funktionsblock. Omfattningen förblir endast inom den funktion där de deklareras. Globala variabler är variabler som är tillgängliga i hela skriptet. När det gäller globala variabler kvarstår omfattningen under hela programmet.

När du försöker komma åt en variabel gör webbläsaren något som kallas en scope lookup. Den kontrollerar det närmaste omfånget för variabeln och fortsätter att leta upp tills den hittar variabeln. Således, ju mer omfattningskedja du har i ditt program, desto längre tid tar det att komma åt variabler utanför det aktuella omfånget.

Av denna anledning är det bäst att alltid definiera dina variabler närmare körningskontexten. Använd endast globala variabler vid sällsynta tillfällen; när du till exempel vill lagra data som används genom hela skriptet. Detta kommer att minska antalet scopes i ditt program och därigenom förbättra prestandan.

2. Ladda JavaScript asynkront

JavaScript är ett entrådigt programmeringsspråk. Detta innebär att när en funktion körs måste den köras till slutet innan en annan funktion kan köras. Denna arkitektur kan leda till situationer där kod kan blockera tråden och frysa appen.

För att tråden ska fungera bra bör du köra vissa tidsödande uppgifter asynkront. När en uppgift körs asynkront tar den inte upp hela trådens processorkraft. Istället går funktionen med i en händelsekö där den aktiveras efter exekvering av alla andra koder.

API-anrop är perfekta för det asynkrona mönstret eftersom de tar tid att lösa. Så istället för att låta den hålla upp tråden, skulle du använda ett löftesbaserat bibliotek som hämta API för att hämta data asynkront. På så sätt kan annan kod köras medan webbläsaren hämtar data från API: t.

Förstå krångligheterna med asynkron programmering och du kommer att förbättra prestandan för din applikation.

3. Undvik onödiga loopar

Använda loopar i JavaScript kan bli dyrt om du inte är försiktig. Att cykla genom en samling föremål kan belasta webbläsaren mycket.

Även om du definitivt inte kan undvika loopar i din kod, måste du göra så lite arbete i dem som möjligt. Du kan använda andra tekniker som undviker behovet av att gå igenom samlingen.

Du kan till exempel lagra en arrays längd i en annan variabel istället för att läsa den under varje iteration av loopen. Om du får vad du vill ha från en loop, bryt ut ur den omedelbart.

4. Förminska JavaScript-kod

Minifiering är en effektiv metod för att optimera JavaScript-kod. En minimerare omvandlar din råa källkod till en mindre produktionsfil. De tar bort kommentarer, trimmar onödig syntax och förkortar långa variabelnamn. De tar också bort oanvänd kod och optimerar befintliga funktioner för att ta upp färre rader.

Exempel på minimerare är Google Closure Compiler, UglifyJS och Microsoft AJAX minifier. Du kan också förminska din kod manuellt genom att inspektera den och leta efter sätt att optimera den. Du kan till exempel förenkla if-satserna i din kod.

5. Komprimera stora filer med Gzip

De flesta kunder använd Gzip för att komprimera och dekomprimera stora JavaScript-filer. När en webbläsare begär en resurs kan servern komprimera den för att returnera en mindre fil i svaret. När klienten tar emot filen dekomprimerar den den. Sammantaget sparar detta tillvägagångssätt bandbredd och minskar latens, vilket förbättrar applikationsprestanda.

6. Minimera DOM-åtkomst

Åtkomst till DOM kan påverka prestandan för din applikation eftersom webbläsaren måste uppdateras med varje DOM-uppdatering. Det är bäst att begränsa DOM-åtkomst till minsta möjliga frekvens. Ett sätt du kan göra detta är genom att lagra referenser till webbläsarobjekt.

Du kan också använda ett bibliotek som React som gör ändringar i den virtuella DOM innan du skjuter dem till den riktiga DOM. Som ett resultat uppdaterar webbläsaren de delar av applikationen som behöver uppdateras, istället för att uppdatera hela sidan.

7. Skjut upp onödig belastning av JavaScript

Även om det är viktigt att din sida laddas i tid, behöver inte alla funktioner fungera vid den första laddningen. Anta att du har en klickbar knapp och en flikmeny som refererar till JavaScript-kod; du kan skjuta upp båda till efter att sidan har laddats.

Denna metod frigör processorkraft, vilket gör att du kan rendera de nödvändiga sidelementen i tid. Du försenar kompileringen av kod som kan hålla den första visningen av sidan. Sedan, när sidan har laddats klart, kan du börja ladda funktionerna. På så sätt kan användaren njuta av snabb laddningstid och börja interagera med elementen i tid.

Du kan också inkludera den minsta mängden CSS och JavaScript i ditt huvudelement, så det laddas omedelbart. Sekundär kod kan sedan leva i separata .css- och .js-filer. Denna teknik kräver en anständig kunskap om hur DOM fungerar.

8. Använd ett CDN för att ladda JavaScript

Att använda ett nätverk för innehållsleverans hjälper till att påskynda sidladdningstiden, men det är inte alltid effektivt. Till exempel, om du väljer ett CDN utan en lokal server i en besökares land kommer de inte att gynnas.

För att lösa det här problemet kan du använda verktyg för att jämföra flera CDN: er och bestämma vilken som ger bäst prestanda för ditt användningsfall. För att lära dig vilket CDN som är bäst för ditt bibliotek, kolla in cdnjs hemsida.

9. Ta bort minnesläckor

Minnesläckor kan påverka en applikations prestanda negativt. Läckor uppstår när den laddade sidan tar upp mer och mer minne.

Ett exempel på en minnesläcka är när din webbläsare börjar sakta ner efter en lång session av arbete med applikationen.

Du kan använda Chrome Developer Tools för att upptäcka minnesläckor i din app. Verktyget registrerar tidslinjen på prestandafliken. Många minnesläckor uppstår som ett resultat av att DOM-element tas bort. Sophämtaren kommer bara att släppa minne när alla variabler som refererar till dessa element är utanför räckvidden.

Verktyg som Lighthouse, Google PageSpeed ​​Insights och Chrome kan hjälpa dig att upptäcka problem. Lighthouse kontrollerar problem med tillgänglighet, prestanda och SEO. Google PageSpeed ​​kan hjälpa dig att optimera JavaScript för att förbättra din applikations prestanda.

Webbläsaren Chrome har en funktion för utvecklarverktyg som du kan växla genom att klicka på F12 på ditt sökord. Du kan använda dess prestandaanalys för att slå på och av nätverket och kontrollera CPU-förbrukningen. Den kontrollerar också andra mätvärden för att upptäcka problem som påverkar din webbplats.

Som webbutvecklare kommer du att arbeta mycket i din webbläsare. De flesta webbläsare kommer med en uppsättning utvecklarverktyg för att hjälpa dig med felsökning av webbplatsproblem. Funktionen Google Chromes utvecklarverktyg har många funktioner som hjälper dig.