Seks jQuery Best Practices for forbedret ydelse
jQuery er en af det mest populære JavaScript-biblioteker i dag. API'en er meget nem at bruge, hvilket fører til en ikke så stejl indlæringskurve. Mange projekter bruger jQuery-kode i stedet for direkte at bruge vanilla JavaScript til at indhente dynamiske funktionaliteter.
Men jQuery har også sine mangler. Det kan føre til nogle præstationsproblemer, hvis det bruges uforsigtigt ligesom det sprog, den er baseret på. Dette indlæg viser nogle af de bedste fremgangsmåder ved brug af jQuery, der hjælper os med at undgå eventuelle præstationsproblemer.
1. Lazy load scripts når det er nødvendigt
Browsere kører JavaScript før du opretter DOM-træet og maler pixelerne på skærmen, fordi scripts kan tilføje nye elementer til siden eller ændre layout eller stil på nogle DOM-noder. Så ved giver browseren mindre scripts til at udføre under sideindlæsning, vi kan reducere den tid det tager til den endelige DOM-træ skabelse og maleri, hvorefter brugeren vil være kunne se siden.
En måde at gøre dette i jQuery er ved at bruge $ .getScript at indlæse enhver script fil på tidspunktet for dens behov snarere end under sidebelastning.
$ .getScript ("scripts / gallery.js", tilbagekald); Det er en ajax-funktion, der vil få en enkelt scriptfil, når du vil have det, men bemærk at den hentede fil ikke er cachelagret. For at aktivere caching for getScript du skal aktivere det samme for alle de ajax-anmodninger. Du kan gøre det ved at bruge koden nedenfor:
$ .ajaxSetup (cache: true);
2. Undgå $ (vindue) .load () hvis dit script ikke behøver nogen underressourcer på siden
Det $ (dokument) .ready () svarer til DOMContentLoaded (hvor DOMContentLoaded er tilgængelig) og $ (vindue) .load () til belastning. Den første bliver fyret, når en egen DOM er indlæst, men ikke eksterne aktiver som billeder og stylesheets. Den anden er fyret, når alt det er en side består af, herunder sit eget indhold og dets underressourcer er indlæst.
Så hvis du skriver et script, der afhænger af en sides underressourcer, kan du ændre baggrundsfarven på a div Det er stylet af et eksternt stilark, det er bedst at bruge $ (vindue) .load ().
Men hvis det ikke er tilfældet, er det bedre at holde fast ved $ (dokument) .ready () fordi jQuery kalder det parat Event Handler, uanset om du bruger $ (dokument) .ready () eller ej, så brug det når du kan.
3. Brug løsrive at fjerne elementer fra DOM, der skulle ændres.
“Omløb” er et udtryk, der refererer til layoutændringer på en webside, det er når browseren omarrangerer en sides elementer for at rumme et nyt element, tilpasse til strukturelle ændringer af et element, udfylde hullet tilbage af et fjernet element eller en anden handling, der har brug for en layoutændring på siden. reflow er en dyrt browserproces.
Vi kan reducere nej. af reflows forårsaget af strukturelle ændringer i et element ved at udføre ændringerne på det efter tager det ud af sidestrømmen og sætte det tilbage, når det er færdigt. Hvis du tilføjer flere rækker til et bord en efter en, vil det medføre mange reflows. Så det er bedre at tag bordet ud af DOM-træet, tilføj rækkerne til det og læg det tilbage til DOM; dette vil reducere reflows.
jQuery er løsrive() Lad os fjerne et element fra siden, det er forskelligt fra fjerne() fordi det vil gemme de data, der er knyttet til elementet, for når det skal tilføjes til siden senere. Et løsrevet element kan derefter sættes tilbage på siden, når det er blevet ændret.
4. Brug css () for at indstille højde eller bredde i stedet for højde() og bredde()
Hvis du indstiller højden eller bredden af et element i jQuery, foreslår jeg at du bruger css () funktion, fordi du indstiller disse værdier ved hjælp af højde() og bredde() vil medføre ekstra reflows på grund af adgangen til nogle layout egenskaber i funktionen computeStyleTests i jQuery (testet i den seneste version).
For koden p.height ( "300 px"); her er reflows.
Til p.css ("højde": "300px");
computeStyleTests er vant til at lave nogle supporttests. Det kaldes også samtidig få højden og bredden ved hjælp af begge css () og højde bredde() , men for indstilling det kræves kun højde bredde() hvilket måske ikke er nødvendigt, så brug css () i stedet.
5. Få ikke adgang til layoutegenskaber unødigt
Adgang til layoutegenskaber som højde, bredde, margen osv. Udløser reflow på siden. Årsagen er, når du spørger browseren for nogen af layoutegenskaberne, den sørger for at du får den opdaterede værdi (hvis værdien er ugyldiggjort før) af genberegning af værdierne og anvendelse af layoutændringer.
Så om du bruger jQuery eller vanilla JavaScript, pas på at få adgang til layoutegenskaber unødigt især i en løkke eller følgelig efter at have ændret stil.
6. Gør brug af caching hvor du kan
Nogle af jQuery's funktioner leveres med cachemekanismer, der kan bruges til god brug. Ajax-anmodninger cache ressourcerne, men det er ikke tilgængeligt for manuskript og jsonp, så hvis du vil have caching på tværs af alle dine ajax-forespørgsler, vil du måske sæt det globalt som nedenfor.
Bemærk også, at hvis du henter ressourcer ved hjælp af stolpe det bliver ikke cachelagret, selvom du aktiverer caching med ovenstående opsætning.
Som jeg nævnte før, løsrive() cacher dataene i forbindelse med elementet, der skal fjernes i modsætning til fjerne();skjule() caches den oprindelige CSS Skærm værdi af et element, før det gemmes, så det kan genoprettes senere uden at tabe dataene.
Konklusion
En måde du kan være sikker på, at du bruger den mest effektive jQuery-kode til dit behov, er at vente, indtil du rent faktisk har kørt din kode og bemærket, om der er et præstationsproblem eller ej. Hvis det er, skal du bruge præstations- og debuggerværktøjerne til finde ud af roden af problemet.
Da jQuery er som en cocoon for JavaScript med yderligere funktioner til browser kompatibilitet og funktioner, kan det være svært at diagnosticere problemerne uden disse værktøjer.
