Kuusi jQuery-tekniikkaa parempaan suorituskykyyn
jQuery on yksi suosituimmat JavaScript-kirjastot tänään. Sen sovellusliittymä on erittäin helppokäyttöinen, mikä johtaa ei-jyrkkään oppimiskäyrään. Monet projektit käyttävät jQuery-koodia sen sijaan, että käytettäisiin suoraan vanilja-JavaScriptiä dynaamisten toimintojen tuomiseksi.
Mutta jQuerylla on myös puutteita. Se voi johtaa joihinkin suorituskykyongelmiin, jos niitä käytetään huolimattomasti aivan kuten kieli, johon se perustuu. Tässä viestissä luetellaan joitakin parhaita käytäntöjä jQueryn käyttämisessä, mikä auttaa meitä välttämään suorituskykyongelmia.
1. Lazy load scripts tarvittaessa
Selaimet suorittavat JavaScriptin ennen DOM-puun luomista ja pikselien maalaamista näytöllä, koska skriptit voivat lisätä uusia elementtejä sivulle tai muuttaa joidenkin DOM-solmujen ulkoasua tai tyyliä. Joten antamalla selaimelle vähemmän skriptejä, jotka suoritetaan sivun latauksen aikana, me voimme vähentää aikaa lopulliseen DOM-puun luomiseen ja maalaamiseen, jonka jälkeen käyttäjä on voi nähdä sivun.
Yksi tapa tehdä tämä jQueryssä on käyttämällä $ .getScript ladata mitä tahansa komentosarjatiedostoa sen tarpeen mukaan kuin sivun lataamisen aikana.
$ .getScript ("scripts / gallery.js", soittopyyntö); Se on ajax-toiminto, joka saa yhden skriptitiedoston, kun haluat sen, mutta huomaa, että haettu tiedosto ei ole välimuistissa. Voit ottaa välimuistin käyttöön getScript sinun täytyy ottaa käyttöön sama kaikkien ajax-pyyntöjen osalta. Voit tehdä sen käyttämällä alla olevaa koodia:
$ .ajaxSetup (cache: true);
2. Vältä $ (ikkuna) .load () jos skriptiä ei tarvita sivun alaresursseja
$ (asiakirja). jo () vastaa DOMContentLoaded (missä DOMContentLoaded on käytettävissä) ja $ (ikkuna) .load () että Ladata. Ensimmäinen käynnistetään, kun sivun oma DOM on ladattu, mutta ei ulkoisia varoja, kuten kuvia ja tyylitaulukoita. Toinen on laukaisu, kun kaikki sivu koostuu, mukaan lukien sen oma sisältö ja sen alaresurssit.
Joten jos kirjoitat skriptiä, joka perustuu sivun alavaroihin, kuten a: n taustavärin muuttaminen div se on tyyliltään ulkoinen tyylitaulukko, se on parasta käyttää $ (ikkuna) .load ().
Mutta jos näin ei ole, on parempi pysyä $ (asiakirja). jo () koska jQuery kutsuu sen valmis tapahtuman käsittelijä käytätkö sitä $ (asiakirja). jo () tai ei, joten käytä sitä, kun voit.
3. Käytä irrottaa poistaa DOM: n elementit, joita oli muutettava.
“reflow” on termi, joka viittaa verkkosivun ulkoasun muutoksiin, kun selain järjestää sivun elementit uudelleen sijoittamaan uuden elementin, mukautuu elementin rakenteellisiin muutoksiin, täyttää poistetun elementin poistaman aukon tai jonkin muun toiminnon, joka tarvitsee sivun ulkoasun muutos. reflow on kallis selainprosessia.
Voimme vähentää ei. elementtien rakenteellisista muutoksista aiheutuneiden jälkikäteisten muutosten avulla jälkeen sen poistaminen sivuvirrasta ja kun se on valmis. Jos lisäät useita rivejä pöydälle yksi kerrallaan, se aiheuttaa paljon palautuksia. Joten on parempi ota pöytä pois DOM-puusta, lisää rivit siihen ja laita se takaisin DOM: lle; tämä vähentää palautuksia.
jQueryn irrota () avulla voimme poistaa elementin sivulta, se eroaa poistaa() koska se tallentaa elementtiin liittyvät tiedot, kun se on lisättävä myöhemmin sivulle. Irrotettu elementti voidaan sitten asettaa takaisin sivulle, kun sitä on muutettu.
4. Käytä CSS () asettaa korkeuden tai leveyden korkeus() ja leveys()
Jos asetat elementin korkeuden tai leveyden jQueryssä, suosittelen, että käytät CSS () toiminto, koska asetat nämä arvot korkeus() ja leveys() aiheuttaa ylimääräisiä refleksejä joidenkin asetteluominaisuuksien käytön ansiosta computeStyleTests jQueryssä (testattu viimeisimmässä versiossa).
Koodia varten p.height ( "300 kuvapistettä"); tässä ovat heijastukset.
varten p.css ("korkeus": "300px");
computeStyleTests käytetään tukitestien suorittamiseen. Sitä kutsutaan myös saada korkeus ja leveys käyttämällä molemmat CSS () ja korkeus leveys() , mutta asetus sitä vaaditaan vain korkeus leveys() jota ei ehkä tarvita, joten käytä sitä CSS () sen sijaan.
5. Älä käytä asettelun ominaisuuksia tarpeettomasti
Asetteluominaisuuksien, kuten korkeuden, leveyden, marginaalin jne. Käyttäminen käynnistää sivun kääntämisen. Syy on aina, kun pyydät selainta mihin tahansa asettelun ominaisuuksiin varmistaa, että saat päivitetyn arvon (jos arvo on mitätöity aiemmin) arvojen uudelleenlaskenta ja mahdollisten asettelujen muuttaminen.
Joten onko käytössäsi jQuery tai vanilla JavaScript, varo käyttämästä asettelutoimintoja tarpeettomasti erityisesti silmukassa tai sen seurauksena tyylin muutosten jälkeen.
6. Käytä välimuistia missä voit
Joissakin jQueryn toiminnoissa on välimuistimekanismeja, joita voidaan käyttää hyväksi. Ajax-pyynnöt tallentavat resursseja, mutta niitä ei ole saatavilla käsikirjoitus ja jsonp, joten jos haluat tallentaa välimuistin kaikkiin ajax-pyyntöihisi, haluat ehkä aseta se maailmanlaajuisesti kuten alla.
Huomaa myös, että jos haet resursseja lähettää sitä ei tallenneta välimuistiin, vaikka sallit välimuistin edellä mainitulla asetuksella.
Kuten aiemmin mainitsin, irrota () tallentaa poistettavaan elementtiin liittyvät tiedot toisin kuin poistaa();piilottaa() tallentaa alkuperäisen CSS: n näyttö elementin arvo ennen sen piilottamista, jotta se voidaan palauttaa myöhemmin menettämättä tietoja.
johtopäätös
Yksi tapa, jolla voit olla varma, että käytät tehokkainta jQuery-koodia, on odottaa, kunnes olet tosiasiallisesti suorittanut koodisi ja huomannut, onko suorituskykyongelmia vai ei. Jos on, käytä suorituskykyä ja debugger-työkaluja havaita ongelman juuret.
Koska jQuery on kuin JavaScript, jossa on lisätoimintoja selaimen yhteensopivuuteen ja ominaisuuksiin, ongelmien diagnosointi voi olla vaikeaa ilman näitä työkaluja.
