„Stlačte“ si kód

Dat přenášených pomocí internetu je hodně. V poslední době se k tomu připojují ještě objemné kaskádové styly CSS a JavaScripty. V tomto článku si představíme tzv. „kompresory" kódu, které nám právě mohou pomoci takové skripty zmenšit.

Hezký uhlazený design a velká interakce s uživatelem se staly v poslední době velkým bonusem pro weby, které (alespoň jednou, lépe však oběma) zmíněnými vlastnostmi oplývají. Pro první z nich je zde jazyk kaskádových stylů (CSS), kterým se může popsat, jak má který prvek na stránce vypadat, kde má být umístěn atp.; interakce s uživatelem je zase zajištěna ve většině moderních prohlížečů skriptováním pomocí JavaScriptu.

Ovšem, jak se aplikace rozrůstají a přibývá dalších designových „vychytávek“, musí tím pádem narůstat i kaskádové styly a skripty, hlavně na objemu, což se může nemile projevit na rychlosti přesunu ze serveru na uživatelův počítač i rychlostí zpracování právě v prohlížeči. Tento neduh se snaží vyřešit nejrůznější programy a skripty sloužící právě k jejich „stlačení“.

Proč?

Jak již bylo řečeno, čím menší velikost skript má, tím rychlejší můžeme očekávat jeho transfer a zpracování, z čehož plyne rychlejší prezentování výsledku uživateli. Sami jistě neradi čekáte ohromně dlouhou dobu jen pro to, aby mohly být ukojeny choutky zvrhlého designéra, který navrhl podobu webu, kterou prostě kodér nedokáže popsat pár řádky CSS, ale musí napsat text, který by klidně mohl vyjít v knize povídek, jako jeden z těch delších. S JavaScriptem to samé. Navíc v poslední době s rozmachem technologií jako AJAX je ho čím dál tím víc.

Jak?

Dobrým zvykem při psaní CSS i JavaScriptu, stejně jako při psaní jakéhokoli kódu, je správné strukturování a důsledné používání komentářů, což je dobrou vizitkou kodéra, resp. „javascriptéra“. Ovšem uživatele tyto redundantní informace, pokud se zrovna nesnaží v kódu najít inspiraci, příliš nezajímají, lépe řečeno by byl nejradši bez nich. Proto jsou tyto „stlačovače“ založeny právě na odstranění těchto přebytečných znaků či řádek z kódu. Jak se říká, jeden příklad je lepší než tisíc slov, proto si zde představme náš velice jednoduchý CSS zápis:

/* - zakladni nastaveni */

    /* pro zacatek vynulujeme vsechny okraje */
    * { 
        margin: 0; 
        padding: 0; 
    } 
    /* a upravime si take pismo */
    body { 
        font-size: small; 
        font-family: Verdana, Arial, Helvetica, sans-serif; 
    }

Jak vidíte, skript se i přes svou jednoduchost může docela rozrůst. Mně, jako vývojáři, se bude takový skript mnohem jednodušeji číst, ale po síti bude muset následně cestovat daleko více dat, než je potřeba, prohlížeč bude muset parsovat také mnohem více dat. Teď si můžete říct, že ono toho zas o tolik více není, ale vezměte si, že toto je pouhých 12 řádek kódu. Na větších webech bývají soubory kaskádových stylů i mnohonásobně delší. A co z takového „stlačovače“ vlastně vyleze? (Byl použit YUI Compressor.)

*{margin:0;padding:0;}body{font-size:small;font-family:Verdana,Arial,Helvetica,sans-serif;}

Dalo by se říci očekávatelný výsledek. Byly odstraněny veškeré komentáře a bílé znaky. Z počtu kolem 260 znaků jsme se dostali blízko 90, což je úspora asi 65 %. A toto je jenom CSS, s JavaScriptem jdou dělat i jiné fígle než jen prosté odstranění komentářů a bílých znaků.

Další techniky při kompresi JavaScriptu

JavaScript je ve směru vyjadřovacím na tom mnohem dál než kaskádové styly. Ty jsou pouze a jen deklarací rozvržení a podoby grafických prvků na stránce, zato JavaScript se dá nazvat programovacím (aby se někteří neurazili, skriptovacím) jazykem, kde již jdou používat proměnné, funkce atd., shrnu-li to, dají se v něm deklarovat vlastní názvy.

Řeknete si, že v CSS je toto možné také. Třídám a identifikátorům můžeme dát názvy, jaké chceme. Ale je zde problém. Tyto názvy jsou použity i v HTML kódu, se kterým jsou tudíž svázány. Pointou je, že některé pokročilejší kompresory JavaScriptu mohou naše vlastní názvy zkrátit, čímž ušetříme další znaky.

V CSS by to šlo také, ale zároveň by se musel upravit i související HTML kód, což jsem ještě nikde neviděl. A má to své opodstatnění. Většina stránek je dnes dynamicky generována a projití vygenerovaného HTML kódu přes ještě další, kompresní, vrstvu je vzhledem k výsledku zbytečně náročné. Pro statické stránky by to již mělo větší význam. Ale musíme brát v úvahu, že celé HTML by mělo být sémantické, tudíž by v něm neměly vězet žádné takovéto neúplné, prakticky kryptografické, názvy.

Čím?

U našeho malého příkladu s kaskádovými styly je napsáno, že byl použit YUI Compressor. Je ovšem jen jedním z mnoha. Tento byl napsán v Javě (neplést s Javascriptem), tudíž potřebuje pro svůj běh běhové prostředí Javy a její virtuální mašinu. Dokáže „smrsknout“ jak JavaScript, tak CSS. Byl napsán hlavně pro účely Yahoo a jeho javascriptového frameworku YUI.

Jeho použití je nadmíru jednoduché. Stačí si ze stránek stáhnout archiv (v době psaní verze 2.3.5), který obsahuje jak zdrojové kódy, tak již sestavenou verzi programu v podadresáři build. Program nemá GUI, používá se z příkazové řádky. Po přejití do adresáře build rozbaleného archivu můžeme pro kompresi CSS zadat:

java -jar yuicompressor-2.3.5.jar vstupni_soubor.css > vystupni_soubor.css

Kde vstupni_soubor.css a vystupni_soubor.css jsou názvy vstupního, resp. výstupního souboru. Pro JavaScript je použití obdobné, stačí změnit koncovky souborů (na .js). Pokud by vstupní soubor se styly či JavaScriptem měl jinou koncovku, lze specifikovat typ souboru pomocí přepínače --type. Více se dozvíte pod přepínačem --help.

Dalšími stojícími za jmenování mohou být např. Dojo Compressor (podporuje Javascript), Packer (taktéž Javascript), Arantius (CSS), CSS Optimizer (ještě jeden pro CSS, jak lze vytušit již z názvu)… Seznam by mohl pokračovat dál a dál. Dá se říci, že s podobnými kompresory se roztrhl pytel. Než je tu všechny vypisovat (což by nejspíš ani nešlo), raději vás odkazuji na Google, který jako vždy poví víc.