Opi nopeuttamaan verkkosivujasi muokkaamalla JavaScriptiäsi pullonkaulojen poistamiseksi.
JavaScript on elintärkeä verkkokehityksessä. Kieli on suurimman osan verkkosivustoilla näkemästäsi interaktiivisuudesta ja animaatioista takana. Mutta JavaScript voi myös hidastaa verkkosivustoa, jos koodi on huonosti kirjoitettu. Tehottomuus voi johtaa sekä huonoihin latausaikoihin että hitaaseen renderointinopeuteen.
Noudata seuraavia käytäntöjä parantaaksesi verkkosivustosi nopeutta ja suorituskykyä.
1. Määritä muuttujat paikallisesti
Ohjelmoijana sinun on tiedettävä miten rajaus toimii. JavaScriptissä on kahdenlaisia muuttujia: paikalliset muuttujat ja globaalit muuttujat.
Paikalliset muuttujat ovat muuttujia, jotka on ilmoitettu funktiolohkossa. Laajuus pysyy vain siinä funktiossa, jossa ne on ilmoitettu. Yleiset muuttujat ovat muuttujia, jotka ovat käytettävissä koko skriptin aikana. Globaalien muuttujien tapauksessa laajuus säilyy koko ohjelman ajan.
Aina kun yrität käyttää muuttujaa, selain tekee jotain, joka tunnetaan nimellä laajuushaku. Se tarkistaa muuttujan lähimmän laajuuden ja jatkaa etsimistä, kunnes se löytää muuttujan. Näin ollen mitä laajempi laajuusketju sinulla on ohjelmassasi, sitä kauemmin kestää käyttää muuttujia nykyisen laajuuden ulkopuolella.
Tästä syystä on parasta määrittää muuttujat aina lähempänä suorituskontekstia. Käytä globaaleja muuttujia vain harvoissa tapauksissa; kun haluat tallentaa esimerkiksi koko skriptin aikana käytetyn datan. Tämä vähentää ohjelmasi laajuuksien määrää ja parantaa siten suorituskykyä.
2. Lataa JavaScript asynkronisesti
JavaScript on yksisäikeinen ohjelmointikieli. Tämä tarkoittaa, että kun toiminto on suoritettu, sen on suoritettava loppuun asti ennen kuin toinen toiminto voi toimia. Tämä arkkitehtuuri voi johtaa tilanteisiin, joissa koodi voi estää säiettä ja jäädyttää sovelluksen.
Jotta säie toimisi hyvin, sinun tulee suorittaa tiettyjä aikaa vieviä tehtäviä asynkronisesti. Kun tehtävä suoritetaan asynkronisesti, se ei vie säikeen kaikkea prosessointitehoa. Sen sijaan funktio liittyy tapahtumajonoon, jossa se käynnistetään kaikkien muiden koodien suorittamisen jälkeen.
API-kutsut sopivat täydellisesti asynkroniseen malliin, koska niiden ratkaiseminen vie aikaa. Joten sen sijaan, että se kestäisi säiettä, käytä lupauspohjaista kirjastoa, kuten hakusovellusliittymää, tietojen noutamiseen asynkronisesti. Tällä tavalla muuta koodia voidaan suorittaa, kun selain hakee tietoja API: sta.
Ymmärrä asynkronisen ohjelmoinnin hienoudet ja parannat sovelluksesi suorituskykyä.
3. Vältä tarpeettomia silmukoita
Silmukoiden käyttö JavaScriptissä voi olla kallista, jos et ole varovainen. Kohteiden kokoelman pyöräily voi rasittaa selainta paljon.
Vaikka et todellakaan voi välttää silmukoita koodissasi, sinun on tehtävä niitä mahdollisimman vähän. Voit käyttää muita tekniikoita, jotka välttävät tarpeen selata kokoelmaa.
Voit esimerkiksi tallentaa taulukon pituuden eri muuttujaan sen sijaan, että lukisit sen silmukan jokaisen iteraation aikana. Jos saat silmukasta haluamasi, irtaudu siitä välittömästi.
4. Pienennä JavaScript-koodi
Pienentäminen on tehokas tapa optimoida JavaScript-koodia. Minimoin muuntaa raakalähdekoodisi pienemmäksi tuotantotiedostoksi. Ne poistavat kommentit, leikkaavat tarpeettoman syntaksin ja lyhentävät pitkiä muuttujien nimiä. Ne myös poistavat käyttämättömän koodin ja optimoivat olemassa olevat toiminnot viemään vähemmän rivejä.
Esimerkkejä pienentäjistä ovat Google Closure Compiler, UglifyJS ja Microsoft AJAX -minifier. Voit myös pienentää koodia manuaalisesti tarkastamalla sen ja etsimällä tapoja optimoida se. Voit esimerkiksi yksinkertaistaa if-lauseita koodissasi.
5. Pakkaa suuret tiedostot Gzipillä
Suurin osa asiakkaista käytä Gzipiä pakkaamiseen ja purkamiseen suuria JavaScript-tiedostoja. Kun selain pyytää resurssia, palvelin voi pakata sen palauttaakseen vastauksessa pienemmän tiedoston. Kun asiakas vastaanottaa tiedoston, se purkaa sen. Kaiken kaikkiaan tämä lähestymistapa säästää kaistanleveyttä ja vähentää latenssia, mikä parantaa sovelluksen suorituskykyä.
6. Minimoi DOM-käyttö
DOM: n käyttö voi vaikuttaa sovelluksesi suorituskykyyn, koska selaimen on päivitettävä jokaisen DOM-päivityksen yhteydessä. On parasta rajoittaa DOM-käyttö mahdollisimman pienelle taajuudelle. Yksi tapa tehdä tämä on tallentaa viittauksia selainobjekteihin.
Voit myös käyttää Reactin kaltaista kirjastoa, joka tekee muutoksia virtuaaliseen DOM: iin ennen kuin siirrät ne todelliseen DOM: iin. Seurauksena on, että selain päivittää sovelluksen päivitettävät osat koko sivun päivittämisen sijaan.
7. Lykkää JavaScriptin tarpeetonta latausta
Vaikka on tärkeää, että sivusi latautuu ajoissa, kaikkien toimintojen ei tarvitse toimia alkulatauksen aikana. Oletetaan, että sinulla on klikattava painike ja välilehtivalikko, jotka viittaavat JavaScript-koodiin; voit lykätä molempia sivun latautumisen jälkeen.
Tämä menetelmä vapauttaa prosessointitehoa, jolloin voit hahmontaa tarvittavat sivuelementit ajoissa. Viivytät koodin kääntämistä, joka saattaa sisältää sivun ensimmäisen näytön. Sitten, kun sivu on latautunut, voit aloittaa toimintojen lataamisen. Tällä tavalla käyttäjä voi nauttia nopeasta latausajasta ja aloittaa vuorovaikutuksen elementtien kanssa ajoissa.
Voit myös sisällyttää pienimmän määrän CSS: ää ja JavaScriptiä head-elementtiin, jotta se latautuu välittömästi. Toissijainen koodi voi sitten elää erillisissä .css- ja .js-tiedostoissa. Tämä tekniikka vaatii kunnollista tietämystä miten DOM toimii.
8. Käytä CDN: ää JavaScriptin lataamiseen
Sisällönjakeluverkoston käyttö nopeuttaa sivun latausaikaa, mutta se ei aina ole tehokasta. Jos esimerkiksi valitset CDN: n ilman paikallista palvelinta vierailijamaassa, he eivät hyödy.
Voit ratkaista tämän ongelman vertaamalla useita CDN-verkkoja työkalujen avulla ja päättämällä, mikä tarjoaa parhaan suorituskyvyn käyttötapaukseesi. Katso, mikä CDN sopii parhaiten kirjastollesi cdnjs verkkosivusto.
9. Poista muistivuotoja
Muistivuodot voivat vaikuttaa negatiivisesti sovelluksen suorituskykyyn. Vuotoja tapahtuu, kun ladattu sivu vie yhä enemmän muistia.
Esimerkki muistivuotoja on, kun selaimesi alkaa hidastua pitkän työskentelyn jälkeen sovelluksen kanssa.
Voit käyttää Chromen kehittäjätyökaluja sovelluksesi muistivuotojen havaitsemiseen. Työkalu tallentaa aikajanan Suorituskyky-välilehdelle. Monia muistivuotoja tapahtuu DOM-elementtien poistamisen seurauksena. Roskankerääjä vapauttaa muistin vasta, kun kaikki näihin elementteihin viittaavat muuttujat ovat soveltamisalan ulkopuolella.
Työkalut, kuten Lighthouse, Google PageSpeed Insights ja Chrome, voivat auttaa havaitsemaan ongelmia. Lighthouse tarkistaa esteettömyys-, suorituskyky- ja hakukoneoptimointiongelmat. Google PageSpeed voi auttaa sinua optimoimaan JavaScriptin sovelluksesi tehokkuuden parantamiseksi.
Chrome-selain tarjoaa Kehittäjätyökalut-ominaisuuden, jonka voit vaihtaa napsauttamalla F12-näppäintä avainsanasi kohdalla. Sen suorituskykyanalyysin avulla voit kytkeä verkon päälle ja pois ja tarkistaa suorittimen kulutuksen. Se tarkistaa myös muita mittareita löytääkseen verkkosivustoosi vaikuttavia ongelmia.
Verkkokehittäjänä työskentelet paljon verkkoselaimellasi. Useimmissa selaimissa on joukko kehittäjätyökaluja, jotka auttavat sinua verkkosivustojen ongelmien vianmäärityksessä. Google Chromes Developer Tools -ominaisuus sisältää monia toimintoja, jotka auttavat sinua.
