Šesť najlepších postupov jQuery pre lepší výkon

jQuery je jedným z nich najpopulárnejších knižníc jazyka JavaScript. Jeho API je veľmi jednoduché, čo vedie k nie príliš strnulej krivke učenia. Veľa projektov používa kód jQuery namiesto priameho používania jazyka Java pre dynamické funkcie.

Ale jQuery má aj svoje nedostatky. Môže to viesť k určitým problémom s výkonom, ak sa používa nedbanlivo rovnako ako jazyk, na ktorom je založená. Tento príspevok obsahuje zoznam najlepších postupov pri používaní jQuery, ktoré nám pomôžu vyhnúť sa problémom s výkonom.

1. Lazy skenovanie zaťaženia v prípade potreby

Prehliadače spustia JavaScript pred vytvorením stromu DOM a maľovaním pixelov na obrazovke, pretože skripty môžu pridať nové prvky na stránku alebo zmeniť rozloženie alebo štýl niektorých uzlov DOM. Takže dáva prehliadaču menej skriptov na spustenie počas načítania stránky, môžeme skrátiť čas pre posledné vytvorenie stromu DOM a maľovanie, po ktorom bude používateľ vidieť stránku.

Jeden spôsob, ako to urobiť v jQuery je pomocou $ .getScript načítať akýkoľvek súbor skriptu v čase jeho potreby a nie počas načítania stránky.

$ .getScript ("skripty / gallery.js", spätné volanie); 

Je to funkcia ajax, ktorá vám umožní získať jediný súbor skriptu, ak ho chcete, ale pamätajte, že načítaný súbor nie je uložený vo vyrovnávacej pamäti. Ak chcete zapnúť ukladanie do pamäte pre getScript budete musieť povoliť to isté pre všetky požiadavky ajax. Môžete to urobiť pomocou nižšie uvedeného kódu:

$ .ajaxSetup (cache: true); 

2. Vyhnite sa $ (okno) .load () ak váš skript nepotrebuje žiadne čiastkové zdroje stránky

$ (dokument) .ready () je ekvivalentná DOMContentLoaded (kde DOMContentLoaded je k dispozícii) a $ (okno) .load () na zaťaženie. Prvý je vypálený, keď je načítaná vlastná stránka DOM, ale nie externé aktíva, ako sú obrázky a šablóny so štýlmi. Druhá je vypálená, keď je všetko vytvorené zo strany stránky, vrátane vlastného obsahu a jeho podriadených zdrojov.

Takže ak píšete skript, ktorý sa spolieha na čiastkové zdroje stránky, ako napríklad zmena farby pozadia a div to je v štýle vonkajšej šablóny, najlepšie je použiť $ (okno) .load ().

Ale ak tomu tak nie je, je lepšie držať sa $ (dokument) .ready () pretože jQuery ich volá pripravený obsluha udalosti, či používate $ (dokument) .ready () alebo nie, tak ho použite, keď môžete.

3. Použite odpojiť odstrániť prvky z domény, ktoré je potrebné zmeniť.

“preformátovanie” je termín, ktorý odkazuje na zmeny rozloženia na webovej stránke, je to vtedy, keď prehliadač preorientuje prvky stránky tak, aby vyhovoval novému prvku, prispôsobil sa štrukturálnym zmenám prvku, vyplnil medzeru, ktorú zanechal odstránený prvok, alebo iná akcia, zmena rozloženia na stránke. reflow je drahý proces prehliadača.

Môžeme znížiť počet. spätných tokov spôsobených štrukturálnymi zmenami prvku vykonaním zmien na ňom po vyberanie z toku stránky a vrátiť ho späť, keď je hotovo. Ak pridávate viaceré riadky do tabuľky jeden po druhom, spôsobí to veľa spätných tokov. Takže je lepšie vyzdvihnúť tabuľku z stromu DOM, pridať do nej riadky a vrátiť ho do DOM; tým sa zníži spätné toky.

jQuery je odpojiť () umožňuje odstrániť prvok zo stránky, je to odlišné od odstrániť () pretože to bude uložené údaje spojené s prvkom, kedy musí byť pridané na stránku neskôr. Oddelený prvok potom môže byť vrátený do stránky, keď bol upravený.

4. Použite css () nastaviť výšku alebo šírku namiesto výška () a Šírka ()

Ak nastavujete výšku alebo šírku prvku v nástroji jQuery, navrhujem vám použiť css () pretože nastavenie týchto hodnôt pomocou výška () a Šírka () spôsobí ďalšie preplnenia kvôli prístupu niektorých vlastností rozloženia vo funkcii computeStyleTests v jQuery (testované v poslednom ver.).

Pre kód p.height ( "300 pixelov"); tu sú spätné toky.

pre p.css ("výška": "300px");

computeStyleTests sa používa na vykonanie niektorých podporných testov. Je to tiež nazývané získavanie výška a šírka pomocou oba css () a výška šírka() , ale pre nastavenie je to len požadované výška šírka() čo nemusí byť potrebné, tak použite css () namiesto.

5. Nepotrebujete prístup k vlastnostiam usporiadania zbytočne

Prístup k vlastnostiam rozloženia, ako je výška, šírka, okraj, atď. Dôvodom je vždy, keď požiadate prehliadač o akékoľvek vlastnosti rozloženia ubezpečuje sa, že získate aktualizovanú hodnotu (v prípade, že bola hodnota predtým zneplatnená) prepočítať hodnoty a uplatniť akékoľvek zmeny rozloženia.

Takže bez ohľadu na to, či používate jQuery alebo vanilla JavaScript, dávajte pozor na zbytočné prístup k vlastnostiam usporiadania najmä v slučke alebo následne po zmene štýlu.

6. Využite ukladanie do vyrovnávacej pamäte, kde môžete

Niektoré funkcie jQuery sa dodávajú s mechanizmami ukladania do vyrovnávacej pamäte, ktoré sa dajú dobre využiť. Požiadavky spoločnosti Ajax ukladajú do vyrovnávacej pamäte zdroje, ale nie sú k dispozícii skript a jsonp, takže ak chcete ukladať do vyrovnávacej pamäte všetky vaše požiadavky ajax, možno budete chcieť nastavte ho globálne ako je uvedené nižšie.

Upozorňujeme tiež, že ak načítate zdroje pomocou pošta nebudú uložené do vyrovnávacej pamäte, aj keď povolíte ukladanie do vyrovnávacej pamäte s vyššie uvedeným nastavením.

Ako som už spomenul, odpojiť () ukladá dáta spojené s prvkom, ktorý sa má odstrániť, na rozdiel od toho odstrániť ();skryť () ukladá úvodnú CSS zobraziť hodnotu prvku skôr, než ho skryjete, aby sa dal neskôr obnoviť bez straty údajov.

záver

Jedným zo spôsobov, ako si môžete byť istí, že používate najefektívnejší kód jQuery pre vašu potrebu, je počkať, kým skutočne nespustíte kód a všimnete si, či nejaký problém súvisí s výkonom alebo nie. Ak existuje, použite nástroje pre výkon a ladenie zistiť koreň problému.

Pretože jQuery je ako kokon pre JavaScript s ďalšími funkciami pre kompatibilitu a funkcie prehliadača, môže byť ťažké diagnostikovať problémy bez týchto nástrojov.