HTML Minifier: co można zrobić z "przerośniętym" kodem HTML?

Osoby zainteresowane zminimalizowaniem HTML-owych plików w swojej witrynie mogą zerknąć na nowe narzędzie hakera używającego nicka Kangax. HTML Minifier to webowa aplikacja, która powstała na bazie parsera HTML stworzonoego przez Johna Resiga i pozwala na znaczne skompresowanie kodu poprzez wycięcie z niego zbędnych elementów.

HTML Minifier ma być docelowo praktyczną realizacją manifestu, który Kangax opublikował na swoim blogu pod koniec zeszłego roku. Uznał wówczas, że stan narzędzi do minimalizacji kodu HTML jest raczej marny – sporo można znaleźć oprogramowania do kompresji kodu JavaScriptu i CSS, ale dla HTML nie ma niczego dobrego, a to co jest dostępne, nie działa zbyt sensownie, zamieniając np. znaczniki <strong> w <b> – mimo że nie są one wymienne.

Przyczyną niewielkiego zaangażowania deweloperów w kwestię minimalizacji HTML jest zwykle niewielka opłacalność takich działań – przynajmniej w porównaniu do tego, co osiąga się dla JS i CSS. „Minimalizacja taka musi być realizowana na żądanie i niesie ze sobą pewien narzut” – pisze Kangax. Jedynie wówczas, gdy narzut jest mniejszy niż różnica w rozmiarach dokumentu oryginalnego i zminimalizowanego, praktyka ta ma sens.

Mimo to haker zdecydował się rozpocząć testy napisanego w JavaScripcie systemu minimalizacji kodu HTML, który miałby wbudowany mechanizm typu lint – znane z uniksów narzędzie do analizowania kodu pod kątem podejrzanych instrukcji czy najczęściej popełnianych prostych błędów wynikających z przeoczeń.

Narzędzie zbudowane jest na bazie parsera HTML-u napisanego przez Johna Resiga. Parser ten radzi sobie z całkiem złożonymi dokumentami, ale niektóre kwestie mu umykają – np. prologi z deklaracjami typu dokumentu, czy atrybuty, których wartości zawierają w swoich nazwach znak dywizu. Pojawiają się też problemy z obsługą komentarzy i sekcji CDATA. Wszystkie te usterki zostały usunięte w HTML Minifierze.

Nad parserem znajduje się niewielki (mający raptem 250 linii) skrypt, który na wejściu przyjmuje kod HTML i obiekt konfiguracyjny. Kodem tym „karmi” parser i na wyjściu generuje zminimalizowany kod zgodnie z zadanymi opcjami. Eliminowane są m.in. komentarze, zbędne spacje czy atrybuty boole'owskie. Jednak to nie one przyczyniają się w największym stopniu do nadmiernych rozmiarów dokumentów HTML.

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

10 skomentuj »

Polecamy

Reklama

Komentarze

#1 Peter Riley 2010-03-10 18:23:49 0
Ciekawe jaka będzie różnica w objętości plików przy uwzględnieniu kompresji gzip. Szkoda zachodu.
IP: 83.6.8.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/533.2 (KHTML, like Gecko) Chrome/5.0.342.2 Safari/533.2
#2 eimi^® 2010-03-10 19:10:35 0
@Peter: w wypadku specyfikacji ECMAscriptu, dla gzipowanych wersji oszczędność około 16 KB.

A z samym gzipem wygląda na to, że też nie jest za różowo:

http://www.stevesouders.com/blog/2009/11/11/whos-not-getting-gzip/
IP: 95.160.206.[...] Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.9.2) Gecko/20100213 Firefox/3.6
#3 BOM 2010-03-10 23:53:48 0
Dla mnie to nie ma sensu. Dlatego, że przy małych serwisach, nie ma znaczenia, czy dokument ma 100kb czy 70kb. Z kolei przy dużych rozbudowanych serwisach, jeden obrazek JPG lub jedna animacja Flash, lub jeden dodatkowy skrypt JS, będzie często ważył więcej, niż cała ta optymalizacja HTML.
IP: 82.160.211.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6
#4 Iwoldan^® 2010-03-11 00:05:57 0
Zysk na kompresji kodu HTML wydaje się mało opłacalny. Niewspółmiernie bardziej stronę obciążają obrazki. A jednak optymalizacja kodu ma sens, bo zachęca do tworzenia strony w oparciu o nowoczesne standardy. Tak, strona wykorzystująca oszczędniejszy kod najczęściej jest też bardziej zgodna ze standardami. To nie jest przypadek. Standardy tworzono aby wyeliminować najważniejsze bolączki Internetu. Na przykład formatowanie za pomocą zewnętrznych arkuszy stylów pozwoliło na zrezygnowanie z nadmiernego stosowania tabel. Poprawia to czytelnośc kodu i dostępność strony dla osób słabo widzących korzystających z czytników. Sprzyja również lepszemu pozycjonowaniu strony.
IP: 94.254.128.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
#5 jan 2010-05-13 22:53:47 0
Ciekawy temat
IP: 83.24.83.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.19) Gecko/2010031422 Firefox/3.0.19
#6 nerkyl 2010-06-11 20:16:06 0

Normal

0

21

MicrosoftInternetExplorer4

/* Style Definitions */

table.MsoNormalTable

{mso-style-name:Standardowy;

mso-tstyle-rowband-size:0;

mso-tstyle-colband-size:0;

mso-style-noshow:yes;

mso-style-parent:"";

mso-padding-alt:0cm 5.4pt 0cm 5.4pt;

mso-para-margin:0cm;

mso-para-margin-bottom:.0001pt;

mso-pagination:widow-orphan;

font-size:10.0pt;

font-family:"Times New Roman";}

Ciekawy temat
IP: 83.31.168.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.19) Gecko/2010031422 AskTbUT2V5/3.8.0.12304 Firefox/3.0.19
#7 tert 2010-07-09 21:21:01 0
Ciekawy temat
IP: 83.31.166.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.19) Gecko/2010031422 AskTbUT2V5/3.8.0.12304 Firefox/3.0.19
#8 marek zegarek 2010-10-03 20:08:23 0

Normal

0

21

MicrosoftInternetExplorer4

Ciekawy temat
IP: 83.6.254.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.19) Gecko/2010031422 AskTbUT2V5/3.8.0.12304 Firefox/3.0.19
#9 merkl 2011-02-20 20:31:05 0
Wszelkie informacje jak zdać Egzamin na prawo jazdy
IP: 83.31.166.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.13) Gecko/20101203 AskTbUT2V5/3.9.1.14019 Firefox/3.6.13
#10 meruska 2011-07-20 20:59:02 0
Kwiaciarnia
IP: 83.24.83.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.18) Gecko/20110614 Firefox/3.6.18

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.