10 JavaScripti näpunäidet ja nippi jõudluse optimeerimiseks

JavaScript on veebiarenduse jaoks ülioluline. Keel on enamiku veebisaitidel nähtava interaktiivsuse ja animatsiooni taga. Kuid JavaScript võib põhjustada ka veebisaidi aeglustumist, kui kood on halvasti kirjutatud. Ebatõhususe tagajärjeks võib olla nii kehv laadimisaeg kui ka aeglane renderduskiirus.

Kasutage oma veebisaidi kiiruse ja toimivuse parandamiseks järgmisi tavasid.

1. Määratlege muutujad lokaalselt

Programmeerijana pead sa teadma kuidas ulatuse määramine töötab. JavaScriptis on kahte tüüpi muutujaid: kohalikud muutujad ja globaalsed muutujad.

Kohalikud muutujad on funktsiooniplokis deklareeritud muutujad. Ulatus jääb ainult selle funktsiooni piiresse, milles need on deklareeritud. Globaalsed muutujad on muutujad, millele on juurdepääs kogu skripti ulatuses. Globaalsete muutujate puhul jääb ulatus kogu programmi vältel alles.

Kui proovite muutujale juurde pääseda, teeb brauser midagi, mida nimetatakse ulatuse otsinguks. See kontrollib muutuja lähimat ulatust ja otsib üles, kuni leiab muutuja. Seega, mida suurem ulatusahel teie programmis on, seda kauem kulub praegusest ulatust väljapoole jäävatele muutujatele juurdepääsemiseks.

Sel põhjusel on kõige parem määratleda muutujad alati täitmiskontekstile lähemal. Kasutage globaalseid muutujaid ainult harvadel juhtudel; kui soovite salvestada näiteks kogu skripti jooksul kasutatud andmeid. See vähendab teie programmi ulatuste arvu, parandades seeläbi jõudlust.

2. Laadige JavaScript asünkroonselt

JavaScript on ühe lõimega programmeerimiskeel. See tähendab, et kui funktsioon on käivitatud, peab see töötama lõpuni, enne kui mõni funktsioon saab käivitada. See arhitektuur võib põhjustada olukordi, kus kood võib lõime blokeerida ja rakenduse külmutada.

Lõime hea toimimise tagamiseks peaksite teatud aega raiskavaid ülesandeid täitma asünkroonselt. Kui ülesanne töötab asünkroonselt, ei kasuta see kogu lõime töötlemisvõimsust. Selle asemel liitub funktsioon sündmuste järjekorda, kus see käivitatakse pärast kõigi teiste koodide täitmist.

API-kutsed sobivad suurepäraselt asünkroonse mustri jaoks, kuna nende lahendamine võtab aega. Nii et selle asemel, et see lõime kinni hoiaks, kasutage andmete asünkroonseks toomiseks lubaduspõhist teeki, nagu toomise API. Nii saab muud koodi käitada samal ajal, kui brauser API-st andmeid hangib.

Mõistke asünkroonse programmeerimise keerukust ja parandate oma rakenduse jõudlust.

3. Vältige tarbetuid silmuseid

Silmuste kasutamine JavaScriptis võib olla kallis, kui te pole ettevaatlik. Üksuste kogust jalgrattaga sõitmine võib brauserile palju pinget avaldada.

Kuigi te kindlasti ei saa koodis silmuseid vältida, peate nendega võimalikult vähe tööd tegema. Saate kasutada muid tehnikaid, mis väldivad vajadust kogust läbi vaadata.

Näiteks saate massiivi pikkuse salvestada erinevasse muutujasse, selle asemel et lugeda seda tsükli iga iteratsiooni ajal. Kui saate tsüklist selle, mida soovite, murdke sellest kohe välja.

4. Minimeeri JavaScripti kood

Minifikatsioon on tõhus meetod JavaScripti koodi optimeerimiseks. Minimeerija muudab teie toore lähtekoodi väiksemaks tootmisfailiks. Need eemaldavad kommentaarid, kärbivad mittevajaliku süntaksi ja lühendavad pikki muutujate nimesid. Samuti eemaldavad nad kasutamata koodi ja optimeerivad olemasolevaid funktsioone, et hõivata vähem ridu.

Minimeerijate näited on Google Closure Compiler, UglifyJS ja Microsoft AJAX minifier. Saate oma koodi ka käsitsi minimeerida, kontrollides seda ja otsides võimalusi selle optimeerimiseks. Näiteks saate lihtsustage koodis olevaid if-lauseid.

