Šest jQuery najboljih postupaka za poboljšanu izvedbu
jQuery je jedna od najpopularnijih JavaScript knjižnica danas. Njegov API je vrlo jednostavan za korištenje što dovodi do ne tako strme krivulje učenja. Mnogi projekti koriste jQuery kôd umjesto izravnog korištenja JavaScripta vanilije kako bi uveli dinamičke funkcionalnosti.
Ali jQuery ima i svoje nedostatke. To može dovesti do nekih problema s performansama ako se koristi nemarno baš kao i jezik na kojem se temelji. Ovaj post će navesti neke od najboljih praksi u korištenju jQuery koji će nam pomoći da izbjegnemo probleme s performansama.
1. Lazy učitajte skripte kada je to potrebno
Preglednici pokreću JavaScript prije stvaranja DOM stabla i slikajući piksele na zaslonu, jer skripte mogu dodati nove elemente stranici ili promijeniti izgled ili stil nekih DOM čvorova. Dakle, po davanje pregledniku manje skripti za izvršavanje tijekom učitavanja stranice, možemo smanjite vrijeme koje je potrebno za izradu i slikanje konačnog DOM stabla, nakon čega će korisnik biti moći vidjeti stranicu.
Jedan od načina da to učinite u jQuery je pomoću $ .getScript učitati bilo koju datoteku skripte u vrijeme njezine potrebe, a ne tijekom učitavanja stranice.
$ .getScript ("scripts / gallery.js", povratni poziv); To je ajax funkcija koja će dobiti jednu datoteku skripte kada je želite, ali imajte na umu da datoteka koja je preuzeta nije spremljena u predmemoriju. Da biste omogućili predmemoriranje za getScript morat ćete omogućiti isto za sve ajax zahtjeve. To možete učiniti pomoću koda u nastavku:
$ .ajaxSetup (cache: true);
2. Izbjegavajte $ (prozor) .load () ako vašoj skripti ne trebaju nikakvi pod-resursi stranice
$ (document) .ready () je jednako DOMContentLoaded (gdje DOMContentLoaded dostupan) i $ (prozor) .load () do Opterećenje. Prvi je ispaljen kada se učita stranica DOM-a, ali ne i vanjska sredstva kao što su slike i stilovi. Drugi je ispaljen kada je sve što je stranica sastavljena, uključujući i vlastiti sadržaj i pod-resurse učitane.
Dakle, ako pišete skriptu koja se oslanja na pod-resurse stranice, kao što je promjena boje pozadine za div koji je oblikovan vanjskom stilskom listom, najbolje je koristiti $ (prozor) .load ().
Ali, ako to nije slučaj, bolje se držati $ (document) .ready () jer, jQuery naziva svoj spreman rukovatelj događajima bilo da koristite $ (document) .ready () ili ne, pa ga upotrijebite kada možete.
3. Koristite odvojiti za uklanjanje elemenata iz DOM-a koje je trebalo promijeniti.
“preoblikovanje” je izraz koji se odnosi na promjene izgleda web-stranice, kada preglednik preuredi elemente stranice kako bi primio novi element, prilagodio se strukturalnim promjenama elementa, popunio prazninu koju je uklonio uklonjeni element ili neku drugu radnju kojoj je potrebna promjena izgleda na stranici. reflow je skup proces preglednika.
Možemo smanjiti broj. povratnih veza uzrokovanih strukturnim promjenama elementa provođenjem promjena na njemu nakon izvlačenje iz toka stranice i stavljajući ga natrag kad bude gotovo. Ako dodajete više redaka u tablicu jedan po jedan, to će uzrokovati mnogo povratnih tokova. Zato je bolje uzmite stol iz DOM stabla, dodajte retke u njega i vratite ga u DOM; to će smanjiti reflow.
jQuery-a odvojiti() omogućuje nam da uklonimo element sa stranice, razlikuje se od ukloniti() jer će spremiti podatke povezane s elementom kada ga treba naknadno dodati na stranicu. Odvojeni element se zatim može vratiti na stranicu kada je izmijenjen.
4. Upotrijebite CSS () da biste postavili visinu ili širinu umjesto visina() i širina()
Ako postavljate visinu ili širinu elementa u jQuery, predlažem da koristite CSS () funkcija jer se koriste te vrijednosti visina() i širina() će uzrokovati dodatna reflowiranja zbog pristupa nekim svojstvima izgleda funkcije computeStyleTests u jQuery (testirano u najnovijoj ver.).
Za kod p.height ( "300px"); ovdje su reflow.
Za p.css ("visina": "300px");
computeStyleTests koristi se za neke testove podrške. Također se zove dok uzimajući pomoću visine i širine oba CSS () i visina () / širina () , ali za postavljanje to se samo traži visina () / širina () što možda nije potrebno, stoga upotrijebite CSS () umjesto.
5. Ne pristupajte nepotrebno svojstvima izgleda
Pristup karakteristikama izgleda, kao što su visina, širina, margina, itd., Potaknut će reflow na stranici. Razlog je kad god pitate preglednik za bilo koje svojstvo izgleda, to osigurava dobivanje ažurirane vrijednosti (u slučaju da je vrijednost prije bila poništena) ponovno izračunavanje vrijednosti i primjena bilo kakvih promjena izgleda.
Dakle, koristite li jQuery ili JavaScript u vaniliji, čuvajte se nepotrebnog pristupa svojstvima izgleda osobito u petlji ili posljedično nakon promjene stila.
6. Koristite caching gdje možete
Neke od jQuery funkcija dolaze s mehanizmima za spremanje koji se mogu dobro iskoristiti. Ajax zahtjevi ne predmemoriraju resurse, ali nisu dostupni skripta i jsonp, pa ako želite caching na svim vašim ajax zahtjevima, možda želite postavite ga globalno kao u nastavku.
Također imajte na umu da ako koristite resurse pomoću pošta neće biti spremljeno u predmemoriju čak i ako omogućite predmemoriranje s gore navedenim postavkama.
Kao što sam već spomenuo, odvojiti() sprema podatke povezane s elementom koji se želi ukloniti za razliku od ukloniti();sakriti() sprema početni CSS prikaz vrijednost elementa prije skrivanja tako da se kasnije može vratiti bez gubitka podataka.
Zaključak
Jedan od načina na koji možete biti sigurni da koristite najučinkovitiji jQuery kod za vašu potrebu je čekati dok zapravo ne pokrenete svoj kod i primijetili ako postoji problem s performansama ili ne. Ako postoje, upotrijebite alate za izvedbu i alate za ispravljanje pogrešaka otkriti korijen problema.
Budući da je jQuery poput čahure za JavaScript s dodatnim funkcionalnostima za kompatibilnost i značajke preglednika, teško je dijagnosticirati probleme bez tih alata.
