Czy są naprawdę sprytne kompresory CSS?

Przetestowałem niektóre sprężarki CSS i szczerze mówiąc, jestem rozczarowany. Może po prostu wypróbowałem niewłaściwe?Czy są naprawdę sprytne kompresory CSS?

Punkt wyjścia był następujący, celowo źle css-code:

.a{ 
    font-size: 10px; 
    padding: 0 6px; 
    text-align: center; 
} 
.b{ 
    font-size: 11px; 
    padding: 0 6px; 
    text-align: center; 
}

który jest dość oczywiste, nonsens w deklarowania 2 z 3 właściwości w obu klasach i wyniki w 185 bajtów kodu. Jeśli piszesz to lepiej ręcznie to będzie wyglądać

.a, .b{ 
    padding: 0 6px; 
    text-align: center; 
} 
.a{ 
    font-size: 10px; 
} 
.b{ 
    font-size: 11px; 
}

który jest nieco mniejszy (149 bajtów) lub nawet

.a, .b{ 
    padding: 0 6px; 
    text-align: center; 
    font-size: 10px; 
} 
.b{ 
    font-size: 11px; 
}

czyli 133 bajtów przed i

.a,.b{padding:0 6px;text-align:center;font-size:10px}.b{font-size:11px}

tylko 71 bajty po kompresji. Byłoby to 100/185 * 71 = 38,3% pierwotnego rozmiaru.

Co wszystkie uciski nie był jednak:

.a{font-size:10px;padding:0 6px;text-align:center}.b{font-size:11px;padding:0 6px;text-align:center}

który wynosi 100 bajtów.

Oczywiście w idealnym świecie wystarczy napisać lepszy kod CSS z pierwszej ręki, ale to nie jest łatwe, jeśli piszesz większe pliki i prawie niemożliwe, jeśli używasz jakichkolwiek frameworków.

Czy są jakieś lepsze narzędzia, które dają np. 71 bajtów dla powyższego przykładowego kodu?

Źródło

2013-02-13 Raphael Jeger

Takie narzędzie byłoby strasznie komplikować napisać i jego błędy potencjalnie mogą zrujnować CSS w trudny do zauważenia sposób - myślę, że ktoś napisał. –

Zgadzam się. Chociaż twój przykład jest dość prosty i prosty, wyobraź sobie plik CSS zawierający setki zdefiniowanych klas, w których każda właściwość jest współdzielona przez dwie lub więcej klas. Nie do końca wierzę, że spowoduje to znacznie mniejszy plik CSS. – Paul

Aby dodać do złożoności, kolejność reguł jest ważna dla przesłonięć w CSS. Przenoszenie elementów w pliku CSS bez wpływu na wynik nie jest łatwym zadaniem. –

Podczas korzystania z kompresją gzip po CSS (jak sugeruje jej przez większość przewodników wydajności) to masz różne wyniki, ponieważ wyjście z sprężarek CSS jest lepszy zipable.

Skompresowana wersja CSS to 85 bajtów po gzip, a twoja 89 bajtów po gzip.

Tak więc przy użyciu gzip po kompresji CSS kod z narzędzi wygrywa. Ponadto wynik jest bardziej podobny do oryginalnego kodu, który pozostawia mniej miejsca na błędy z powodu nadmiernej optymalizacji niszczącej Twój CSS.

Jednak Twój kod CSS wygrywa w rozpakowanej wersji z 71 bajtami.

Dokonana optymalizacja ma bardzo zlokalizowany przypadek użycia, w którym selektory znajdują się obok siebie w pliku CSS.

Niektóre przykład Fiddles pokazujący problem:

.a { 
    height:50px; 
    width:50px; 
    background-color: yellow; 
} 

.b { 
    background-color: red; 
} 

.c { 
    background-color: yellow; 
}

Źródło

2013-02-13 09:12:53

"Mój kod" w tym specjalnym przykładzie wygrywa w każdym przypadku w rozpakowanej wersji z każdą kompresorem + gZip, to jest w jakiś sposób "niefajne" ... –

Cóż, jako @DA. w swoim komentarzu Twoja optymalizacja działa tylko dla selektorów, które znajdują się obok siebie w pliku. W przeciwnym razie możesz zmienić semantykę. Dodam przykład, gdzie tak się dzieje z moją odpowiedzią. Tak więc ta optymalizacja ma bardzo zlokalizowany przypadek użycia. –

tak, to ma sens. Byłoby to skomplikowane, a nawet zależne od tego, gdzie klasy się przyzwyczają, prawda? –

Kompresja może wydawać się nieistotna, ale czego jeszcze można się spodziewać? Każdy rodzaj sprężarki CSS, o której możesz wymarzyć, zabierze Cię dopiero po tym, zanim zaczniesz manipulować twoim kodem.

CSS to przecież , a nie język programowania.

Źródło

2013-02-13 09:03:04

Definicja CSS na pewno zmieni się wraz z wersją 4. Przyjdzie z formułami, warunkami itd. :) – Dipak

CSS to [już Turing-complete] (http://stackoverflow.com/questions/2497146/is-css- turing-complete);) –

@ Dipaks To nie znaczy, że logika selektora się zmieni, prawda? Mam na myśli, że nie możesz używać aliasów, takich jak ty, z zamknięciem JS. Nie może też optymalizować selektorów, ponieważ musiałby znać DOM. Eksperymentalna technologia, taka jak 'calc', nie ma wpływu na to, czy można skompresować CSS efektywniej niż jest to możliwe dzisiaj. –

Gzip pliki

Wg gzipping plik .css na Bargaineering, jego wielkość spadła z 28.2K do 7.3K, a 74,1% oszczędności. Czas odpowiedzi dla tego pliku wyniósł od 53 ms do 39 ms, a więc 26,4% oszczędności.

How to GZip CSS Files

Źródło

2013-02-13 09:05:19 Dipak

Nie mogę Gzip mój przykład z 71 bajtów z góry i byłoby jeszcze mniejsze? –

@RaphaelJeger Nie, Twój przykładowy kod staje się większy. Twój przykładowy kod to 89 bajtów po gzip. Więc gzip zwiększa swój rozmiar o 24%. –

Czy są naprawdę sprytne kompresory CSS?

Odpowiedz

Powiązane problemy