10 nasvetov in trikov za JavaScript za optimizacijo delovanja

JavaScript je ključnega pomena za spletni razvoj. Jezik stoji za večino interaktivnosti in animacij, ki jih boste videli na spletnih mestih. Toda JavaScript lahko povzroči tudi upočasnitev spletne strani, če je koda slabo napisana. Neučinkovitost lahko povzroči prekratke čase nalaganja in počasno hitrost upodabljanja.

Sprejmite naslednje prakse za izboljšanje hitrosti in učinkovitosti vašega spletnega mesta.

1. Lokalno definirajte spremenljivke

Kot programer morate vedeti kako deluje obseg. V JavaScriptu obstajata dve vrsti spremenljivk: lokalne spremenljivke in globalne spremenljivke.

Lokalne spremenljivke so spremenljivke, deklarirane znotraj funkcijskega bloka. Obseg ostane samo znotraj funkcije, v kateri so deklarirani. Globalne spremenljivke so spremenljivke, ki so dostopne v celotnem skriptu. V primeru globalnih spremenljivk ostaja obseg v celotnem programu.

Kadarkoli poskušate dostopati do spremenljivke, brskalnik naredi nekaj, kar je znano kot iskanje obsega. Preveri najbližji obseg za spremenljivko in išče, dokler ne najde spremenljivke. Tako več obsega verige imate v programu, dlje bo trajalo dostopanje do spremenljivk izven trenutnega obsega.

Iz tega razloga je najbolje, da svoje spremenljivke vedno definirate bližje kontekstu izvajanja. Globalne spremenljivke uporabljajte le ob redkih priložnostih; ko želite na primer shraniti podatke, ki se uporabljajo v celotnem skriptu. To bo zmanjšalo število obsegov v vašem programu in s tem izboljšalo učinkovitost.

2. Naloži JavaScript asinhrono

JavaScript je enoniten programski jezik. To pomeni, da se mora funkcija, ko se enkrat izvede, izvajati do konca, preden se lahko zažene druga funkcija. Ta arhitektura lahko povzroči situacije, v katerih lahko koda blokira nit in zamrzne aplikacijo.

Če želite ohraniti dobro delovanje niti, bi morali asinhrono zagnati določene naloge, ki zapravljajo čas. Ko se naloga izvaja asinhrono, ne prevzame celotne procesorske moči niti. Namesto tega se funkcija pridruži čakalni vrsti dogodkov, kjer se sproži po izvedbi vseh drugih kod.

Klici API-ja so kot nalašč za asinhroni vzorec, ker potrebujejo čas za razrešitev. Torej, namesto da bi zadrževal nit, bi za asinhrono pridobivanje podatkov uporabili knjižnico, ki temelji na obljubah, kot je API za pridobitev. Na ta način se lahko izvaja druga koda, medtem ko brskalnik pridobiva podatke iz API-ja.

Razumejte zapletenost asinhronega programiranja in izboljšali boste delovanje svoje aplikacije.

3. Izogibajte se nepotrebnim zankam

Uporaba zank v JavaScriptu je lahko drago, če niste previdni. Kroženje po zbirki elementov lahko zelo obremeni brskalnik.

Čeprav se zagotovo ne morete izogniti zankam v kodi, morate v njih opraviti čim manj dela. Uporabite lahko druge tehnike, s katerimi se izognete potrebi po kroženju po zbirki.

Na primer, dolžino matrike lahko shranite v drugo spremenljivko, namesto da bi jo brali med vsako ponovitvijo zanke. Če iz zanke dobite, kar želite, se takoj izvijte iz nje.

4. Zmanjšajte kodo JavaScript

Minifikacija je učinkovita metoda za optimizacijo kode JavaScript. Minimizator pretvori vašo surovo izvorno kodo v manjšo produkcijsko datoteko. Odstranijo komentarje, obrežejo nepotrebno sintakso in skrajšajo dolga imena spremenljivk. Prav tako odstranijo neuporabljeno kodo in optimizirajo obstoječe funkcije, da zavzamejo manj vrstic.

Primeri minimizatorjev so Google Closure Compiler, UglifyJS in Microsoft AJAX minifier. Svojo kodo lahko tudi ročno zmanjšate tako, da jo pregledate in poiščete načine za njeno optimizacijo. Na primer, lahko poenostavite stavke if v vaši kodi.

5. Stisnite velike datoteke z Gzip

