Hvordan fremskynde utførelsen av JavaScript -koden

Når du utvikler en app eller et nettsted, er et av de mest avgjørende elementene du må vurdere appens eller nettstedets ytelse. Som bruker vil jeg ikke at noen apper skal ta lang tid å laste inn, eller når jeg klikker på noe, og jeg må vente på litt handling. Ofte hvis websiden tar 5-6 sekunder å laste de fleste brukere, inkludert meg, vil forlate nettsiden.

For nettutviklere er JavaScript et fantastisk verktøy. Hver nettutvikler lærte JavaScript på et tidspunkt i livet. Imidlertid resulterer dårlig JavaScript -kode i tregere nettsteder.

Med dette i bakhodet ser en utvikler alltid på måter å forbedre websiden hans. Du er heldig fordi vi i dag skal snakke om hvordan du kan øke hastigheten på utførelsen av JavaScript -koden.

Aktiviteter Reduksjon i løkker

En programmerer bruker ofte løkker for å forkorte koden. Imidlertid må det huskes at det er noen dårlige måter å bruke løkker som gjør programmet ditt sakte.

La oss ta et "for" sløyfeeksempel.

Eksempel:

Denne sløyfen er programmatisk riktig, men ytelsen vil være dårlig. Vi kan sette myarray.Lengdeuttalelse utenfor løkken slik at den ikke trenger å beregne lengden igjen og igjen til sløyfen er slutt.

Løsning:

La Len = MyArray.lengde;
for (la i = 0; i < len; i++)
//Hallo

I denne sløyfen kan vi se at lengden er festet og sløyfen ikke trenger å beregne lengden på en matrise hver gang den itereres. Derfor øker hastigheten, og det samme gjør ytelsen.

DOM -tilgangsreduksjon

Hvis vi sammenligner JavaScript -uttalelsen med tilgang til HTML DOM, vil vi oppdage at tilgang til HTML DOM er veldig treg. Dette er ikke et problem hvis vi ikke får tilgang til eller utfører mange DOM -operasjoner. Når du utfører mange DOM -operasjoner, påvirker det imidlertid hastigheten på nettsiden.

Løsningen for dette er å lagre DOM -elementet i en lokal variabel, og så kan vi få tilgang til det flere ganger.

For eksempel:

const myobj = dokument.getElementById ("Speed"), InnerHTML = "Ikke oppnådd";
const myobj = dokument.getElementById ("Speed").skjult = "falsk";
// sakte og hindrer hastigheten

Dette får programmet vårt til å utføre ineffektivt.

La oss se på et annet eksempel som takler dette problemet.

const myobj = dokument.getElementById ("hastighet");
myobj.indrehtml = "oppnådd";
myobj.skjult = "falsk";

Nå som vi har sett på DOM -tilgangsreduksjon, la oss skinne lyset på DOM -størrelsesreduksjon for å forbedre hastigheten på websiden vår i JavaScript.

DOM -størrelse reduksjon

Før du går inn i DOM -størrelsesreduksjonen, la oss se på overdreven DOM -størrelse, noe som betyr at siden din har for mange DOM -noder/HTML -komponenter hvis DOM -størrelsen er for stor. Det kan også bety at sidene dine DOM -elementer er dypt nestet. Dette resulterer i forbruk av mer kraft, og reduserer derfor sideytelsen eller hastigheten.

Løsningen er at antall elementer skal minimeres i HTML DOM. Fordelen med dette er at det vil forbedre lastingen på siden i tillegg til å øke hastigheten på gjengivelsesprosessen som vises på siden. Det er veldig nyttig, spesielt på mindre enheter som mobiltelefoner osv.

Eliminere unødvendige variabler

Dette er det enkleste trikset for å forbedre ytelsen din. Hvorfor lage variabler når de ikke er nødvendig? Hvorfor lage variabler der du vet at du bare bruker den til å vise det et sted? Når vi unngår å lage unødvendige variabler øker vår ytelse på websiden vår.

For eksempel dårlig kode:

La FirstName = "Jhon";
la lastname = "cena";
La FullName = FirstName+""+LastName;
Varsel (fullnavn);

I dette eksemplet kan vi se at vi lagrer førstenavnet og etternavnet i fullnavn bare for å vise det i et varsel. Ville det ikke være bedre å varsle førsteavnet og etternavnet direkte? Dette er hva eliminering av unødvendige variabler er.

Løsning (god kode):

La FirstName = "Jhon";
la lastname = "cena";
Alert (FirstName+""+LastName);

Forsink lasting av JavaScript

For å forbedre websidenes ytelse i JavaScript, er det en vanlig praksis å sette en skriptetag eller innenfor skriptetoden JavaScript -koden på slutten av HTML -siden. Hovedformålet er at nettleseren først skal laste inn HTML og deretter JavaScript -koden. For å sette det i tekniske termer, mens et skript laster ned, vil nettleseren ikke sette i gang andre nedlastinger, og all analysering og gjengivelse vil bli blokkert.

Vi kan også bruke "defer =" true "" i skriptet vårt. Funksjonen til defer -attributt er at den spesifiserer at skriptet bare skal utføres når siden er ferdig med å analysere. Med andre ord, det venter til hele DOM er lastet. Det skal imidlertid bemerkes at det bare er kompatibelt med eksterne skript.

Eksempel:

Unngå å bruke nøkkelordet "med"

Med nøkkelord brukes til å referere til egenskapene eller metodene til et objekt, da det er en slags korthånds. Å bruke nøkkelordet “med” bremser hastigheten. Den andre grunnen til ikke å bruke med nøkkelordet er at det klipper opp scopes of JavaScript.

Minify JavaScriptCode

Minifisering eller minimering av JavaScript -kode er en annen metode for å få fart på utførelsen av vår JavaScript -kode. Minifisering av JavaScript -kode betyr ganske enkelt å fjerne eller endre alle uønskede og unødvendige tegn i JavaScript -kildekoden, men uten å endre funksjonaliteten til programmet. Det inkluderer flere ting som å fjerne kommentarer, semikoloner så vel som hvitespaser. Bortsett fra dette innebærer det også bruk av kort funksjon og variabelnavn. La oss se et eksempel før og etter minifisering av koden vår:

Før minifying:

//funksjonen
// Hvilken konsolllogg
// den første meldingen fra person
funksjon FirstMessage (navn)
konsoll.Logg ("Første melding er fra:", navn);

// Ring nå funksjonen
FirstMessage ("John");

Etter minifying:

funksjon fmsg (n) konsoll.Logg ("Første melding er fra:", n) FirstMessage ("John");

Konklusjon

En utvikler opprettholder alltid balansen mellom påliteligheten og optimaliseringen av koden. Det er av denne grunn vi diskuterte hvordan vi kan øke hastigheten på utførelsen av JavaScript -koden i denne artikkelen. Alle tipsene og triksene som er nevnt ovenfor når de brukes sammen, vil ha en betydelig forbedring av hastigheten på JavaScript -koden. Imidlertid må man huske på at selv om ytelse er nødvendig, er det ikke over å oppdage feil eller legge til funksjonaliteter.