Sužinokite, kaip pagreitinti savo tinklalapius patobulindami „JavaScript“, kad pašalintumėte kliūtis.
„JavaScript“ yra gyvybiškai svarbus žiniatinklio kūrimui. Kalba yra už daugumos interaktyvumo ir animacijos, kurią matysite svetainėse. Tačiau „JavaScript“ taip pat gali sulėtinti svetainę, jei kodas yra blogai parašytas. Dėl neefektyvumo gali sumažėti įkėlimo laikas ir lėtas atvaizdavimo greitis.
Norėdami pagerinti savo svetainės greitį ir našumą, vadovaukitės toliau nurodytais būdais.
1. Apibrėžkite kintamuosius lokaliai
Kaip programuotojas, jūs turite žinoti kaip veikia apimties nustatymas. „JavaScript“ yra dviejų tipų kintamieji: vietiniai ir pasauliniai kintamieji.
Vietiniai kintamieji yra kintamieji, deklaruoti funkciniame bloke. Taikymo sritis lieka tik toje funkcijoje, kurioje jie deklaruoti. Visuotiniai kintamieji yra kintamieji, pasiekiami visame scenarijuje. Visuotinių kintamųjų atveju apimtis išlieka visoje programoje.
Kai bandote pasiekti kintamąjį, naršyklė atlieka tai, kas vadinama apimties paieška. Jis tikrina artimiausią kintamojo apimtį ir nuolat ieško, kol randa kintamąjį. Taigi, kuo daugiau apimties grandinės turite savo programoje, tuo ilgiau užtruks prieiga prie kintamųjų, kurie yra už dabartinės apimties ribų.
Dėl šios priežasties geriausia visada apibrėžti kintamuosius arčiau vykdymo konteksto. Globalius kintamuosius naudokite tik retais atvejais; kai, pavyzdžiui, norite saugoti duomenis, naudojamus visame scenarijuje. Tai sumažins jūsų programos apimčių skaičių ir pagerins našumą.
2. Įkelti „JavaScript“ asinchroniškai
JavaScript yra vienos gijos programavimo kalba. Tai reiškia, kad įvykdžius funkciją, ji turi veikti iki pabaigos, kad galėtų paleisti kitą funkciją. Dėl šios architektūros gali atsirasti situacijų, kai kodas gali užblokuoti giją ir užšaldyti programą.
Kad gija veiktų gerai, tam tikras laiko eikvojančias užduotis turėtumėte vykdyti asinchroniškai. Kai užduotis vykdoma asinchroniškai, ji neužima visos gijos apdorojimo galios. Vietoj to, funkcija prisijungia prie įvykių eilės, kurioje ji suaktyvinama įvykdžius visus kitus kodus.
API skambučiai puikiai tinka asinchroniniam modeliui, nes juos išspręsti reikia laiko. Taigi, užuot sulaikę giją, naudokite pažadais pagrįstą biblioteką, pvz., gavimo API, kad gautumėte duomenis asinchroniškai. Tokiu būdu kitas kodas gali veikti, kol naršyklė nuskaito duomenis iš API.
Supraskite asinchroninio programavimo subtilybes ir pagerinsite savo programos našumą.
3. Venkite nereikalingų kilpų
Ciklų naudojimas „JavaScript“. gali būti brangu, jei nesate atsargūs. Važiavimas per elementų rinkinį gali labai apkrauti naršyklę.
Nors jūs tikrai negalite išvengti kodo kilpų, turite kuo mažiau dirbti su jais. Galite naudoti kitus metodus, kad nereikėtų peržiūrėti kolekcijos.
Pavyzdžiui, galite išsaugoti masyvo ilgį kitame kintamajame, o ne skaityti jį per kiekvieną ciklo iteraciją. Jei gaunate tai, ko norite iš kilpos, nedelsdami išeikite iš jos.
4. Sumažinti JavaScript kodą
Sumažinimas yra efektyvus JavaScript kodo optimizavimo metodas. Minimalizatorius paverčia jūsų neapdorotą šaltinio kodą į mažesnį gamybos failą. Jie pašalina komentarus, apkarpo nereikalingą sintaksę ir sutrumpina ilgus kintamųjų pavadinimus. Jie taip pat pašalina nenaudojamą kodą ir optimizuoja esamas funkcijas, kad užimtų mažiau eilučių.
Minimalizatorių pavyzdžiai yra Google Closure Compiler, UglifyJS ir Microsoft AJAX minifier. Taip pat galite rankiniu būdu sumažinti kodą, jį apžiūrėdami ir ieškodami būdų, kaip jį optimizuoti. Pavyzdžiui, galite supaprastinkite if teiginius savo kode.
5. Suspauskite didelius failus naudodami Gzip
Dauguma klientų naudokite Gzip, kad suspaustumėte ir išskleiskite dideli JavaScript failai. Kai naršyklė prašo išteklių, serveris gali jį suspausti, kad atsakyme būtų pateiktas mažesnis failas. Kai klientas gauna failą, jis jį išskleidžia. Apskritai šis metodas taupo pralaidumą ir sumažina delsą, pagerindamas programos našumą.
6. Sumažinkite DOM prieigą
Prieiga prie DOM gali turėti įtakos jūsų programos veikimui, nes naršyklė turi būti atnaujinta kiekvieną kartą atnaujinus DOM. Geriausia apriboti DOM prieigą iki mažiausio įmanomo dažnio. Vienas iš būdų tai padaryti yra išsaugoti nuorodas į naršyklės objektus.
Taip pat galite naudoti biblioteką, pvz., „React“, kuri pakeičia virtualųjį DOM prieš perkeldama juos į tikrąjį DOM. Dėl to naršyklė atnaujina tas programos dalis, kurias reikia atnaujinti, o ne atnaujina visą puslapį.
7. Atidėti nereikalingą „JavaScript“ įkėlimą
Nors labai svarbu, kad jūsų puslapis būtų įkeltas laiku, ne visos funkcijos turi veikti pradinio įkėlimo metu. Tarkime, kad turite spustelėjamą mygtuką ir skirtuko meniu, nurodantį „JavaScript“ kodą; abu galite atidėti, kol bus įkeltas puslapis.
Šis metodas atlaisvina apdorojimo galią ir leidžia laiku pateikti reikiamus puslapio elementus. Vėluojate sudaryti kodą, kuriame gali būti pradinis puslapio vaizdas. Tada, kai puslapis baigs įkelti, galėsite pradėti įkelti funkcijas. Tokiu būdu vartotojas gali mėgautis greitu įkėlimo laiku ir laiku pradėti bendrauti su elementais.
Taip pat galite įtraukti mažiausią CSS ir JavaScript kiekį į savo head elementą, kad jis būtų įkeltas nedelsiant. Tada antrinis kodas gali būti atskiruose .css ir .js failuose. Ši technika reikalauja tinkamų žinių kaip veikia DOM.
8. Norėdami įkelti „JavaScript“, naudokite CDN
Turinio pristatymo tinklo naudojimas padeda pagreitinti puslapio įkėlimo laiką, tačiau tai ne visada efektyvu. Pavyzdžiui, jei pasirinksite CDN be vietinio serverio lankytojo šalyje, jie neturės naudos.
Norėdami išspręsti šią problemą, galite naudoti įrankius, kad palygintumėte kelis CDN ir nuspręstumėte, kuris jūsų naudojimo atveju siūlo geriausią našumą. Norėdami sužinoti, kuris CDN geriausiai tinka jūsų bibliotekai, peržiūrėkite cdnjs Interneto svetainė.
9. Pašalinkite atminties nutekėjimą
Atminties nutekėjimas gali neigiamai paveikti programos veikimą. Nutekėjimai atsiranda, kai įkeltas puslapis užima vis daugiau atminties.
Atminties nutekėjimo pavyzdys yra tada, kai naršyklė pradeda lėtėti po ilgos darbo su programa seanso.
Galite naudoti „Chrome“ kūrėjo įrankius, kad aptiktumėte atminties nutekėjimą programoje. Įrankis įrašo laiko juostą našumo skirtuke. Daugelis atminties nutekėjimų įvyksta pašalinus DOM elementus. Šiukšlių rinktuvas išlaisvins atmintį tik tada, kai visi kintamieji, nurodantys šiuos elementus, nepatenka į taikymo sritį.
Tokie įrankiai kaip „Lighthouse“, „Google PageSpeed Insights“ ir „Chrome“ gali padėti aptikti problemas. „Lighthouse“ tikrina, ar nėra prieinamumo, našumo ir SEO problemų. „Google PageSpeed“ gali padėti optimizuoti „JavaScript“, kad pagerintumėte programos našumą.
„Chrome“ naršyklėje yra kūrėjo įrankių funkcija, kurią galite perjungti spustelėdami F12 ant raktinio žodžio. Galite naudoti jos našumo analizę, kad įjungtumėte ir išjungtumėte tinklą ir patikrintumėte procesoriaus suvartojimą. Ji taip pat tikrina kitus rodiklius, kad nustatytų problemas, turinčias įtakos jūsų svetainei.
Kaip žiniatinklio kūrėjas, jūs daug dirbsite su žiniatinklio naršykle. Daugumoje naršyklių yra kūrėjo įrankių rinkinys, kuris padės išspręsti svetainės problemas. „Google Chromes“ kūrėjo įrankių funkcija turi daug funkcijų, kurios jums padės.
