Seks jQuery Best Practices for forbedret ytelse
jQuery er en av de mest populære JavaScript-biblioteker i dag. API-en er veldig enkel å bruke, noe som fører til en ikke så bratt læringskurve. Mange prosjekter bruker jQuery-kode i stedet for direkte å bruke vanilj JavaScript for å få inn dynamiske funksjoner.
Men jQuery har sine mangler også. Det kan føre til noen ytelsesproblemer hvis det brukes uforsiktig akkurat som språket det er basert på. Dette innlegget vil vise noen av de beste metodene ved bruk av jQuery som vil hjelpe oss med å unngå eventuelle ytelsesproblemer.
1. Lazy load-skript når det trengs
Nettlesere kjører JavaScript før du oppretter DOM-treet og maler pikslene på skjermen, fordi skript kan legge til nye elementer på siden eller endre layout eller stil på enkelte DOM-noder. Så, av gir nettleseren mindre skript som skal utføres under sidelast, vi kan reduser tiden det tar for det endelige DOM-treverket, opprettelse og maleri, hvoretter brukeren vil være kunne se siden.
En måte å gjøre dette på i jQuery er å bruke $ .getScript å laste inn en hvilken som helst skriptfil på tidspunktet for behovet, i stedet for under sidelast.
$ .getScript ("scripts / gallery.js", tilbakeringing); Det er en ajax-funksjon som vil skaffe en enkelt skriptfil når du vil ha det, men vær oppmerksom på at filen som hentes, ikke er cached. For å aktivere caching for getScript du må aktivere det samme for alle ajax-forespørslene. Du kan gjøre det ved å bruke koden nedenfor:
$ .ajaxSetup (cache: true);
2. Unngå $ (vindu) .load () hvis skriptet ikke trenger noen delressurser på siden
De $ (dokument) .ready () tilsvarer DOMContentLoaded (hvor DOMContentLoaded er tilgjengelig) og $ (vindu) .load () til Laste. Den første blir sparken når en egen DOM er lastet, men ikke eksterne ressurser som bilder og stilark. Den andre er sparken når alt en side består av, inkludert sitt eget innhold og dets underressurser er lastet.
Så, hvis du skriver et skript som er avhengig av en sides delressurser, for eksempel å endre bakgrunnsfargen til a div som er utformet av et eksternt stilark, er det best å bruke $ (vindu) .load ().
Men hvis det ikke er tilfelle, er det bedre å holde fast ved $ (dokument) .ready () fordi jQuery ringer det klar hendelseshåndterer om du bruker det $ (dokument) .ready () eller ikke, så bruk det når du kan.
3. Bruk løsne for å fjerne elementer fra DOM som måtte endres.
“reflow” er et begrep som refererer til layoutendringer på en nettside, det er når nettleseren omarrangerer en sides elementer for å imøtekomme et nytt element, justere til strukturelle endringer av et element, fylle gapet som er igjen av et element fjernet, eller annen handling som trenger en layoutendring på siden. reflow er en dyrt nettleserprosess.
Vi kan redusere nei. av reflows forårsaket av strukturelle endringer i et element ved å utføre endringene på den etter tar det ut av sidestrømmen og sette den tilbake når den er ferdig. Hvis du legger flere rader til et bord en etter en, vil det føre til mange reflows. Så det er bedre å ta bordet ut av DOM-treet, legg til radene til det og legg det tilbake til DOM; dette vil redusere reflows.
jQuery løsne() La oss fjerne et element fra siden, det er forskjellig fra fjerne() fordi det vil lagre dataene som er knyttet til elementet for når det må legges til siden senere. Et frittliggende element kan da settes tilbake til siden når det er endret.
4. Bruk css () å angi høyde eller bredde i stedet for høyde() og bredde()
Hvis du setter høyde eller bredde på et element i jQuery, foreslår jeg at du bruker css () funksjon fordi du angir disse verdiene høyde() og bredde() vil forårsake ekstra reflows på grunn av tilgang til noen layoutegenskaper i funksjonen computeStyleTests i jQuery (testet i siste ver.).
For koden p.height ( "300 x"); her er reflows.
Til p.css ("høyde": "300px");
computeStyleTests er vant til å gjøre noen støtte tester. Det kalles også mens får Høyden og bredden bruker både css () og høyde bredde() , men for innstilling det er bare kalt for høyde bredde() som kanskje ikke er nødvendig, så bruk css () i stedet.
5. Ikke tilgang til layoutegenskaper unødvendig
Å få tilgang til layoutegenskaper som høyde, bredde, margin, etc., vil utløse reflow på siden. Årsaken er når du spør nettleseren for noen av layoutegenskapene, den sørger for at du får den oppdaterte verdien (hvis verdien er ugyldiggjort før) av omberegne verdiene og bruke noen layoutendringer.
Så om du bruker jQuery eller vanilla JavaScript, pass opp for å få tilgang til layoutegenskaper unødvendig spesielt i en løkke eller som følge av at stilen endres.
6. Gjør bruk av caching hvor du kan
Noen av jQuerys funksjoner kommer med cachemekanismer som kan brukes til god bruk. Ajax-forespørsler cache ressursene, men det er ikke tilgjengelig for manus og JSONP, så hvis du vil ha caching på tvers av alle dine ajax-forespørsler, kan det hende du vil sett det globalt som nedenfor.
Vær også oppmerksom på at hvis du henter ressurser ved hjelp av post Den blir ikke lagret selv om du aktiverer caching med konfigurasjonen ovenfor.
Som jeg nevnte før, løsne() cacher dataene som er knyttet til elementet som skal fjernes i motsetning til fjerne();gjemme seg() caches den opprinnelige CSS vise verdien av et element før du gjemmer det slik at det kan gjenopprettes senere uten å miste dataene.
Konklusjon
En måte du kan være sikker på at du bruker den mest effektive jQuery-koden for ditt behov, er å vente til du faktisk har kjørt koden din og lagt merke til om det er et ytelsesproblem eller ikke. Hvis det er, bruk ytelses- og feilsøkingsverktøyene til oppdag roten til problemet.
Siden jQuery er som en kokong for JavaScript med flere funksjoner for nettleserens kompatibilitet og funksjoner, kan det være vanskelig å diagnostisere problemene uten disse verktøyene.
