Gzip versus Minimieren

Ich hatte neulich eine ziemlich lebhafte Diskussion über die Minimierung von Javascript und CSS gegenüber jemandem, der Gzip bevorzugt.

Ich werde diese Person X nennen.

X sagte, dass Gzip bereits den Code minimiert, da er Ihre Dateien zippt.

Ich bin nicht einverstanden. Zip ist eine verlustfreie Methode zum Verkleinern der Dateigröße. Lossless bedeutet, dass das Original perfekt wiederhergestellt werden muss. Das bedeutet, dass Informationen gespeichert werden müssen, um die Leerzeichen, die nicht benötigten Zeichen, den kommentierten Code und alles andere wiederherstellen zu können. Das nimmt mehr Platz in Anspruch, da mehr komprimiert werden muss.

Ich habe keine Testmethode, aber ich glaube, dass das Gzip dieses Codes:

.a1 { background-color:#FFFFFF; padding: 40px 40px 40px 40px; } 

Wird immer noch größer sein als das Gzip dieses Codes:

 .a1{body:background-color:#FFF;padding:40px} 

Gibt es jemanden, der das richtig oder falsch beweisen kann?
Und bitte sag nicht “Es ist richtig, denn das habe ich immer benutzt”.

Ich bitte hier um einen wissenschaftlichen Beweis.

   

    Sehr einfach zu testen. Ich nahm Ihre js, legte sie in verschiedene Dateien und lief Gzip-9 auf ihnen. Hier ist das Ergebnis. Dies wurde auf einem WinXP-Rechner mit Cygwin und gzip 1.3.12 gemacht.

     -rwx------ 1 xxxxxxxx mkgroup-ld 88 Apr 30 09:17 expanded.js.gz -rwx------ 1 xxxxxxxx mkgroup-ld 81 Apr 30 09:18 minified.js.gz 

    Hier ist ein weiterer Test mit einem realen JS-Beispiel. Die Quelldatei ist “common.js” Die ursprüngliche Dateigröße beträgt 73134 Byte. Minifiziert, es kam zu 26232 Bytes.

    Originaldatei:

     -rwxrwxrwx 1 xxxxxxxx mkgroup-ld 73134 Apr 13 11:41 common.js 

    Heruntergestufte Datei:

     -rwxr-xr-x 1 xxxxxxxx mkgroup-ld 26232 Apr 30 10:39 common-min.js 

    Originaldatei mit der Option -9 gezippt (gleiche Version wie oben):

     -rwxrwxrwx 1 xxxxxxxx mkgroup-ld 12402 Apr 13 11:41 common.js.gz 

    Minimierte Datei mit der Option -9 gezippt (dieselbe Version wie oben):

     -rwxr-xr-x 1 xxxxxxxx mkgroup-ld 5608 Apr 30 10:39 common-min.js.gz 

    Wie Sie sehen können, gibt es einen deutlichen Unterschied zwischen den verschiedenen Methoden. Die beste Wette ist, sowohl zu minimieren als auch gzip sie.

    Hier sind die Ergebnisse eines Tests, den ich vor einiger Zeit gemacht habe, mit einer “echten” CSS-Datei von meiner Website. Der CSS-Optimierer wird zur Minimierung verwendet. Die Standard-Linux-Archiv-App, die mit Ubuntu geliefert wird, wurde für Gzipping verwendet.

    Original: 28.781 Bytes
    Minifiziert: 22.242 Bytes
    Gzipped: 6.969 Bytes
    Min + Gzip: 5.990 Bytes

    Meine persönliche Meinung ist, zuerst Gzipping zu machen, da dies offensichtlich den größten Unterschied macht. Was die Minimierung betrifft, hängt es davon ab, wie Sie arbeiten. Sie müssen die ursprüngliche CSS-Datei beibehalten, um später Änderungen vornehmen zu können. Wenn es Sie nicht stört, es nach jeder Änderung zu minimieren, dann gehen Sie dafür.

    (Hinweis: Es gibt andere Lösungen, z. B. das Ausführen eines Minifiers “on-demand” beim Bereitstellen der Datei und deren Zwischenspeicherung im Dateisystem.)

    Achten Sie darauf, wenn Sie dies testen: Diese zwei CSS-Ausschnitte sind trivialerweise klein, so dass sie nicht von der GZIP-Komprimierung profitieren – die Hinzufügung von GZIPs kleinem Header allein wird die erzielten Gewinne verlieren. In Wirklichkeit würden Sie keine so kleine CSS-Datei haben und sich darum kümmern, sie zu komprimieren.

    minify + gzip komprimiert mehr als nur gzip

    Die Antwort auf die ursprüngliche Frage ist, ja, minify + gzip wird eine signifikante Menge mehr Kompression als nur gzip gewinnen. Dies gilt für jedes nicht-triviale Beispiel (dh jeden nützlichen JS- oder CSS-Code, der mehr als ein paar hundert Byte umfasst).

    Für Beispiele in der Tat, greifen Sie Jquery-Quellcode, der verfügbar ist minimiert und unkomprimiert, komprimieren Sie beide mit gzip und casting Sie einen Blick.

    Es ist erwähnenswert, dass Javascript viel mehr von der Minimierung profitiert als gut optimiertes CSS, aber es gibt immer noch einen Vorteil.

    Argumentation:

    GZIP-Komprimierung ist verlustfrei. Dies bedeutet, dass der gesamte Text, einschließlich der genauen Leerzeichen, Kommentare, langen Variablennamen usw. gespeichert werden muss, damit sie später perfekt reproduziert werden können. Auf der anderen Seite ist Minification verlustreich. Wenn Sie Ihren Code minimieren, entfernen Sie einen Großteil dieser Informationen aus Ihrem Code, sodass GZIP weniger beibehalten werden muss.

    • Die Verkleinerung verwirft unnötig Leerzeichen, wobei nur aus syntaktischen Gründen Leerzeichen übrig bleiben.
    • Minimierung entfernt Kommentare.
    • Die Code-Verkleinerung kann Bezeichnernamen mit kürzeren Namen ersetzen, bei denen keine Nebenwirkungen auftreten.
    • Code-Minimierung kann triviale “Compiler-Optimierungen” für den Code ermöglichen, die nur möglich sind, indem der Code tatsächlich analysiert wird
    • CSS-Minimierung kann redundante Regeln eliminieren oder Regeln kombinieren, die denselben Selektor haben.

    Du hast recht.

    Es ist nicht das gleiche zu minimieren als gipping (sie würden gleich genannt werden, wenn das der Fall wäre). Zum Beispiel ist es nicht dasselbe, gzip dies:

     var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null; 

    Dann verkleinern, um etwas wie:

     var a = null; 

    Natürlich würde ich den besten Ansatz in den meisten Fällen sagen, FIRST und dann Gzip zu minimieren, als nur zu verkleinern oder zu gippen, obwohl abhängig vom Code manchmal nur das Verkleinern oder Gippen bessere Ergebnisse bringt als beides.

    Es gibt eine Schwelle, bei der gzip-encoding vorteilhaft ist. Die allgemeine Regel ist: Je größer die Datei, desto besser ist die Komprimierung und gzip gewinnt. Natürlich können Sie erst dann gzip und dann gzip verkleinern.

    Aber wenn wir über gzip vs. minify auf einem kleinen Stück Text sprechen, der nicht mehr als 100Bytes lang ist, ist ein “objektiver” Vergleich unzuverlässig, sogar sinnlos – es sei denn, wir kommen mit einem Basistext für ein Standard-Benchmarking-Tool aus. wie ein Lorem Ipsum-Typ, aber in Javascript oder CSS geschrieben.

    Also lassen Sie mich vorschlagen, die neuesten Versionen von jQuery und MooTools (die unkomprimierten Versionen) mit meinem Fat-Free Minify (PHP) -Code zu benchmarken (einfach Whitespaces und Kommentare entfernen, keine Verkürzung von Variablen, keine BaseX-Kodierung)

    Hier sind die Ergebnisse von Minify vs. gzip (bei konservativer Level-5-Komprimierung) vs. minify + gzip:

     MooTools-Core ------------- Baseline 102,991 bytes Minified 79,414 (77.1% of original) Gzipped 27,406 (26.6%) Minified+Gzipped 22,446 (21.8%) jQuery ------ Baseline 170,095 Minified 99,735 (58.6% of original) Gzipped 46,501 (27.3%) Minified+Gzipped 27,938 (16.4%) 

    Bevor jemand die Waffe springt, ist dies kein Kampf der JS-Bibliotheken.

    Wie Sie sehen können, bietet das Minimieren von + gzipping eine bessere Komprimierung für große Dateien . Das Reduzieren von Code hat seine Vorteile, aber der Hauptfaktor ist, wie viel Leerzeichen und Kommentare im ursprünglichen Code vorhanden sind. In diesem Fall hat jQuery mehr, so dass es eine bessere Minimierung gibt (viel mehr Leerzeichen in der Inline-Dokumentation). Die Stärke der Gzip-Komprimierung liegt darin, wie viele Wiederholungen es im Inhalt gibt. Es geht also nicht um Minify vs. Gzip. Sie machen die Dinge anders. Und Sie erhalten das Beste aus beiden Welten, indem Sie beide verwenden.

    Warum nicht beides?

    Es ist einfach zu testen: Einfach den Text Ihres CSS in Textdateien schreiben und die Dateien mit einem Archivierer wie gzip unter Linux komprimieren.

    Ich habe dies gerade getan, und es passiert, dass für die erste CSS die Größe 184 Bytes und für die zweite 162 Bytes ist.

    Also, Sie haben Recht, Leerraum spielt auch für gezippte Dateien eine Rolle, aber wie man an diesem kleinen Test sehen kann, kann die Größe der komprimierten Datei für sehr kleine Dateien größer als die Größe der Originaldatei sein.

    Dies liegt an der sehr geringen Größe Ihres Beispiels. Bei größeren Dateien erhalten Sie mit gzipping kleinere Dateien.

    Ich habe niemanden gesehen, der Mangling erwähnt hat, also poste ich meine Ergebnisse dazu.

    Hier sind einige Zahlen, die ich mit UflifyJS für die Minification und Gzip erstellt habe. Ich hatte ungefähr 20 Dateien, die ich bei ungefähr 2.5MB mit Kommentaren und allem zusammen verkettet hatte.

    Concat-Dateien 2,5 MB

     uglify({ mangle: false }) 

    Minifiziert ohne Mangling: 929kb

     uglify({ mangle: true }) 

    Verkleinert und zerlegt: 617kb

    Wenn ich jetzt diese Dateien nehme und gzip entpacke, bekomme ich 239kb bzw. 190kb.

    Es gibt eine sehr einfache Methode, dies zu testen: Erstellen Sie eine Datei, die nur aus Leerzeichen und einer anderen Datei besteht, die wirklich leer ist. Dann Gzip beide und vergleichen Sie ihre Größen. Die Datei mit dem Leerzeichen wird natürlich größer sein.

    Natürlich ist die “menschliche” verlustbehaftete Komprimierung, die das Layout oder andere wichtige Dinge bewahrt und überflüssigen Müll (Leerzeichen, Kommentare, überflüssige Dinge usw.) entfernt, besser als eine verlustfreie gZip-Komprimierung.

    Zum Beispiel haben Dinge wie Marken oder functionsnamen wahrscheinlich eine gewisse Länge, um die Bedeutung zu beschreiben. Ersetzen Sie dies durch Namen ein Zeichen lang spart viel Platz und ist nicht mit verlustfreier Komprimierung möglich.

    Übrigens gibt es für CSS Tools wie CSS-Compressor , die die verlustreiche Arbeit für Sie erledigen.

    Sie erhalten jedoch die besten Ergebnisse, wenn Sie “verlustbehaftete Optimierung” und verlustfreie Komprimierung kombinieren.

    Natürlich kannst du das testen – schreibe es in eine Datei und gzip es mit zlib . Sie können es auch mit dem Dienstprogramm “gzip” versuchen.

    zurück zu Ihrer Frage – es gibt keine eindeutige Beziehung zwischen der Länge der Quelle und dem komprimierten Ergebnis. Der Schlüsselpunkt ist die “Entropie” (wie unterschiedlich sind die einzelnen Elemente in der Quelle).

    Also, das hängt davon ab, wie deine Quelle ist. Zum Beispiel können viele kontinuierliche Räume (z. B.> 1000) so komprimiert werden, wie wenige (z. B. <10) Räume.

    Dies ist das Ergebnis beim Gziping der beiden Dateien

     bytes File 45 min.txt 73 min.gz 72 normal.txt 81 normal.gz 

    Sie haben Recht, minify + gzip ergibt weniger Bytes. Kein wissenschaftlicher Beweis.

    Wie kommt es, dass Sie keine Testmethode haben?

    Reduzieren Sie Ihren Code in einer Datei und lassen Sie ihn auf einem anderen “unminified”. Laden Sie die Datei auf einen Webserver hoch, der die Ausgabe gzipen kann (z. B. mod_deflate für Apache), installieren Sie die Firebug-Erweiterung für Firefox, löschen Sie den Cache und greifen Sie auf beide Dateien zu. Die Registerkarte “NET” von Firebug enthält die genaue Menge der übertragenen Daten, vergleicht diese und Sie haben “empirische” Beweise.