5. Tihendage suured failid Gzipiga

Enamik kliente tihendamiseks ja lahtipakkimiseks kasutage Gzipi suured JavaScripti failid. Kui brauser küsib ressurssi, saab server selle tihendada, et tagastada vastuses väiksem fail. Kui klient faili saab, pakkib see selle lahti. Üldiselt säästab see lähenemisviis ribalaiust ja vähendab latentsust, parandades rakenduse jõudlust.

6. Minimeerige juurdepääs DOM-ile

Juurdepääs DOM-ile võib mõjutada teie rakenduse jõudlust, kuna brauserit peab värskendama iga DOM-i värskendusega. Parim on piirata DOM-i juurdepääsu võimalikult väikese sagedusega. Üks võimalus seda teha on viidete salvestamine brauseri objektidele.

Võite kasutada ka teeki, nagu React, mis muudab virtuaalset DOM-i enne, kui need reaalsesse DOM-i lükatakse. Selle tulemusena värskendab brauser kogu lehe värskendamise asemel värskendamist vajavaid rakenduse osi.

7. Lükka JavaScripti tarbetu laadimine edasi

Kuigi on oluline, et teie leht laaditaks õigeaegselt, ei pea kõik funktsioonid alglaadimisel töötama. Oletame, et teil on klõpsatav nupp ja vahekaardimenüü, mis viitavad JavaScripti koodile; võite mõlemad edasi lükata kuni lehe laadimiseni.

See meetod vabastab töötlemisvõimsust, võimaldades teil vajalikud leheelemendid õigeaegselt renderdada. Viivitate koodi koostamisega, mis võib sisaldada lehe esialgset kuvamist. Seejärel, kui lehe laadimine on lõppenud, võite alustada funktsioonide laadimist. Nii saab kasutaja nautida kiiret laadimisaega ja alustada elementidega õigeaegselt suhtlemist.

Saate lisada oma peaelemendile ka väikseima koguse CSS-i ja JavaScripti, nii et see laaditakse kohe. Teisene kood võib seejärel elada eraldi .css- ja js-failides. See tehnika nõuab korralikke teadmisi kuidas DOM töötab.

8. Kasutage JavaScripti laadimiseks CDN-i

Sisu edastamise võrgu kasutamine aitab lehe laadimisaega kiirendada, kuid see ei ole alati tõhus. Näiteks kui valite külastaja riigis ilma kohaliku serverita CDN-i, ei saa nad sellest kasu.

Selle probleemi lahendamiseks saate kasutada tööriistu, et võrrelda mitut CDN-i ja otsustada, milline on teie kasutusjuhtumi jaoks parim jõudlus. Et teada saada, milline CDN on teie teegi jaoks parim, vaadake lehte cdnjs veebisait.

9. Eemaldage mälulekked

Mälu lekked võivad rakenduse jõudlust negatiivselt mõjutada. Lekked tekivad siis, kui laaditud leht võtab üha rohkem mälu.

Mälulekke näide on see, kui teie brauser hakkab pärast pikka rakendusega töötamist aeglustuma.

Rakenduse mälulekke tuvastamiseks saate kasutada Chrome'i arendaja tööriistu. Tööriist salvestab ajaskaala jõudluse vahekaardile. Paljud mälulekked tekivad DOM-i elementide eemaldamise tagajärjel. Prügikoguja vabastab mälu alles siis, kui kõik nendele elementidele viitavad muutujad on kasutusalast väljas.

Sellised tööriistad nagu Lighthouse, Google PageSpeed ​​Insights ja Chrome võivad aidata teil probleeme tuvastada. Lighthouse kontrollib juurdepääsetavuse, jõudluse ja SEO probleeme. Google PageSpeed ​​aitab teil optimeerida JavaScripti, et parandada teie rakenduse jõudlust.

Chrome'i brauseris on arendaja tööriistade funktsioon, mille saate sisse lülitada, klõpsates märksõnal F12. Selle jõudlusanalüüsi abil saate võrgu sisse ja välja lülitada ning protsessori tarbimist kontrollida. See kontrollib ka muid mõõdikuid, et avastada teie veebisaiti mõjutavaid probleeme.

Veebiarendajana töötate palju oma veebibrauseris. Enamik brausereid on varustatud arendajatööriistade komplektiga, mis aitavad teil veebisaidi probleemide tõrkeotsingul. Google Chromesi arendajatööriistade funktsioonil on palju abistavaid funktsioone.