Šešios jQuery geriausios patirties geresniam veikimui

jQuery yra vienas iš šiandien populiariausios „JavaScript“ bibliotekos. Jo API yra labai paprasta naudoti, todėl mokymosi kreivė nėra tokia kieta. Daugelis projektų naudoja „jQuery“ kodą, o ne tiesiogiai naudojant vanilės „JavaScript“, kad sukurtų dinamines funkcijas.

Tačiau jQuery taip pat turi trūkumų. Tai gali sukelti kai kuriuos našumo klausimus, jei jie naudojami neatsargiai kaip ir kalba, kuria ji remiasi. Šiame pranešime bus išvardytos kai kurios geriausios praktikos naudojant jQuery, kurios padės išvengti bet kokių našumo problemų.

1. Prireikus atsižvelkite į apkrovą

Naršyklės paleidžia „JavaScript“ prieš sukurdamos „DOM“ medį ir dažydamos taškus ekrane, nes scenarijai gali pridėti naujus elementus į puslapį arba pakeisti kai kurių „DOM“ mazgų išdėstymą ar stilių. Taigi, iki suteikiant naršyklei mažiau scenarijų, kuriuos reikia atlikti per puslapio apkrovą, mes galime sumažinti laiko trukmę galutinis DOM medžio kūrimas ir tapyba, po kurio vartotojas bus gali matyti puslapį.

Vienas iš būdų tai padaryti naudojant „jQuery“ yra naudoti $ .getScript įkelti bet kokį scenarijų failą jo poreikio metu, o ne per puslapio apkrovą.

$ .getScript ("scripts / gallery.js", atgalinis ryšys); 

Tai „ajax“ funkcija, kuri, kai tik norite, gaus vieną scenarijų failą, tačiau atkreipkite dėmesį, kad atsiųstas failas nėra išsaugotas. Jei norite įgalinti talpyklą getScript turėsite įjungti tą patį visų „ajax“ užklausų atveju. Tai galite padaryti naudodami toliau pateiktą kodą:

$ .ajaxSetup (cache: true); 

2. Venkite $ (langas) .load () jei jūsų scenarijai nereikia jokio puslapio sub-išteklių

The $ (dokumentas). jau () yra lygiavertis DOMContentLoaded (kur DOMContentLoaded yra prieinama) ir $ (langas) .load () į Įkelti. Pirmasis yra atleistas, kai įkeltas puslapio DOM, bet ne išorinis turtas, pvz., Vaizdai ir stilių lentelės. Antrasis yra atleistas, kai įkeliami visi puslapiai, įskaitant jo turinį ir sub-išteklius.

Taigi, jei rašote scenarijų, grindžiamą puslapio sub-ištekliais, pvz., Pakeiskite fono spalvą div tai stilius, sukurtas išorinio stiliaus lapo, tai geriausia naudoti $ (langas) .load ().

Bet jei taip nėra, tai geriau laikytis $ (dokumentas). jau () todėl, kad jQuery tai vadina pasiruošę įvykio tvarkytojas, ar naudojate $ (dokumentas). jau () ar ne, todėl naudokite jį, kai tik galite.

3. Naudokite nuimkite pašalinti DOM elementus, kuriuos reikėjo pakeisti.

“Reflow” yra terminas, susijęs su išdėstymo pakeitimais tinklalapyje, kai naršyklė pertvarko puslapio elementus, kad tilptų naują elementą, prisitaikytų prie struktūrinių elemento pakeitimų, užpildo pašalintą elementą arba kitą veiksmą, kuriam reikia išdėstymo pakeitimas puslapyje. reflow yra brangus naršyklės procesas.

Mes galime sumažinti Nr. dėl struktūros pokyčių, atsiradusių dėl elemento struktūros pokyčių po to ištraukti jį iš puslapio srauto ir atgal, kai tai daroma. Jei po stalo pridedate kelias eilutes, tai sukels daug grąžinimo. Taigi geriau išimkite lentelę iš DOM medžio, pridėkite eilutes prie jos ir įdėkite jį atgal į DOM; tai sumažins grąžą.

jQuery's nuimkite () leidžia pašalinti elementą iš puslapio, tai skiriasi nuo pašalinti () nes ji bus išsaugota su elementu susiję duomenys, kai vėliau jį reikia pridėti prie puslapio. Atskiras elementas tada gali būti grąžintas į puslapį, kai jis buvo pakeistas.

4. Naudokite css () nustatyti aukštį arba plotį vietoj aukštis () ir plotis ()

Jei nustatote elemento aukštį arba plotį jQuery, siūlau naudoti css () funkciją, nes nustatydami šias reikšmes aukštis () ir plotis () sukels papildomų atsilikimų dėl kai kurių funkcijų prieigos prie tam tikrų išdėstymo savybių computeStyleTests jQuery (išbandyta naujausia ver.).

Dėl kodo p.height ("300px"); čia yra refleksai.

Dėl p.css ("aukštis": "300px");

computeStyleTests naudojamas tam tikriems palaikymo testams atlikti. Tai taip pat vadinama gauti naudojant aukštį ir plotį abu css () ir Aukštis Plotis() , bet nustatymas tai tik reikalaujama Aukštis Plotis() kuri gali būti nereikalinga, todėl naudokite css () vietoj to.

5. Nereikia be reikalo pasiekti išdėstymo ypatybių

Prieiga prie išdėstymo savybių, tokių kaip aukštis, plotis, paraštė ir pan., Sukels puslapį. Priežastis yra visada, kai paprašote naršyklės bet kokio išdėstymo savybės įsitikinkite, kad gaunate atnaujintą vertę (jei vertė anksčiau buvo pripažinta negaliojančia) perskaičiuojant vertes ir taikant bet kokius išdėstymo pakeitimus.

Taigi, ar naudojate „jQuery“ ar vanilės „JavaScript“, be reikalo saugokitės prieigos prie išdėstymo savybių ypač kilpoje arba po to, kai keisite stilių.

6. Naudokite talpyklą ten, kur galite

Kai kuriose „jQuery“ funkcijose yra talpyklos mechanizmų, kuriuos galima tinkamai panaudoti. „Ajax“ užklausos talpina išteklius, tačiau jos nėra scenarijus ir jsonp, taigi, jei norite išsaugoti visus „Ajax“ prašymus, galbūt norėsite nustatyti jį visame pasaulyje kaip žemiau.

Taip pat atkreipkite dėmesį, kad jei naudojate išteklius paštu jis nebus išsaugotas talpykloje, net jei įjungsite talpyklą naudodami aukščiau nurodytus nustatymus.

Kaip jau minėjau anksčiau, nuimkite () kitaip neištrina duomenų, susijusių su pašalintinu elementu pašalinti ();paslėpti () talpina pradinį CSS ekranas elemento vertė prieš jį paslėpiant, kad ją būtų galima atkurti vėliau neprarandant duomenų.

Išvada

Vienas iš būdų, kaip galite būti tikri, kad naudojate efektyviausią „jQuery“ kodą, kad galėtumėte tikėtis, kol iš tikrųjų paleisite kodą ir pastebėsite, ar yra kokių nors rezultatų. Jei yra, naudokite našumo ir derinimo įrankius aptikti problemos šaknį.

Kadangi jQuery yra kaip „JavaScript“ su papildomomis funkcijomis naršyklės suderinamumui ir funkcijoms, gali būti sunku diagnozuoti problemas be šių įrankių.