Néhány trükk a jobb teljesítményért

Szövegek összefűzéséhez használjunk array.join-t a konkatenáció (+) operátor helyett.

Ezt a trükköt akkor érdemes használni, ha sok karakterláncot kell összefűzni. A teljesítményjavulás jelentős lehet.

var sb = new Array();
sb.push("string1");
sb.push("string2");
sb.push("string3");
sb.push("stringN");
sb.join("");

Kerüljük az eval használatát.

Az eval() függvény meglehetősen lassú. Veszélyes is lehet, ha a kódot, amit az evalnak adunk át a felhasználótól származik.

Egymás után sokszor lekérni egy objektum tulajdonságát lassú.

Tároljuk a kiolvasott objektum tulajdonságot valamilyen átmeneti változóban, így csak egyszer kell kiolvasni az objektum tulajdonságát.

for (var i=0; i < a.length; i++){
    // a[i]
}

A fenti iteráció átírva:

for (var i=0, to=a.length; i < to; i++){
    // a[i]
}

Csökkentsük CSS- és JavaScript-fájlok méretét tömörítéssel

A modern webalkalmazásokban a CSS- és JavaScript-fájlok jelentősen nagyobbak, mint maga a HTML tartalom, amit ki kell szolgálni. Ezek a fájlok nagy hatásfokkal tömöríthetők.
A legegyszerűbben úgy csökkenthetjük a méretüket, ha törlünk belőlük minden felesleges szóközt, új sor karaktert, megjegyzéseket. Sok szabadon hozzáférhető eszköz létezik, amelyek egy pillanat alatt elvégzik a feladatot helyettünk. Természetesen az eredeti tömörítetlen fájlokat is meg kell tartanunk, hiszen a mi számunkra csak a szépen formázott és megjegyzéseket is tartalmazó CSS- ill. JavaScript-fájlok értelmezhetők. A módszer némi karbantarthatósági nehézségekkel jár, mert valahányszor módosítunk egy fájlt, nekünk kell újból elvégezni rajta a tömörítést.
Léteznek kiszolgáló oldali megoldások is, amelyek röptében képesek a JavaScript és CSS-fájlok tömörítésére. Ezek általában jobb tömörítési hatásfokkal működnek, mivel a fájlokat gzip tömörítik. Ha tárhelyünkön módunkban áll valamilyen kiszolgáló oldali parancsnyelvet futtatni, előnyösebb a feladatot rábízni egy ilyen kiszolgáló oldali megoldásra (Packer, ShrinkSafe, JS Minifier).

Csökkentsük a HTTP-kérések számát a gyors oldalletöltés érdekében

A HTTP 1.1-es szabvány részét képezi az a korlátozás, hogy egy kliens egyszerre nem létesíthet két kapcsolatnál többet ugyanazzal a tartománynévvel. Bár léteznek módszerek, amelyek segítségével a korlátot némiképpen túlléphetjük (például használhatunk altartományokat bizonyos kérések kezelésére), a legtöbb böngésző valóban korlátozza az egyszerre megnyitott kapcsolatok számát. A HTTP-kérések számának csökkentése érdekében a CSS- és JavaScript-fájlokat érdemes összevonni egy fájlba.

A ritkán változó fájlok legyenek gyorsítótárazhatók

A webböngészők hajlamosak bizonyos erőforrások gyorsítótárazására, hogy javítsák a webhelyek letöltésének sebességét. A gyorsítótárazás alkalmazásával érdemes a kiszolgálóról a böngészőhöz érkező adatokat a fejlécben gyorsítótárazási információkkal kiegészíteni. Ezt a feladatot a Cache-Control és az Expire fejlécek alkalmazásával oldhatjuk meg:

Az Expires fejléc: azt az időpontot tartalmazza, ameddig az adott tartalom érvényes. Ezt követően a böngészőnek ellenőriznie kell a szerveren keresztül, hogy az érvényesség még mindig fenn áll. A fejléc tartalma egy GMT dátum.

A „must-revalidate” arra utasítja a böngészőt, hogy mindig érvényesítse az oldalhoz érkező kérelmeket.

Az adatok gyorsítótárazásának további hasznos előnye a sávszélesség megtakarítása ismétlődő kérések esetén. Minél közelebb található a kívánt adat a felhasználó számítógépéhez, annál kevesebb adatnak kell összességében átutaznia a hálózaton, illetve mindezen adatok kiszolgálása kevesebb terhet jelent a kiszolgálónak.

Dinamikus szkriptbetöltés

A módszer lényege, hogy az oldal megnyitásakor nem töltünk be minden JavaScript-fájlt, csak azokat töltjük be, amelyekre szükség lesz közvetlenül az oldal megnyitása után. Ezt „igény szerinti lehívás”-nak is nevezik, mivel az oldal nem tölt be előre minden JavasScript-fájlt, a többit csak akkor tölti be, ha szükség van rá (például a felhasználó interakciója a web oldallal válthat ki igényt további JavaScript-fájl letöltésére).

A dinamikus szkriptbetöltés egyszerűen megvalósítható. Létre kell hozni egy új <script /> elemet, majd az elem src attribútumához JavaScript fájlra mutató URL címet kell rendelni, hogy betöltődjön a fájlban lévő JavaSript kód. A letöltés és a JavaScript-fájl kiértékelése addig nem kezdődik meg, amíg az új <script /> elemet hozzá nem adjuk az oldalhoz. A letöltés befejezését követően a böngésző értelmezi a JavaScript-kódot. A <script /> elem nem rendelkezik onload eseménykezelővel, tehát nem számíthatunk arra, hogy a böngésző tudatja velünk, mikor fejezi be a szkript végrehajtását. Ezért egy visszahívott függvényre van szükségünk, amelyet a forrásfájl legvégén hív meg a kód.

Kerüljük a privát láthatóságú változók használatát

JavaScriptben lehetőség van privát példányváltozók létrehozására lezárás (closure) alkalmazásával. Sajnos mindennek megvan az ára, így a privát változók használata több memóriába és gyengébb teljesítménybe kerül (peldakodok/privatTagvaltozo/teszt.html).

Az innerHTML a leggyorsabb

Az innerHTML jelentősen gyorsabb, mint a JavaScript DOM API-ja (innerHtml.html). Az innerHTML tulajdonságot a Microsoft vezette be az Internet Explorer egy régebbi verziójában. A megoldást, mint egy elég jól használható lehetőséget, később átvette a többi böngésző is, így ma már minden elterjedt böngészőben használható (IE, Firefox, Opera, Safari), gyakorlatilag kvázi szabvánnyá vált.