„Stlačte“ si kód
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

„Stlačte“ si kód„Stlačte“ si kód

 

„Stlačte“ si kód

Google       Google       1. 6. 2008       25 571×

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.

Reklama
Reklama

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.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Jakub KulhanAutor momentálně studuje na osmiletém gymnáziu v Kralupech nad Vltavou. Programování se věnuje od 11 let, kdy ho poprvé uchvátila možnost "mít vlastní stránky". Nakrátko poté objevil PHP a už se to s ním "vezlo". Webové aplikace zůstaly jeho hlavní doménou, ale ve svém volném čase probádává nejrůznější zákoutí světa programování, programovacích jazyků a všeho kolem nich.
Web    

Nové články

Obrázek ke článku Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

Obrázek ke článku Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý