Šest jQuery najboljših praks za izboljšano učinkovitost

jQuery je ena od najbolj priljubljenih knjižnic JavaScript danes. Njegov API je zelo enostaven za uporabo, kar vodi do ne tako strme krivulje učenja. Veliko projektov uporablja jQuery kodo, namesto da neposredno uporablja vanilji JavaScript, da bi prineslo dinamične funkcionalnosti.

Toda jQuery ima tudi svoje pomanjkljivosti. Če ga uporabljate brezskrbno, lahko povzroči težave z učinkovitostjo kot jezik, na katerem temelji. V tej objavi boste našli nekaj najboljših praks pri uporabi jQuery, ki nam bodo pomagale, da se izognemo težavam z učinkovitostjo.

1. Lazy naložite skripte, kadar je to potrebno

Brskalniki izvajajo JavaScript, preden ustvarijo drevo DOM in barvejo pike na zaslonu, ker lahko skripti dodajo nove elemente na stran ali spremenijo postavitev ali slog nekaterih vozlišč DOM. Torej daje brskalniku manj skript za izvajanje med nalaganjem strani, mi lahko skrajša čas za končno izdelavo in slikanje drevesa DOM, po katerem bo uporabnik lahko vidite stran.

Eden od načinov za to v jQuery je z uporabo $ .getScript naložiti katerokoli skriptno datoteko v času njene potrebe in ne med nalaganjem strani.

$ .getScript ("scripts / gallery.js", povratni klic); 

To je funkcija ajax, ki bo dobila eno datoteko skripta, ko jo boste želeli, vendar upoštevajte, da datoteka, ki ste jo prenesli, ni shranjena. Če želite omogočiti predpomnjenje za getScript boste morali omogočiti enako za vse zahteve ajax. To lahko storite s spodnjo kodo:

$ .ajaxSetup (cache: true); 

2. Izogibajte se $ (okno) .load () če vaš skript ne potrebuje nobenih pod-virov na strani

The $ (document) .ready () je enakovreden DOMContentLoaded (kje DOMContentLoaded je na voljo) in $ (okno) .load () do Nalaganje. Prvi je sprožen, ko je naložen lasten DOM strani, ne pa tudi zunanjih sredstev, kot so slike in slogi. Drugi je sprožen, ko je vse, kar je sestavljena iz strani, vključno z lastno vsebino in njenimi pod-viri, naloženo.

Torej, če pišete skript, ki temelji na pod-virih strani, kot je spreminjanje barve ozadja za div ki ga je oblikovala zunanja slogovna datoteka, je najbolje uporabiti $ (okno) .load ().

Ampak, če ni tako, je bolje, da se držite $ (document) .ready () ker jQuery kliče svoj pripravljen izvajalca dogodkov, ne glede na to, ali ga uporabljate $ (document) .ready () ali ne, zato jo uporabite, ko lahko.

3. Uporabite odstranite odstraniti elemente iz DOM, ki jih je bilo treba spremeniti.

“Reflow” je izraz, ki se nanaša na spremembe postavitve na spletni strani, ko brskalnik preuredi elemente strani, da se prilagodi novemu elementu, prilagodi strukturnim spremembam elementa, zapolni vrzel, ki jo je odstranil element, ali kakšno drugo dejanje, ki potrebuje sprememba postavitve na strani. reflow je drago brskalnika.

Lahko zmanjšamo št. sprememb, ki so posledica strukturnih sprememb elementa z izvedbo sprememb na njem po vzamemo iz toka strani in da ga vrnemo, ko bo končano. Če dodajate več vrstic v tabelo enega za drugim, bo to povzročilo veliko vrnitev. Zato je bolje vzemite mizo iz drevesa DOM, dodajte vrstice in ga vrnite v DOM; to bo zmanjšalo vrnitev.

jQuery's odkleni () nam omogoča, da odstranimo element s strani, drugačen je od odstraniti() ker bo shranil podatke, povezane z elementom, ko bo treba kasneje dodati stran. Ko je bil spremenjen, se lahko odloženi element vrne nazaj na stran.

4. Uporabite css () da nastavite višino ali širino namesto višina () in premer()

Če nastavljate višino ali širino elementa v jQuery, predlagam, da uporabite css () funkcijo, ker nastavite te vrednosti z uporabo višina () in premer() bo povzročil dodatne povrnitve zaradi dostopa do nekaterih lastnosti postavitve v funkciji computeStyleTests v jQuery (preizkušeno v zadnji verziji).

Za kodo p. višina ("300px"); tukaj so vrnjena sredstva.

Za p.css ("height": "300px");

computeStyleTests se uporablja za izvajanje nekaterih testov podpore. Imenuje se tudi, ko pridobivanje višino in širino oboje css () in višina širina() , ampak za nastavitev kliče ga samo višina širina() ki jih morda ne potrebujete, uporabite css () namesto tega.

5. Ne premikajte nepotrebno lastnosti postavitve

Dostop do lastnosti postavitve, kot so višina, širina, rob itd., Bo sprožil ponovno prilagajanje strani. Razlog za to je, kadar brskalnik povprašate po lastnostih postavitve poskrbi, da dobite posodobljeno vrednost (če je bila vrednost pred tem razveljavljena) preračunavanje vrednosti in uporaba sprememb postavitve.

Torej, ali uporabljate jQuery ali vanilla JavaScript, pazite na nepotreben dostop do lastnosti postavitve še posebej v zanki ali posledično po spremembi sloga.

6. Uporabite caching, kjer lahko

Nekatere funkcije jQuery imajo mehanizme za predpomnjenje, ki jih je mogoče dobro uporabiti. Zahteve Ajaxa predpomnijo vire, vendar niso na voljo skript in jsonp, zato, če želite shraniti predpomnjenje na vse vaše zahteve ajax, boste morda želeli globalno kot spodaj.

Upoštevajte tudi, če uporabite sredstva post ne bo predpomnjen, tudi če omogočite predpomnjenje z zgornjo nastavitvijo.

Kot sem že omenil, odkleni () v nasprotnem primeru shrani podatke, povezane z elementom, ki ga želite odstraniti odstraniti();skrij () predpomni začetni CSS zaslon vrednost elementa, preden ga skrijete, tako da ga lahko pozneje obnovite brez izgube podatkov.

Zaključek

Eden od načinov, kako ste lahko prepričani, da uporabljate najučinkovitejšo jQuery kodo za vašo potrebo, je počakati, da ste dejansko zagnali kodo in opazili, če obstaja kakšna težava pri učinkovitosti ali ne. Če obstajajo, uporabite orodja za uspešnost in razhroščevalnika za odkriti koren problema.

Ker je jQuery kot kokon za JavaScript z dodatnimi funkcijami za združljivost in funkcije brskalnika, je težko diagnosticirati težave brez teh orodij.