Kuus jQuery parimat tava parema jõudluse saavutamiseks

jQuery on üks neist the kõige populaarsemad JavaScript-raamatukogud. Selle API on väga lihtne kasutada, mille tulemuseks on mitte nii järsk õppekõver. Paljud projektid kasutavad jQuery koodi, selle asemel et otseselt kasutada vanilli JavaScript, et tuua dünaamilisi funktsioone.

Kuid jQueryl on ka puudused. See võib kaasa tuua mõningaid tulemuslikkuse probleeme, kui neid kasutatakse hooletult nagu see keel põhineb. See postitus loetleb mõned parimad tavad jQuery kasutamisel, mis aitab meil vältida tulemuslikkuse probleeme.

1. Vajadusel laisk laadida skripte

Brauserid käivitavad JavaScripti enne DOM-i loomist ja pikslite värvimist ekraanil, sest skriptid võivad lisada uusi elemente lehele või muuta mõne DOM-sõlme paigutust või stiili. Nii et andes brauserile vähem skripte lehekülje laadimise ajal, me saame vähendada aega, mis kulub aega lõpliku DOM puu loomise ja maalimise jaoks, mille järel kasutaja saab lehekülge.

Üks võimalus seda teha jQuery's on kasutada $ .getScript mis tahes skriptifaili laadimine selle vajaduse ajal, mitte lehe laadimise ajal.

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

See on ajax funktsioon, mis saab ühe skriptifaili, kui soovite seda, kuid märkige, et tõmmatud fail ei ole vahemällu. Vahemälu lubamine getScript peate lubama sama kõigi ajaxi taotluste puhul. Seda saate teha alloleva koodi abil:

$ .ajaxSetup (cache: true); 

2. Vältige $ (aken) .load () kui teie skript ei vaja lehekülje alaressursse

The $ (dokument). jau () on samaväärne DOMContentLoaded (kus DOMContentLoaded on saadaval) ja $ (aken) .load () kuni Laadige. Esimene neist vallandatakse, kui lehe enda DOM on laaditud, kuid mitte väliseid varasid nagu pildid ja stiililehed. Teine on vallandatud, kui laaditakse kõik leheküljed, sealhulgas tema enda sisu ja all-ressursid.

Niisiis, kui kirjutate skripti, mis toetub lehe alamressurssidele, näiteks a-i taustavärvi muutmine div see on kujundatud välise stiili järgi, see on kõige parem kasutada $ (aken) .load ().

Aga kui see nii ei ole, on parem jääda $ (dokument). jau () sest jQuery kutsub seda valmis sündmuste käitleja, kas te kasutate $ (dokument). jau () või mitte, siis kasuta seda siis, kui saate.

3. Kasutage eraldage eemaldada DOM-i elemendid, mida tuli muuta.

“Reflow” on termin, mis viitab veebilehe paigutuse muutustele, see on siis, kui brauser korraldab lehe elemendid ümber uue elemendi, kohandub elemendi struktuurimuutustega, täidab eemaldatud elemendi või mõne muu toimingu, mis vajab paigutuse muutmine lehel. tagasipöördumine on kallis brauseri protsess.

Me võime vähendada nr. elementide struktuurimuudatustest tingitud tagasimakstud summade muutmine pärast seda selle väljavõtmine lehevoolust ja selle tegemisel tagasi. Kui lisate tabelisse mitu rida ükshaaval, tekitab see palju tagasilööke. Nii et see on parem võtke tabel välja DOMi puust, lisage sellele read ja pane see tagasi DOM-i; see vähendab tagasimakset.

jQuery's eemalda () võimaldab meil lehelt elemendi eemaldada, see erineb eemalda () sest see salvestab elemendiga seotud andmed, kui see tuleb hiljem lehele lisada. Eraldatud elementi saab seejärel lehele tagasi viia, kui seda on muudetud.

4. Kasutage css () kõrguse või laiuse seadmiseks kõrgus () ja laius ()

Kui seate elemendi kõrguse või laiuse jQuery's, soovitan teil seda kasutada css () funktsiooni, sest nende väärtuste seadistamine toimub kõrgus () ja laius () põhjustab täiendavaid tagasilööke, kuna funktsioonis on juurdepääs mõnedele paigutusomadustele computeStyleTests jQuery'is (testitud viimases ver.).

Koodi jaoks p.height ("300 px"); siin on tagasilöögid.

Sest p.css ("kõrgus": "300px");

computeStyleTests kasutatakse teatud tugikatsete tegemiseks. Seda nimetatakse ka ajal saada kõrgust ja laiust kasutades mõlemad css () ja kõrgus laius() , aga selleks seade see on ainult nõutud kõrgus laius() mis ei pruugi olla vajalik, seega kasuta css () selle asemel.

5. Ärge kasutage paigutusomadusi tarbetult

Paigutusseisundi, näiteks kõrguse, laiuse, marginaali jms avamine käivitab lehel peegelduse. Põhjuseks on alati, kui küsite brauserit mis tahes paigutusomadustest tagab, et saate värskendatud väärtuse (kui väärtus on varem kehtetuks tunnistatud) väärtuste ümberarvutamine ja paigutuse muutuste rakendamine.

Nii et kas te kasutate jQuery või vanilla JavaScript, hoiduge asjatult ligipääsust paigutusomadustele eriti silmus või järelikult pärast stiili muutmist.

6. Kasutage vahemällu, kus saate

Mõned jQuery funktsioonid sisaldavad vahemällu salvestamise mehhanisme, mida saab kasutada hästi. Ajaxi päringud salvestavad ressursse vahemällu, kuid seda pole saadaval skript ja jsonp, nii et kui soovid kõigis ajax-taotlustes vahemällu salvestada, võiksite seda teha määrake see globaalselt nagu allpool.

Pange tähele, et kui kasutate ressursse postitus seda ei salvestata vahemällu isegi siis, kui lubate vahemälu ülaltoodud seadistusega.

Nagu ma varem mainisin, eemalda () salvestab eemaldatava elemendiga seotud andmed erinevalt eemalda ();peida () salvestab esialgse CSS-i kuva elementi enne selle peitmist, nii et seda saab hiljem taastada ilma andmeid kaotamata.

Järeldus

Üks võimalus olla kindel, et kasutate kõige tõhusamat jQuery koodi oma vajaduste jaoks, on oodata, kuni olete oma koodi tegelikult käivitanud ja märganud, kas esineb mõni tulemuslikkuse probleem. Kui see on olemas, kasutage jõudluse ja siluri tööriistu tuvastada probleemi juured.

Kuna jQuery on sarnane brauseri ühilduvusele ja funktsioonidele lisafunktsioonidega JavaScripti kookoniks, võib probleeme ilma nende tööriistadeta diagnoosida..