Gibt es wirklich clevere CSS-Kompressoren?

Ich habe einige CSS-Kompressoren getestet und um ehrlich zu sein bin ich enttäuscht. Vielleicht habe ich einfach die falschen ausprobiert?Gibt es wirklich clevere CSS-Kompressoren?

Ausgangspunkt war der folgende, absichtlich schlecht CSS-Code:

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

das ist ziemlich offensichtlich, Unsinn in deklarieren 2 von 3 Eigenschaften in beiden Klassen und die Ergebnisse in 185 Byte-Code. Wenn Sie es besser schreiben manuell würde es aussehen

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

, die etwas kleiner (149 Bytes) oder sogar

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

, die vor 133 Bytes ist und

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

nur 71 Bytes nach der Komprimierung. Dies wäre 100/185 * 71 = 38,3% der ursprünglichen Größe.

Was alle Kompressionen jedoch tat, war:

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

, die 100 Bytes ist.

Natürlich würden Sie in einer idealen Welt einfach besser CSS-Code aus erster Hand schreiben, aber das ist nicht einfach, wenn Sie größere Dateien schreiben und fast unmöglich, wenn Sie irgendwelche Frameworks verwenden.

Also, gibt es irgendwelche besseren Werkzeuge da draußen, die in etwas wie 71 Bytes für den obigen Beispielcode resultieren?

Quelle

2013-02-13 Raphael Jeger

Ein solches Werkzeug würde komplizieren werden schrecklich zu schreiben und seine Fehler können möglicherweise Ihre CSS ruinieren auf schwer zu erratende Weise - ich schätze, jemand hat einen geschrieben. –

Ich stimme zu. Während Ihr Beispiel ziemlich einfach und geradlinig ist, stellen Sie sich eine CSS-Datei mit Hunderten von definierten Klassen vor, wobei jede Eigenschaft von zwei oder mehr Klassen geteilt wird. Ich glaube nicht, dass dies zu einer wesentlich kleineren CSS-Datei führen würde. – Paul

Um die Komplexität zu erhöhen, ist die Reihenfolge der Regeln wichtig für Überschreibungen in CSS. Dinge in einer CSS-Datei zu verschieben, ohne das Ergebnis zu beeinflussen, ist keine leichte Aufgabe. –

Wenn Sie gzip nach CSS-Komprimierung (wie sein von den meisten Performance Führer vorgeschlagen), dann haben Sie eine andere Ergebnisse, weil die Ausgabe von den CSS Kompressoren besser zipable ist.

Die CSS komprimierte Version ist 85 Bytes nach gzip und Ihre ist 89 Bytes nach gzip.

Also, wenn Sie gzip nach der CSS-Komprimierung verwenden, gewinnt der Code aus den Tools. Außerdem ist das Ergebnis mehr wie der ursprüngliche Code, der weniger Platz für Fehler aufgrund von Überoptimierung, die Ihr CSS bricht, lässt.

Ihr CSS-Code gewinnt jedoch in der entpackten Version mit 71 Bytes.

Die von Ihnen durchgeführte Optimierung hat einen sehr lokalisierten Anwendungsfall, in dem die Selektoren in der CSS-Datei nebeneinander stehen.

Einige Beispiel Geigen zeigt das Problem:

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

.b { 
    background-color: red; 
} 

.c { 
    background-color: yellow; 
}

Quelle

2013-02-13 09:12:53

"Mein Code" in diesem speziellen Beispiel gewinnt in jedem Fall in einer entpackten Version gegen jeden Kompressor + gZip, das ist irgendwie "uncool" ... –

Nun, als @DA. in seinem Kommentar angegeben, funktioniert Ihre Optimierung nur für Selektoren, die in der Datei nebeneinander stehen. Andernfalls können Sie die Semantik ändern. Ich füge ein Beispiel hinzu, wo dies meiner Antwort entspricht. Diese Optimierung hat also einen sehr lokalisierten Anwendungsfall. –

yup, das macht Sinn. Es wäre komplex und sogar abhängig davon, wo Klassen verwendet werden, oder? –

Die Komprimierung mag unbedeutend erscheinen, aber was erwarten Sie sonst noch? Jede Art von CSS-Komprimierung, die Sie sich ausdenken können, wird Sie nur so weit bringen, bevor Sie Ihren Code manipulieren.

CSS ist immerhin nicht eine Programmiersprache.

Quelle

2013-02-13 09:03:04

Die Definition von CSS wird sich sicherlich mit der Version 4 ändern. Sie wird mit Formeln, Bedingungen usw. geliefert. – Dipak

CSS ist [bereits Turing-vollständig] (http://stackoverflow.com/questions/2497146/is-css-) turing-complete);) –

@Dipaks Das bedeutet nicht, dass sich die Selektorlogik ändert, oder? Ich meine, Sie können keine Aliase verwenden, wie Sie es bei einem JS-Abschluss tun könnten. Es kann auch keine Selektoren optimieren, da es das DOM kennen müsste. Experimentelle Technologie wie "calc" hat keinen Einfluss darauf, ob Sie CSS effektiver komprimieren können, als dies heute möglich ist. –

Gzip die Dateien

von Gzipping die CSS-Datei auf Bargaineering, fielen seine Größe von 28.2K zu 7.3K, ein 74,1% Ersparnis. Die Antwortzeit für diese Datei stieg von 53 ms auf 39 ms, was einer Ersparnis von 26,4% entspricht.

How to GZip CSS Files

Quelle

2013-02-13 09:05:19 Dipak

Kann ich mein Beispiel nicht mit 71 Bytes von oben gzipen und würde noch kleiner werden? –

@RaphaelJeger Nein, Ihr Beispielcode wird größer. Ihr Beispielcode ist 89 Byte nach gzip. Also gzip erhöht deine Größe um 24%. –

Gibt es wirklich clevere CSS-Kompressoren?

Antwort

Verwandte Themen