10 JavaScript tips og tricks til at optimere ydeevnen

JavaScript er afgørende for webudvikling. Sproget står bag det meste af den interaktivitet og animation, du vil se på websteder. Men JavaScript kan også få en hjemmeside til at bremse, hvis koden er dårligt skrevet. Ineffektivitet kan resultere i både dårlige indlæsningstider og langsom gengivelseshastighed.

Brug følgende fremgangsmåder for at forbedre hastigheden og ydeevnen på dit websted.

1. Definer variabler lokalt

Som programmør skal du vide det hvordan scoping fungerer. Der er to typer variabler i JavaScript: lokale variabler og globale variabler.

Lokale variable er variable, der er erklæret i en funktionsblok. Omfanget forbliver kun inden for den funktion, hvor de er erklæret. Globale variabler er variabler, der er tilgængelige i hele scriptet. I tilfælde af globale variabler forbliver omfanget gennem hele programmet.

Hver gang du forsøger at få adgang til en variabel, udfører browseren noget, der kaldes et omfangsopslag. Den tjekker det nærmeste omfang for variablen og bliver ved med at kigge op, indtil den finder variablen. Jo mere omfangskæde du har i dit program, jo ​​længere tid vil det tage at få adgang til variabler ud over det aktuelle omfang.

Af denne grund er det bedst altid at definere dine variable tættere på udførelseskonteksten. Brug kun globale variabler i sjældne tilfælde; når du f.eks. vil gemme data brugt i hele scriptet. Dette vil reducere antallet af scopes i dit program og derved forbedre ydeevnen.

2. Indlæs JavaScript asynkront

JavaScript er et enkelt-trådet programmeringssprog. Det betyder, at når en funktion er udført, skal den køre til slutningen, før en anden funktion kan køre. Denne arkitektur kan føre til situationer, hvor kode kan blokere tråden og fryse appen.

For at holde tråden til at fungere godt, bør du køre visse tidsspildende opgaver asynkront. Når en opgave kører asynkront, optager den ikke hele trådens processorkraft. I stedet slutter funktionen sig til en begivenhedskø, hvor den udløses efter udførelse af alle andre koder.

API-kald er perfekte til det asynkrone mønster, fordi de tager tid at løse. Så i stedet for at få det til at holde tråden oppe, ville du bruge et løftebaseret bibliotek som appetch API til at hente dataene asynkront. På den måde kan anden kode køre, mens browseren henter data fra API'et.

Forstå forviklingerne ved asynkron programmering, og du vil forbedre din applikations ydeevne.

3. Undgå unødvendige løkker

Brug af loops i JavaScript kan være dyrt, hvis du ikke er forsigtig. At cykle gennem en samling af genstande kan belaste browseren meget.

Selvom du bestemt ikke kan undgå sløjfer i din kode, skal du lave så lidt arbejde i dem som muligt. Du kan bruge andre teknikker, der undgår behovet for at gå gennem samlingen.

For eksempel kan du gemme et arrays længde i en anden variabel i stedet for at læse den under hver iteration af løkken. Hvis du får, hvad du ønsker fra en loop, skal du bryde ud af den med det samme.

4. Formindsk JavaScript-kode

Minification er en effektiv metode til at optimere JavaScript-kode. En minimizer omdanner din rå kildekode til en mindre produktionsfil. De fjerner kommentarer, trimmer unødvendig syntaks og forkorter lange variabelnavne. De fjerner også ubrugt kode og optimerer eksisterende funktioner for at optage færre linjer.

Eksempler på minimizere er Google Closure Compiler, UglifyJS og Microsoft AJAX minifier. Du kan også formindske din kode manuelt ved at inspicere den og lede efter måder at optimere den på. Det kan du f.eks forenkle if-sætningerne i din kode.

5. Komprimer store filer med Gzip