Večina strank uporabite Gzip za stiskanje in razširjanje velike datoteke JavaScript. Ko brskalnik zahteva vir, ga lahko strežnik stisne, da v odgovoru vrne manjšo datoteko. Ko odjemalec prejme datoteko, jo razpakira. Na splošno ta pristop prihrani pasovno širino in zmanjša zakasnitev ter izboljša delovanje aplikacije.

6. Zmanjšajte dostop do DOM

Dostop do DOM lahko vpliva na delovanje vaše aplikacije, ker se mora brskalnik osvežiti z vsako posodobitvijo DOM. Najbolje je, da omejite dostop do DOM na najmanjšo možno frekvenco. Eden od načinov, kako lahko to storite, je shranjevanje referenc na objekte brskalnika.

Uporabite lahko tudi knjižnico, kot je React, ki spremeni navidezni DOM, preden jih potisne v pravi DOM. Posledično brskalnik posodobi dele aplikacije, ki jih je treba posodobiti, namesto da bi osvežil celotno stran.

7. Odložite nepotrebno nalaganje JavaScripta

Čeprav je bistveno, da se vaša stran naloži pravočasno, ni treba, da vse funkcije delujejo ob začetnem nalaganju. Recimo, da imate gumb, ki ga je mogoče klikniti, in meni z zavihki, ki se sklicujeta na kodo JavaScript; oboje lahko odložite, dokler se stran ne naloži.

Ta metoda sprosti procesorsko moč, kar vam omogoča pravočasno upodabljanje potrebnih elementov strani. Odložite prevajanje kode, ki bi lahko zadržala začetni prikaz strani. Potem, ko se stran konča z nalaganjem, lahko začnete nalagati funkcionalnosti. Tako lahko uporabnik uživa v hitrem času nalaganja in začne pravočasno komunicirati z elementi.

V element glave lahko vključite tudi najmanjšo količino CSS in JavaScript, da se naloži takoj. Sekundarna koda lahko nato živi v ločenih datotekah .css in .js. Ta tehnika zahteva dobro znanje kako deluje DOM.

8. Uporabite CDN za nalaganje JavaScripta

Uporaba omrežja za dostavo vsebin pomaga pospešiti nalaganje strani, vendar ni vedno učinkovito. Na primer, če izberete CDN brez lokalnega strežnika v državi obiskovalca, ta ne bo imel koristi.

Če želite rešiti to težavo, lahko uporabite orodja za primerjavo več CDN-jev in se odločite, kateri nudi najboljšo zmogljivost za vaš primer uporabe. Če želite izvedeti, kateri CDN je najboljši za vašo knjižnico, si oglejte cdnjs Spletna stran.

9. Odstranite puščanje pomnilnika

Puščanje pomnilnika lahko negativno vpliva na delovanje aplikacije. Do puščanja pride, ko naložena stran zavzame vedno več pomnilnika.

Primer puščanja pomnilnika je, ko se vaš brskalnik po dolgem delu z aplikacijo začne upočasnjevati.

Za odkrivanje uhajanja pomnilnika v aplikaciji lahko uporabite orodja za razvijalce za Chrome. Orodje beleži časovnico na zavihku uspešnosti. Veliko puščanja pomnilnika se pojavi kot posledica odstranjevanja elementov DOM. Zbiralnik smeti bo sprostil pomnilnik šele, ko bodo vse spremenljivke, ki se sklicujejo na te elemente, izven obsega.

Orodja, kot so Lighthouse, Google PageSpeed ​​Insights in Chrome, vam lahko pomagajo odkriti težave. Lighthouse preverja težave z dostopnostjo, zmogljivostjo in SEO. Google PageSpeed ​​vam lahko pomaga optimizirati JavaScript za izboljšanje učinkovitosti vaše aplikacije.

Brskalnik Chrome ponuja funkcijo orodij za razvijalce, ki jo lahko preklopite s klikom na F12 na vaši ključni besedi. Z njeno analizo zmogljivosti lahko vklopite in izklopite omrežje ter preverite porabo procesorja. Preverja tudi druge meritve, da odkrije težave, ki vplivajo na vaše spletno mesto.

Kot spletni razvijalec boste veliko delali v spletnem brskalniku. Večina brskalnikov ima zbirko orodij za razvijalce, ki vam pomagajo pri odpravljanju težav s spletnimi stranmi. Funkcija Orodja za razvijalce Google Chrome ima veliko funkcij, ki vam pomagajo.