Před několika měsíci jsem hledal úzká místa v jedné naší aplikaci, postavené na principech RIA. Šlo tedy o heterogenní systém: část aplikace na serveru, část aplikace v JavaScriptu a AJAXová komunikace mezi tím. Nechme protentokrát stranou optimalizaci serverové části v Javě a podívejme se na ten zbytek: JavaScript a AJAX. Ačkoliv pojem RIA je nyní na vrcholu svého hype, tak dozvědět se rozumné informace o optimalizaci není snadné. Snad vám tedy můj článek napoví.

WebKit

Nejjednodušší rada, jak urychlit RIA aplikaci je: použijte rychlejší prohlížeč. Pokud použijete Google Chrome (nebo jiný prohlížeč postavený na jádru WebKit, například Safari), zrychlí se vám klientská část až 3×. Nevěříte? Zkuste. Bohužel ne vždy je možné tuhle radu použít.

Komprese

Nejčastější radou pro optimalizaci všech webových aplikací je komprese JavaScriptu, CSS souborů a použití CSS skřítků. Je to sice dobrá rada, ale při správně nastaveném http serveru a správně nastavené expiraci souborů její vliv není tak zásadní. Ale co je hlavní: takto urychlíme náběh stránky, ale ke zvýšení rychlosti již načtené stránky nedojde.

Optimalizace JavaScriptu

Určitě není od věci optimalizace kódu JavaScriptu. Zde můžeme použít techniky známé z jiných jazyků, ale čtenáře více zaujmou postupy specifické pro JavaScript. Pojďme si projít některé:

1. Používat lokální proměnné místo globálních
2. Minimalizace lookupů („tečkových volání“)
3. Nepoužívat in-line příkazy v AJAXové odpovědi, raději volat funkce z knihovny, kde jsou již „přeložené“
4. Krátké názvy proměnných a funkcí jsou rychlejší
5. Nepoužívat rekurzi, neboť každé volání vytváří nový rozsah platnosti (scope)

Mezi nejúčinnější optimalizace řadím radu minimalizovat počet interakcí s DOMem prohlížeče. Je totiž řádově rychlejší práce s odpojenými DOM objekty (offline) než s objekty, o kterých prohlížeč „ví“ a jsou zobrazené ve stránce (online), viz příklady.

JavaScriptový framework

JavaScriptový framework je (podobně jako oheň a chemie) dobrý sluha, ale zlý pán. Programátor by nikdy neměl zapomenout na to, jakým způsobem framework pracuje a co vlastně dělá. Frameworky byly původně vytvořeny pro zakrytí odlišností prohlížečů, a to „něco stojí“. Ale i nevhodný jQuery selektor může výrazně prodloužit běh kódu.

AJAX

Asi není žádným překvapením, že je potřeba optimalizovat i AJAXová volání. Důležitější než objem přenesených dat je počet AJAXOvých volání – i přes to, že si prohlížeč udržuje určitou dobu socketové spojení, tak spoléhat na to nemůžeme a je vhodné při optimalizaci brát každý dotaz na server jako „drahý“.

Typickými optimalizačními problémy u složitějších aplikací jsou opakovaná nebo zbytečná volání. Někdy, pokud to technologie umožní (což byl i náš případ), je vhodné více dotazů sdružit do jednoho.

Počet DOM elementů

Nejlepší radu jsem si nechal nakonec. Při optimalizaci naší aplikace právě tahle rada pomohla: optimalizujte počet DOM elementů. V nápovědě pro vývojáře od Yahoo se píše o 5000 elementech – a právě tolik elementů jsme měli ve stránce před optimalizací. Díky tomu některé operace v aplikaci trvaly ve stovkách milisekund, v mezních případech až 1 sekundu.

Je těžké v již téměř hotové aplikaci omezovat DOM elementy. Může pomoci nahrazení složitějších komponent jednoduššími nebo zjednodušení grafického designu. Ověřil jsem si, že výrazně pomůže odstranění nepoužívaného HTML fragmentu z DOMu a jeho ukrytí v paměti JavaScriptu. V některých případech je možné HTML fragment prostě smazat a dohrát ho AJAXem až když je potřeba (ano, je to poněkud absurdní rada, ale někdy je AJAXová komunikace rychlejší než práce s velkým DOMem.)

Rady na závěr

Tak jako u jiných aplikací je nejlepší začít optimalizaci u architektury a použitých (aplikačních) algoritmů. Výše uvedené technologické optimalizace mají význam až ve druhém kroku. A pokud se do ní pustíte, tak berte v úvahu:

1. Nelze přesně měřit čas AJAXové komunikace – je limitována serverem, sítí a ještě je obalena netriviálním kódem frameworku
2. Nelze přesně měřit čas běhu malého fragmentu JavaScriptového kódu – naměříte pokaždé něco jiného
3. Někdy je těžké rozlišit, zda je efektivnější optimalizovat server nebo klient, neboť spolu v RIA úzce spolupracují

Nezoufejte, i složitá RIA aplikace může být rychlá tak, aby byla pro uživatele příjemná a přívětivá…