Naučite kako ubrzati svoje web stranice podešavanjem JavaScripta kako biste uklonili uska grla.
JavaScript je vitalan za web razvoj. Jezik stoji iza većine interaktivnosti i animacija koje ćete vidjeti na web stranicama. Ali JavaScript također može uzrokovati usporavanje web stranice ako je kod loše napisan. Neučinkovitost može rezultirati i slabim vremenima učitavanja i sporom brzinom renderiranja.
Usvojite sljedeće prakse kako biste poboljšali brzinu i izvedbu svoje web stranice.
1. Lokalno definirajte varijable
Kao programer morate znati kako funkcionira scoping. U JavaScriptu postoje dvije vrste varijabli: lokalne varijable i globalne varijable.
Lokalne varijable su varijable deklarirane unutar funkcijskog bloka. Opseg ostaje samo unutar funkcije u kojoj su deklarirani. Globalne varijable su varijable dostupne kroz skriptu. U slučaju globalnih varijabli, opseg ostaje u cijelom programu.
Kad god pokušate pristupiti varijabli, preglednik radi nešto što je poznato kao pretraživanje opsega. Provjerava najbliži opseg za varijablu i nastavlja tražiti dok ne pronađe varijablu. Dakle, što više lanca opsega imate u svom programu, dulje će trebati pristup varijablama izvan trenutnog opsega.
Iz tog razloga, najbolje je uvijek definirati svoje varijable bliže kontekstu izvršenja. Globalne varijable koristite samo u rijetkim prilikama; kada, na primjer, želite pohraniti podatke koji se koriste u cijeloj skripti. Ovo će smanjiti broj opsega u vašem programu, čime će se poboljšati izvedba.
2. Učitaj JavaScript asinkrono
JavaScript je jednonitni programski jezik. To znači da kada se funkcija jednom izvrši, mora se pokrenuti do kraja prije nego što se neka druga funkcija može pokrenuti. Ova arhitektura može dovesti do situacija u kojima kod može blokirati nit i zamrznuti aplikaciju.
Kako bi nit dobro funkcionirala, trebali biste izvoditi određene zadatke koji gube vrijeme asinkrono. Kada se zadatak izvodi asinkrono, on ne zauzima svu procesorsku snagu niti. Umjesto toga, funkcija se pridružuje redu čekanja događaja gdje se pokreće nakon izvršenja svih ostalih kodova.
API pozivi savršeni su za asinkroni obrazac jer im treba vremena da se riješe. Dakle, umjesto da zadržava nit, upotrijebili biste biblioteku temeljenu na obećanjima kao što je fetch API za asinkrono dohvaćanje podataka. Na taj način se drugi kod može izvoditi dok preglednik dohvaća podatke iz API-ja.
Shvatite zamršenost asinkronog programiranja i poboljšat ćete izvedbu svoje aplikacije.
3. Izbjegavajte nepotrebne petlje
Korištenje petlji u JavaScriptu može biti skupo ako niste pažljivi. Kruženje kroz zbirku stavki može jako opteretiti preglednik.
Iako definitivno ne možete izbjeći petlje u svom kodu, trebate što manje raditi na njima. Možete koristiti druge tehnike koje izbjegavaju potrebu za lutanjem kroz zbirku.
Na primjer, možete pohraniti duljinu niza u drugu varijablu, umjesto da je čitate tijekom svake iteracije petlje. Ako iz petlje dobijete ono što želite, odmah se iz nje izbijte.
4. Smanjite JavaScript kôd
Minifikacija je učinkovita metoda za optimizaciju JavaScript koda. Minimizator pretvara vaš neobrađeni izvorni kod u manju proizvodnu datoteku. Uklanjaju komentare, skraćuju nepotrebnu sintaksu i skraćuju duga imena varijabli. Također uklanjaju neiskorišteni kod i optimiziraju postojeće funkcije kako bi zauzele manje redaka.
Primjeri minimizatora su Google Closure Compiler, UglifyJS i Microsoft AJAX minifier. Također možete ručno minimizirati svoj kod tako da ga pregledate i tražite načine da ga optimizirate. Na primjer, možete pojednostavite naredbe if u svom kodu.
5. Komprimirajte velike datoteke s Gzipom
Većina klijenata koristite Gzip za komprimiranje i dekomprimiranje velike JavaScript datoteke. Kada preglednik zatraži resurs, poslužitelj ga može komprimirati kako bi u odgovoru vratio manju datoteku. Kada klijent primi datoteku, dekomprimira je. Općenito, ovaj pristup štedi propusnost i smanjuje kašnjenje, poboljšavajući rad aplikacije.
6. Smanjite pristup DOM-u
Pristup DOM-u može utjecati na performanse vaše aplikacije jer se preglednik mora osvježavati sa svakim ažuriranjem DOM-a. Najbolje je ograničiti pristup DOM-u na najmanju moguću učestalost. Jedan od načina na koji to možete učiniti je pohranjivanje referenci na objekte preglednika.
Također možete koristiti biblioteku kao što je React koja mijenja virtualni DOM prije nego što ih gurne u pravi DOM. Kao rezultat toga, preglednik ažurira dijelove aplikacije koje je potrebno ažurirati, umjesto da osvježi cijelu stranicu.
7. Odgodite nepotrebno učitavanje JavaScripta
Iako je bitno da se vaša stranica učitava na vrijeme, ne moraju sve funkcije raditi pri početnom učitavanju. Pretpostavimo da imate gumb na koji se može kliknuti i izbornik kartice koji referenciraju JavaScript kod; možete odgoditi oboje dok se stranica ne učita.
Ova metoda oslobađa procesorsku snagu, omogućujući vam da na vrijeme iscrtate potrebne elemente stranice. Odgađate kompajliranje koda koji bi mogao zadržati početni prikaz stranice. Zatim, nakon što se stranica završi s učitavanjem, možete početi učitavati funkcionalnosti. Na taj način korisnik može uživati u brzom vremenu učitavanja i započeti interakciju s elementima na vrijeme.
Također možete uključiti najmanju količinu CSS-a i JavaScripta u svoj element glave, tako da se odmah učitava. Sekundarni kod tada može živjeti u zasebnim .css i .js datotekama. Ova tehnika zahtijeva pristojno poznavanje kako radi DOM.
8. Koristite CDN za učitavanje JavaScripta
Korištenje mreže za isporuku sadržaja pomaže ubrzati vrijeme učitavanja stranice, ali nije uvijek učinkovito. Na primjer, ako odaberete CDN bez lokalnog poslužitelja u zemlji posjetitelja, oni neće imati koristi.
Da biste riješili ovaj problem, možete koristiti alate za usporedbu nekoliko CDN-ova i odlučiti koji nudi najbolju izvedbu za vaš slučaj upotrebe. Kako biste saznali koji je CDN najbolji za vašu knjižnicu, pogledajte cdnjs web stranica.
9. Uklonite curenje memorije
Curenje memorije može negativno utjecati na performanse aplikacije. Do curenja dolazi kada učitana stranica zauzima sve više memorije.
Primjer curenja memorije je kada vaš preglednik počne usporavati nakon duge sesije rada s aplikacijom.
Možete koristiti Chromeove alate za razvojne programere da otkrijete curenje memorije u svojoj aplikaciji. Alat bilježi vremensku traku na kartici izvedbe. Do mnogih curenja memorije dolazi kao rezultat uklanjanja DOM elemenata. Sakupljač smeća će osloboditi memoriju samo kada sve varijable koje se odnose na ove elemente budu izvan opsega.
Alati kao što su Lighthouse, Google PageSpeed Insights i Chrome mogu vam pomoći u otkrivanju problema. Lighthouse provjerava probleme s pristupačnošću, izvedbom i SEO-om. Google PageSpeed vam može pomoći optimizirati JavaScript kako biste poboljšali izvedbu svoje aplikacije.
Preglednik Chrome nudi značajku alata za razvojne programere koju možete uključiti klikom na F12 na vašoj ključnoj riječi. Možete koristiti njegovu analizu performansi za uključivanje i isključivanje mreže i provjeru potrošnje CPU-a. Također provjerava druge metrike kako bi otkrio probleme koji utječu na vašu web stranicu.
Kao web programer, puno ćete raditi u svom web pregledniku. Većina preglednika dolazi s paketom alata za razvojne programere koji vam pomažu u rješavanju problema s web stranicama. Značajka Google Chromes Developer Tools ima mnogo funkcija koje vam mogu pomoći.