Rýchlejší javascript

Až 70% času, ktorý je potrebný na načítanie webových stránok je možné ušetriť. Je k tomu potreba správne formátovať kód. Niekoľko nástrojov, a samozrejme aj vedieť čo to o tom, čo trvá spracovaniu stránky najdlhšie.

Ak používate prehliadač Google Chrome (majú to aj iné prehliadače), je možné po načítaní stránky stlačiť kombináciu kláves ctrl+shift+I a zobraziť tak nástroje pre vývojára. Medzi nimi nájdeme aj nástroj Resources.
V tomto nástroji sa dozvieme veľa zaujímavých informácií, ktoré súvisia z časom potrebným pre načítanie našej stránky. Keď už máme dostatočné informácie o tom, aký čas je potrebný na načítanie daných súčastí stránok, môžeme si povedať niečo o tom, ako to všetko urýchliť.

Presné štatistiky a percentá o tom, čo ako dlho trvá pri načítaní stránok si presne nepamätám, to nám však ani vedieť netreba. Stačí keď vieme, čo môžeme spraviť pre urýchlenie my, a čo sa na stránke vôbec deje pri načítaní.

1, sťahovanie dát

Asi najdlhšiu dobu trvá sťahovanie potrebných dát. Či už samotné html, obrázky, css alebo skripty.
Nejde však len o počet stiahnutých kb, ale aj o to, koľko súborov sa stiahne. Pre príklad získanie súboru dot.asp trvalo 98ms . Avšak sťahovanie trvalo len 18ms. pýtate sa čo trvalo tých zvyšných 80ms? 30ms trvalo pripájanie na server,1ms(~0ms) odosielanie požiadavku, 38ms čakanie na spojenie. A až nato sa začalo sťahovanie dát. Suma sumárum nám to robí 78.4% času. ktorý by teoreticky nebol potrebný. Ked si vezmeme že naša stránka má 30obrázkov, tak to robí 2400ms .

Zoberme si, že by sme nemali tých súborov 30, ale len jeden. Jeden, a v ňom by boli vložené všetky potrebné obrázky. Poďme si to spočítať. 30*18ms=540ms+80ms=620ms , a to je výrazne menej ako pôvodných 2400ms, ušetrili sme 1780ms! (teoretický výpočet)
V praxi by to mohlo vyzerat asi takto:

http://www.w3schools.com/css/tryit.asp?filename=trycss_clip

Obrazové dáta by sme mali optimalizované. Ale čo zo skriptami ? Ako jediné riešenie by tu zdanlivo fungovalo, keby sme na serveri includovali všetky skripty do jedného súbora a ten odoslali. Avšak musím poznamenať, že v prípade veľkých súborov sa tento efekt vytráca.

2, formátovanie kódu

Ako každý dobrý programátor, ktorý chce mať vo svojich kódoch poriadok, udržujem si v skriptoch určité formátovanie - odriadkovanie, odseky a podobne. Je to dobré nato, aby sme sa v zdrojáku vyznali teraz, ale aj po určitom čase. Keď si to však tak spočítam (počítam...), tak v mojej stránke index.html som našiel 2483 medzier, v javascripte to nepočítam, tam sa ešte dostaneme. Medzera je vlastne ako jeden bajt, čiže nám to robí len na index.html zbytočných 2,5kb. Čo nieje zase až tak veľké percento, ale netreba zabúdať že sa nám to sčíta z ostatnými úsporami, a ešte k jednej veci, ku ktorej sa dostanem.
Ako teda dosiahnuť sľubovaných 70% ? Odpoveď je v celku jednoduchá. úpravou javascriptu.
Vezmime si, že naša stránka využíva rôzne js efekty.Helpery našeptávač, textové polia, vnútorné scripty. Moja stránka využíva pre príklad 65659 znakov v js kóde. z toho tvoria medzery cca 10% .avšak.názvy premenných a funkcií tvorí cca 70%. Čo key som odstránil všetky medzery, a všetky názvy premenných a funkcií som skrátil na jedno písmenové názvy? no, dostanem predsa sľubovaných 70%.

Na takéto úpravy slúžia rôzne kompilátory javascriptu, ktoré to spravia automaticky.

Týmto úkonom však nespôsobíme len menšiu veľkosť súbora. Ale ešte jednu , rovnako efektívnu vec. Prehliadač sprasuje (prečíta) náš kód o tých 70% rýchlejšie. Aj ked sa to nezdá, jadro prehliadača to musí všetko čítať. Čím menej toho musí prečítať, tým rýchlejšie sa dostane k zobrazeniu stránky.

3, rýchlosť javascriptu

Vopred spomínané veci ste už možno vedeli. Ja som ich tiež vedel, už dávno pred konferenciou, avšak neuvedomoval som si ich závažnoť a tak som ich nikde nepoužíval.
Avšak od toho hodného uja, som sa dozvedel vec, ktorú som si neuvedomoval. A to to, že čím viac si uľahčujeme písanie kódu v js, tým viac zaťažujem jadro prehliadača pri jeho čítaní. Radšej to ukážem na praktickom kóde:

Vravíte si, že čo je na tom kóde zvláštne ? Na vonok nič. Fungovať, funguje. Avšak jeho rýchlosť je značne obmedzená tým, že proces čo ten kód vykonáva musí pri každej premennej zistiť jej pôvod. Takže predtým ako cislovac zväčší hodnotu o jedna, musí proces vystúpiť z smyčky, prehliadať funkciu, potom prehliadať dokument. Až tam nájde pôvod premennej cislovac, načo jej pridá hodnotu 1 a vráti sa do smyčky. Tento proces sa opakuje 10 krát. To isté aj pri inpute. Správnejšie by to malo byť takto:

V tomto prípade sa už proces nemusí vrátiť až na začiatok dokumentu, aby zistil pôvod premennej.



Ten hodný ujo bol z Microsoftu. Mal som dojem že nám to vravel z jedného prostého dôvodu. Aby ich IE9 nebol najpomalší, ale naopak, najrýchlejší. Má to však niečo do seba. Keď my zrýchlime načítanie naších stránok o 70-80%, tak medzi prehliadačmi už nebude rozdiel v tom, kto čo ako rýchlo zobrazí. Lebo všetko sa načíta v momente...

Tým som aj chcel naznačiť to, že ten hodný ujo vravel nie našou rečou, a tak som nepostrehol všetko. takže ak chce niekdo tento príspevok doplniť o ďalšie rady, budem len rád.