10 JavaScript-tips og triks for å optimalisere ytelsen

JavaScript er avgjørende for webutvikling. Språket ligger bak det meste av interaktiviteten og animasjonen du vil se på nettsteder. Men JavaScript kan også føre til at et nettsted går tregere hvis koden er dårlig skrevet. Ineffektivitet kan resultere i både dårlige lastetider og lav gjengivelseshastighet.

Bruk følgende praksis for å forbedre hastigheten og ytelsen til nettstedet ditt.

1. Definer variabler lokalt

Som programmerer må du vite det hvordan scoping fungerer. Det er to typer variabler i JavaScript: lokale variabler og globale variabler.

Lokale variabler er variabler deklarert i en funksjonsblokk. Omfanget forblir bare innenfor funksjonen der de er deklarert. Globale variabler er variabler som er tilgjengelige i hele skriptet. Når det gjelder globale variabler, forblir omfanget gjennom hele programmet.

Hver gang du prøver å få tilgang til en variabel, gjør nettleseren noe kjent som et omfangsoppslag. Den sjekker det nærmeste omfanget for variabelen og fortsetter å slå opp til den finner variabelen. Jo mer omfangskjede du har i programmet, desto lengre tid vil det ta å få tilgang til variabler utenfor gjeldende omfang.

Av denne grunn er det best å alltid definere variablene dine nærmere utførelseskonteksten. Bruk bare globale variabler i sjeldne tilfeller; når du vil lagre data som brukes gjennom hele skriptet, for eksempel. Dette vil redusere antall scopes i programmet, og dermed forbedre ytelsen.

2. Last inn JavaScript asynkront

JavaScript er et enkelt-tråds programmeringsspråk. Dette betyr at når en funksjon kjøres, må den kjøres til slutten før en annen funksjon kan kjøres. Denne arkitekturen kan føre til situasjoner der kode kan blokkere tråden og fryse appen.

For at tråden skal fungere godt, bør du kjøre visse tidsbrukende oppgaver asynkront. Når en oppgave kjører asynkront, tar den ikke opp hele trådens prosessorkraft. I stedet blir funksjonen med i en hendelseskø der den utløses etter utførelse av alle andre koder.

API-kall er perfekte for det asynkrone mønsteret fordi de tar tid å løse. Så i stedet for å holde tråden oppe, ville du bruke et løftebasert bibliotek som appetitt-API for å hente dataene asynkront. På den måten kan annen kode kjøres mens nettleseren henter data fra API.

Forstå vanskelighetene med asynkron programmering, og du vil forbedre ytelsen til applikasjonen din.

3. Unngå unødvendige løkker

Bruke loops i JavaScript kan bli dyrt hvis du ikke er forsiktig. Å sykle gjennom en samling gjenstander kan belaste nettleseren mye.

Selv om du definitivt ikke kan unngå løkker i koden din, må du gjøre så lite arbeid i dem som mulig. Du kan bruke andre teknikker som unngår behovet for å gå gjennom samlingen.

For eksempel kan du lagre en matrises lengde i en annen variabel, i stedet for å lese den under hver iterasjon av loopen. Hvis du får det du ønsker fra en loop, bryter du ut av den umiddelbart.

4. Reduser JavaScript-kode

Minifisering er en effektiv metode for å optimalisere JavaScript-kode. En minimer forvandler den rå kildekoden din til en mindre produksjonsfil. De fjerner kommentarer, trimmer unødvendig syntaks og forkorter lange variabelnavn. De fjerner også ubrukt kode og optimerer eksisterende funksjoner for å ta opp færre linjer.

Eksempler på minimere er Google Closure Compiler, UglifyJS og Microsoft AJAX minifier. Du kan også forminske koden manuelt ved å inspisere den og se etter måter å optimalisere den på. For eksempel kan du forenkle if-setningene i koden din.

5. Komprimer store filer med Gzip

