JavaScript je jedan od tri osnovna jezika na web stranici. Iako nije neophodno, većina sajtova zahteva JavaScript zbog funkcionalnosti. Možete da imate najbolјu serversku opremu na tržištu, ali loš JavaScript kod može da bude usko grlo i uspori vreme učitavanja vašeg sajta. Evo nekoliko saveta kako da ubrzate vaš sajt jednostavnim podešavanjima JavaScript-a.
- Manipulišite elementima pre nego što ih dodate u DOM
DOM je svaki element, uklјučujući HTML i njegove podatke štampane u browseru. Programerima je uobičajeno da preuzmu vrednosti iz DOM-a i da ih promene na osnovu korisničkog unosa. Možda se čini zamorno, ali manipulisanje vrednostima nakon što ste ih već ispisali u DOM oduzima više vremena nego što je to slučaj sa oduzetim DOM elementima.
Na primer, ako imate neki sadržaj koji želite da odštampate u div elementu, koristite JavaScript da biste promenili sadržaj u obliku niza, a zatim ispisujte niz u element. Smanjujete potrebu za JavaScript engine-om da obrađuje HTML dok radite sa promenlјivim sadržajem.
- Umanjite JavaScript datoteke
Dok kreirate JavaScript datoteke, formatiranje vam pomaže da pročitate kod i razumete njegovu logiku. Svaki koder koji je prošao fakultet zna koliko je važno formatiranje sintakse kako bi bila lakša za čitanje. Međutim, web serveru nisu potrebni ovi karakteri za obradu datoteka. Možete da smanjite veličinu JavaScript datoteka kombinovanjem.
Minifikacija je proces skidanja posebnih znakova za formatiranje, kao što su kartice i dodatni razmaci iz kodnih datoteka. Veličina datoteke smanjena za nekoliko bajtova štedi vašim korisnicima vreme za preuzimanje skripti. Ovaj korak je neophodan za sajtove koje imaju nekoliko spolјnih skripti koje moraju da učitaju da bi web sajt funkcionisao.
- Koristite keširanje
JavaScript datoteke se retko menjaju. Vaše CSS datoteke se takođe retko menjaju. Ako keširate dve datoteke, preostaje samo sadržaj na stranici za preuzimanje. Ako koristite CDN, ne morate da se brinete o keširanju.
Trebalo bi da koristite CDN kad god možete. Mnoge popularne JavaScript biblioteke dostupne su na CDN-ovima. JQueri, Bootstrap i Angular su tri primera biblioteka dostupnih na popularnim cloud hostovima. Samo priklјučite CDN URL i više ne trebate da brinete o tome da li ćete datoteke sačuvati na vašem serveru. CDN-ovi automatski keširaju objekte tako da možete da se fokusirate na vaš lokalni kod umesto na zajedničke biblioteke.
- Vaše Skripte stavljajte na dnu vaših HTML stranica
Kada pregledač učita web stranicu, ona se učitava odozgo prema dole. Programerima je uobičajeno da CSS i JS veze postave u glavni deo HTML stranice. Ovaj odelјak se tradicionalno smešta na vrh stranice nakon uvodne HTML oznake, što znači da pregledač prvo učita JS i CSS datoteke, nakon čega se učitava sadržaj oznake tela.
Sekunde koje su potrebne da se JS i CSS datoteke učitaju znače u angažovanju korisnika, posebno ako imate nekoliko datoteka za učitavanje pre sadržaja. Budući da datoteke JS i CSS korisnicima ne prikazuju sadržaj, ovaj tradicionalni način strukturiranja HTML-a može da utiče na statistiku angažovanja korisnika. Umesto toga, možete da stavite JS i CSS datoteke na dno stranica pod body tag-om.
Važno je napomenuti da se stranica i dalјe učitava u istom vremenskom roku, ali njena brzina opaženosti mnogo je brža. Korisnici vide sadržaj pre nego što se datoteke JS i CSS učitaju, pa izgleda brže iako se učitava u istom vremenskom okviru, fenomen koji se naziva stvarnom brzinom nasuprot percipiranom brzinom. Povećanje uočene brzine pobolјšava angažman korisnika bez dodavanja skupih resursa servera u vašu mrežu.
- Kompresujte datoteke pomoću GZip-a
GZip je alat za kompresiju datoteka koji smanjuje veličinu preuzetih skripti. To može da učini isto i za vaše slike. Vi kompresujete datoteke i uskladištite ovu verziju na svoj server. Browzer preuzima manju, kompresovanu verziju datoteke i raspakuje je kada se puni sadržaj prebaci na lokalni računar.
Koristite GZip kada na vašem sajtu imate nekoliko velikih datoteka. Uobičajeno je sa sajtovima kao što su sajtovi za preuzimanje slika ili web sajtovi koji koriste velike datoteke za predstavlјanje podataka. To može da uštedi vreme učitavanja vašeg sajta i pobolјša angažman korisnika. Takođe štedi prostor za skladištenje, tako da ako platite host na osnovu resursa koje koristite, račun za hosting može da se takođe smanji.
- Izbegavajte upotrebu izjave „Sa“
Izjava “with” je pogodna za kodere, ali što se tiče brzine obrade, to je užas. Izjava “with” je skraćeni kod koji omogućava da koder preskoči upisivanje imena promenlјive i samo referencuje svojstva i metode za objekt koristeći znak tačke (“.”). To čini kodiranje bržim i lakšim, ali JS engine učitava sva svojstva i metode umesto samo one na koje se poziva kada se ukuca puno ime promenlјive.
Upotreba “with” je skup način za kodiranje kada je brzina problem. Prođite kroz svoje skripte i zamenite sve “with” reference sa promenlјivim imenom.
- Pazite na svoje petlјe, posebno ugneždene petlјe
Petlјe mogu da budu oporezivanje na bilo kojem engine-u, ali su neophodne. Najbolјi način da optimizujete vaš kod je da se zapitate da li funkcija može da se koristiti umesto složene petlјe. Obično funkcije koje su mnogo bolјe za brzinu obrade mogu da zamene te petlјe.
Ugneždene petlјe mogu da budu posebno oporezovane ako imate nekoliko stotina zapisa da ponovite kroz. Takođe je lako uvesti grešku u svoj kod sa previše ugnežđenih petlјi. Razmislite o ponovnoj izradi vašeg koda ako utvrdite da petlјe uzrokuju da se vaš sajt razvlači.
- Uvek koristite klјučnu reč „var“ za promenlјive definicije
Klјučna reč „var“ definiše novu promenlјivu, ali to nije uslov. Kada ne koristite „var“, JavaScript engine je primoran da pretražuje ceo lanac opsega. Verovatno ćete dodeliti promenlјivu sa vraćenom funkcijom, ali nemojte da preskočite deklaraciju „var“. To štedi vreme obrade kad JS engine može da pronađe lokalnu varijablu bez pretraživanja lanca obuhvata.
Pored upotrebe „var“, izbegavajte i korišćenje globalnih promenlјivih kada je dovolјna lokalna. Globalne promenlјive na bilo kom jeziku su namrštene jer uvek zahtevaju više vremena za obradu i smanjuju brzinu aplikacije.
Rezime
Optimizacija JavaScript datoteka samo je jedno rešenje za spori web sajt. Ako ste pristupili vašem sajtu i otkrili da je previše spor, odličan prvi korak je da procenite JS datoteke i vaš kod.