Hat jQuery legjobb gyakorlat a jobb teljesítmény érdekében

jQuery az egyik a ma a legnépszerűbb JavaScript könyvtárak. API-ja nagyon könnyen használható, ami nem olyan meredek tanulási görbéhez vezet. Sok projekt a jQuery kódot használja ahelyett, hogy a vanília JavaScript-et közvetlenül használja a dinamikus funkciók eléréséhez.

De a jQuerynek is hiányosságai vannak. Bizonyos teljesítménykérdésekhez vezethet, ha gondatlanul használják éppúgy, mint a nyelvén alapuló nyelv. Ez a hozzászólás felsorolja a jQuery használatának legjobb gyakorlatait, amelyek segítenek elkerülni a teljesítményt.

1. Szükség esetén lusta betöltési parancsfájlok

A böngészők futtatják a JavaScript-et a DOM-fa létrehozása és a képpontok festése a képernyőn, mert a parancsfájlok új elemeket adhatnak hozzá az oldalhoz, vagy módosíthatják néhány DOM csomópont elrendezését vagy stílusát. Szóval a böngészőnek kevesebb szkriptet kell megadnia az oldal betöltése során, tudunk csökkenti az időt a végső DOM fa létrehozására és festésére, amely után a felhasználó lesz láthatja az oldalt.

Ennek egyik módja a jQuery-ben az $ .getScript betölteni bármilyen szkriptfájlt a szükséglet idején, nem pedig az oldal betöltésekor.

$ .getScript ("scripts / gallery.js", visszahívás); 

Ez egy ajax függvény, amely egy szkriptfájlt kap, ha azt szeretné, de vegye figyelembe, hogy a beolvasott fájl nem gyorsítótárazott. Gyorsítótár engedélyezése getScript ugyanazokat kell engedélyeznie az összes ajax kérésnél. Ezt az alábbi kód használatával teheti meg:

$ .ajaxSetup (cache: true); 

2. Kerülje el $ (ablak) .load () ha a szkripthez nem szükséges az oldal alforrásai

A $ (dokumentum). egyenértékű DOMContentLoaded (hol DOMContentLoaded elérhető) és $ (ablak) .load () nak nek Betöltés. Az első az, amikor egy oldal saját DOM-ját betöltjük, de nem külső eszközök, például képek és stíluslapok. A második ki van kapcsolva, amikor mindent egy oldal alkot, beleértve a saját tartalmát és al-erőforrásait.

Tehát, ha olyan szkriptet írsz, amely az oldal al-erőforrásaira támaszkodik, például az a háttérszínének módosítása div ez egy külső stíluslap által tervezett, a legjobban használható $ (ablak) .load ().

De ha ez nem így van, jobb, ha ragaszkodunk $ (dokumentum). mert a jQuery hívja kész eseménykezelő, akár használja $ (dokumentum). vagy nem, ezért használd, ha tudod.

3. Használja le el kell távolítani a DOM-ból azokat az elemeket, amelyeket módosítani kell.

“áttördelés” egy olyan kifejezés, amely egy weblap elrendezésének megváltoztatására utal, amikor a böngésző áthelyezi az oldal elemeit egy új elem elhelyezésére, az elem strukturális változásaihoz igazodik, kitölti az eltávolított elem által megmaradt rést, vagy valamilyen más műveletet igényel az oldal elrendezésének módosítása. a visszacsatolás egy drága böngésző folyamat.

A nem. az elemben bekövetkezett strukturális változások által okozott visszafizetések változásai után az oldal áramlásából és visszajuttatva, amikor elkészült. Ha egymás után több sort ad hozzá az asztalhoz, akkor sok visszavonást fog okozni. Tehát jobb vegye ki a táblát a DOM fáról, adja hozzá a sorokat, és tegye vissza a DOM-ba; ez csökkenti a visszafolyásokat.

jQuery le () lehetővé teszi, hogy eltávolítsunk egy elemet az oldalról, ez különbözik remove () mert elmenti az elemhez kapcsolódó adatokat, amikor később hozzá kell adni az oldalt. A módosított elemet ezután visszahelyezhetjük az oldalra.

4. Használja CSS () a magasság vagy a szélesség beállítása magasság() és szélesség()

Ha egy elem magasságát vagy szélességét állítja be a jQuery-ben, javaslom, hogy használja a CSS () funkció, mert ezeket az értékeket a magasság() és szélesség() további visszaállásokat okoz, mivel a funkció bizonyos elrendezési tulajdonságai hozzáférnek computeStyleTests a jQuery-ben (tesztelve a legújabb ver.).

A kódért p.height ( "300px"); itt vannak a visszacsatolások.

mert p.css ("magasság": "300px");

computeStyleTests bizonyos támogatási tesztek elvégzésére szolgál. Azt is hívják, amíg szerzés a magasság és a szélesség mindkét CSS () és magasság szélesség() , de érte beállítás csak hívják magasság szélesség() ami nem szükséges, ezért használja CSS () helyette.

5. Ne érjen szükségtelenül az elrendezési tulajdonságokhoz

Az elrendezési tulajdonságok, mint a magasság, a szélesség, a margó stb. Az ok az, hogy amikor a böngészőt kéred az elrendezési tulajdonságok bármelyikét illetően gondoskodik arról, hogy megkapja a frissített értéket (ha az értéket korábban érvénytelenítette) az értékek újraszámítása és az elrendezésváltozások alkalmazása.

Tehát, hogy jQuery vagy vanilla JavaScript-t használ, vigyázzon arra, hogy szükségtelenül hozzáférjen az elrendezési tulajdonságokhoz különösen a ciklusban vagy ennek megfelelően a stílusváltozások után.

6. Használja ki a gyorsítótárat, ahol lehet

A jQuery néhány funkciója gyorsítótárazási mechanizmussal rendelkezik, amelyek jól használhatók. Az Ajax kérések gyorsítótárazzák az erőforrásokat, de nem érhető el forgatókönyv és jsonp, így ha azt szeretné, hogy az összes ajax-kérésed gyorsítótárazza világszerte mint az alábbiakban.

Szintén vegye figyelembe, hogy ha erőforrásokat használ, használja posta akkor sem, ha a fenti beállítással engedélyezi a gyorsítótárazást.

Mint korábban említettem, le () az eltávolítandó elemhez tartozó adatokat gyorsítótárazza remove ();elrejt() gyorsítótárazza a kezdeti CSS-t kijelző elem elrejtése előtt, hogy később vissza lehessen állítani az adatok elvesztése nélkül.

Következtetés

Az egyik módja annak, hogy biztosan tudja, hogy a leghatékonyabb jQuery kódot használja az Ön igényeinek, várjon, amíg ténylegesen futtatja a kódját, és észrevette, hogy van-e teljesítmény-probléma. Ha van, használja a teljesítmény- és hibakereső eszközöket észleli a probléma gyökerét.

Mivel a jQuery olyan, mint a böngésző kompatibilitásának és funkcióinak további funkcióival rendelkező JavaScript-kocka, nehéz lehet a problémák diagnosztizálása ezen eszközök nélkül.