De fleste kunder bruk Gzip for å komprimere og dekomprimere store JavaScript-filer. Når en nettleser ber om en ressurs, kan serveren komprimere den for å returnere en mindre fil i svaret. Når klienten mottar filen, dekomprimerer den den. Totalt sett sparer denne tilnærmingen båndbredde og reduserer ventetiden, noe som forbedrer applikasjonsytelsen.

6. Minimer DOM-tilgang

Tilgang til DOM kan påvirke ytelsen til applikasjonen din fordi nettleseren må oppdateres for hver DOM-oppdatering. Det er best å begrense DOM-tilgang til minst mulig frekvens. En måte du kan gjøre dette på er ved å lagre referanser til nettleserobjekter.

Du kan også bruke et bibliotek som React som gjør endringer i den virtuelle DOM før du skyver dem til den virkelige DOM. Som et resultat oppdaterer nettleseren delene av applikasjonen som trenger oppdatering, i stedet for å oppdatere hele siden.

7. Utsett unødvendig belastning av JavaScript

Selv om det er viktig at siden din lastes inn i tide, trenger ikke alle funksjoner å fungere under den første innlastingen. Anta at du har en klikkbar knapp og en fanemeny som refererer til JavaScript-kode; du kan utsette begge til etter at siden er lastet inn.

Denne metoden frigjør prosessorkraft, slik at du kan gjengi de nødvendige sideelementene i tide. Du forsinker kompilering av kode som kan holde den første visningen av siden. Så, når siden er ferdig lastet, kan du begynne å laste inn funksjonene. På den måten kan brukeren nyte rask lastetid og begynne å samhandle med elementene i tide.

Du kan også inkludere den minste mengden CSS og JavaScript i head-elementet ditt, slik at det laster umiddelbart. Sekundærkode kan da leve i separate .css- og .js-filer. Denne teknikken krever god kunnskap om hvordan DOM fungerer.

8. Bruk en CDN for å laste JavaScript

Å bruke et innholdsleveringsnettverk bidrar til å øke hastigheten på sidens lastetid, men det er ikke alltid effektivt. For eksempel, hvis du velger et CDN uten en lokal server i en besøkendes land, vil de ikke dra nytte av det.

For å løse dette problemet kan du bruke verktøy til å sammenligne flere CDN-er og bestemme hvilken som gir best ytelse for ditt bruk. For å finne ut hvilket CDN som er best for biblioteket ditt, sjekk ut cdnjs nettsted.

9. Fjern minnelekkasjer

Minnelekkasjer kan påvirke ytelsen til en applikasjon negativt. Lekkasjer oppstår når den innlastede siden tar opp mer og mer minne.

Et eksempel på en minnelekkasje er når nettleseren din begynner å tregere etter en lang økt med å jobbe med applikasjonen.

Du kan bruke Chrome Developer Tools til å oppdage minnelekkasjer i appen din. Verktøyet registrerer tidslinjen i ytelsesfanen. Mange minnelekkasjer oppstår som et resultat av fjerning av DOM-elementer. Søppelsamleren vil bare frigjøre minne når alle variabler som refererer til disse elementene er utenfor omfanget.

Verktøy som Lighthouse, Google PageSpeed ​​Insights og Chrome kan hjelpe deg med å oppdage problemer. Lighthouse sjekker for problemer med tilgjengelighet, ytelse og SEO. Google PageSpeed ​​kan hjelpe deg med å optimalisere JavaScript for å forbedre applikasjonens ytelse.

Chrome-nettleseren har en funksjon for utviklerverktøy som du kan bytte ved å klikke F12 på søkeordet ditt. Du kan bruke ytelsesanalysen til å slå nettverket av og på og sjekke CPU-forbruk. Den sjekker også andre beregninger for å avdekke problemer som påvirker nettstedet ditt.

Som nettutvikler kommer du til å jobbe mye i nettleseren din. De fleste nettlesere kommer med en pakke med utviklerverktøy for å hjelpe deg med feilsøking av nettstedsproblemer. Google Chromes utviklerverktøy har mange funksjoner for å hjelpe deg.