Optimalizácia Javascriptu

Videl som zaujímavú prednášku o optimalizácii kódu v Javascripte a pripravil z nej krátke poznámky, niečo ako check list Javascript optimalizácie.

Scope Chain

Ide o dátovú štruktúru, v ktorej sú v každom okamihu vykonávania kódu uložené všetky platné obory pôsobnosti premenných (scope) – globálna, lokálna, lokálna vnorenej funkcie, lokálna bloku. Pri prístupe k určitej premennej sa prehľadá najprv tá najnižšia lokálna, až sa pristupuje ku globálnej.

  • Používať lokálne premenné. Globálne sú v scope chain vyššie, preto je prístup k nim pomalší
  • Vyhnúť sa konštrukcii with, a try … catch, pretože vytvárajú ďalšiu položku v scope chain a tým spomaľujú prístup k premenným oboru funkcie

Prístup k dátam

Prístup k prvkom poľa alebo k vlastnostiam objektu je vždy pomalší ako prístup k lokálnym premenným. Čím hlbšie ideme v hierarchii polí a objektov, tým je  spomalenie vyššie.

  • Prvky poľa alebo vlastnosti objektu, ku ktorým sa opakovane pristupuje, uložiť do lokálnej premennej

Cykly

Základom je čo najmenej vecí robiť vtedy, keď sa opakujú (telo cyklu, kontrola koncovej podmienky) a vyhnúť sa použitiu pohodlných, ale pomalých konštrukcií.

  • Nepoužívať for … in, for … each pri prechádzaní poľa. Vždy je rýchlejší klasický for cyklus s celočíselnou riadiacou premennou
  • Funkcia poľa forEach (plánovaná v 5. vydaní ECMA-262, podobné funkcie existujú vo všetkých Javascript frameworkoch) je 8-krát (!) pomalšia ako prechádzanie pomocou klasického for cyklu
  • Vyhnúť sa prístupu k prvkom poľa alebo k vlastnostiam objektu pri vyhodnocovaní podmienky ukončenia cyklu (while (podmienka), for (;podmienka ; ), …). Pri inicializácii uložiť prvok alebo vlastnosť do lokálnej premennej, ktorá sa bude opakovane používať.

DOM

  • Funkcia getElementsByClassName a jej podobné vracajú objekt HTMLCollection. Intuitívne sa zdá, že objekt je statický, ako napríklad pole, ale nie je to tak. Pri každej zmene dokumentu sa prvky v HTMLCollection upravia. Niekedy je výhodnejšie obsah HTMLCollection prekopírovať do poľa a pracovať s ním.
  • Zmeny v dokumente je vhodné robiť buď v premennej a tú do dokumentu neskôr pridať, alebo na objektoch s CSS vlastnosťou display: none. Inak každá zmena môže spustiť reflow, kedy prehliadač prepočítava rozmery a upravuje rozloženie objektov. To samozrejme niečo stojí.

Príspevok sa kvalitou a úplnosťou sa nevyrovná článku hodného publikovania na odbornom portáli (preto ho dávam len na svoj blog, možno niekedy si nájdem čas a bude aj ten článok). Ale napriek tomu sa môže niekomu hodiť. A aj keď nie, ja ho využijem určite.

Len ma zaujíma, koľko zo spomenutých vecí bude o nejaký rok neaktuálnych vďaka optimalizáciam, na ktoré sú zamerané všetky súčasné Javascript stroje.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s