De fleste kunder brug Gzip til at komprimere og dekomprimere store JavaScript-filer. Når en browser anmoder om en ressource, kan serveren komprimere den for at returnere en mindre fil i svaret. Når klienten modtager filen, dekomprimerer den den. Samlet set sparer denne tilgang båndbredde og reducerer latens, hvilket forbedrer applikationens ydeevne.

6. Minimer DOM-adgang

Adgang til DOM kan påvirke ydeevnen af ​​din applikation, fordi browseren skal opdateres med hver DOM-opdatering. Det er bedst at begrænse DOM-adgang til den mindst mulige frekvens. En måde du kan gøre dette på er ved at gemme referencer til browserobjekter.

Du kan også bruge et bibliotek som React, som foretager ændringer i den virtuelle DOM, før du skubber dem til den rigtige DOM. Som et resultat opdaterer browseren de dele af applikationen, der skal opdateres, i stedet for at opdatere hele siden.

7. Udskyd unødvendig belastning af JavaScript

Selvom det er essentielt, at din side indlæses til tiden, behøver ikke alle funktioner at fungere ved den indledende indlæsning. Antag, at du har en klikbar knap og en fanemenu, der refererer til JavaScript-kode; du kan udsætte begge dele, indtil siden er indlæst.

Denne metode frigør processorkraft, så du kan gengive de nødvendige sideelementer til tiden. Du forsinker kompileringen af ​​kode, der kan holde den første visning af siden. Når siden er færdig med at indlæse, kan du begynde at indlæse funktionerne. På den måde kan brugeren nyde hurtig indlæsningstid og begynde at interagere med elementerne til tiden.

Du kan også inkludere den mindste mængde CSS og JavaScript i dit hovedelement, så det indlæses med det samme. Sekundær kode kan derefter leve i separate .css- og .js-filer. Denne teknik kræver et anstændigt kendskab til hvordan DOM fungerer.

8. Brug et CDN til at indlæse JavaScript

Brug af et indholdsleveringsnetværk hjælper med at fremskynde sideindlæsningstiden, men det er ikke altid effektivt. For eksempel, hvis du vælger et CDN uden en lokal server i en besøgendes land, vil de ikke gavne det.

For at løse dette problem kan du bruge værktøjer til at sammenligne flere CDN'er og beslutte, hvad der giver den bedste ydeevne til din brug. For at lære, hvilket CDN der er bedst til dit bibliotek, tjek cdnjs internet side.

9. Fjern hukommelseslækager

Hukommelseslækager kan påvirke en applikations ydeevne negativt. Lækager opstår, når den indlæste side optager mere og mere hukommelse.

Et eksempel på en hukommelseslækage er, når din browser begynder at blive langsommere efter en lang session med at arbejde med applikationen.

Du kan bruge Chrome Developer Tools til at opdage hukommelseslækager i din applikation. Værktøjet registrerer tidslinjen på fanen ydeevne. Mange hukommelseslækager opstår som et resultat af fjernelse af DOM-elementer. Skraldesamleren frigiver kun hukommelse, når alle variabler, der refererer til disse elementer, er uden for rækkevidde.

Værktøjer som Lighthouse, Google PageSpeed ​​Insights og Chrome kan hjælpe dig med at opdage problemer. Lighthouse tjekker for problemer med tilgængelighed, ydeevne og SEO. Google PageSpeed ​​kan hjælpe dig med at optimere JavaScript for at forbedre din applikations ydeevne.

Chrome-browseren har en funktion til udviklerværktøjer, som du kan skifte til ved at klikke på F12 på dit søgeord. Du kan bruge dens ydeevneanalyse til at tænde og slukke netværket og kontrollere CPU-forbruget. Den kontrollerer også andre målinger for at afdække problemer, der påvirker dit websted.

Som webudvikler kommer du til at arbejde meget i din webbrowser. De fleste browsere leveres med en suite af udviklerværktøjer til at hjælpe dig med fejlfinding af webstedsproblemer. Funktionen Google Chromes Developer Tools har mange funktioner til at hjælpe dig.