Frage

Ich hatte eine etwas lebhafte Diskussion neulich über minifying Javascript and CSS versus jemanden, der lieber mit Gzip.

Ich nenne diese person X.

X sagte, dass Gzip bereits minimiert den code, da es Reißverschluss Ihre Dateien.

Ich Stimme nicht zu.Zip ist ein verlustfrei Methode zum verkleinern Dateigröße.Verlustfrei bedeutet, dass die ursprüngliche wiederhergestellt werden müssen, perfekt, Bedeutung info gespeichert werden müssen, werden in der Lage, zur Wiederherstellung der Räume, die in un-nötig-Zeichen, kommentierte code und alles andere.Das nimmt mehr Platz ein, da muss mehr komprimiert werden.

Ich habe keine Methode der Prüfung, aber ich glaube, dass die Gzip-dieser code:

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

Wird noch größer sein, als die Gzip-dieser code:

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

Ist es jemand, der dies nachweisen kann richtig oder falsch.
Und bitte nicht kommen zu sagen, "Es ist richtig, weil das ist, was ich schon immer gebraucht".

Ich Frage für den wissenschaftlichen Beweis hier.

War es hilfreich?

Lösung

Sehr einfach zu testen. Ich habe Ihre js, legte sie in verschiedenen Dateien und lief gzip -9 auf sich. Hier ist das Ergebnis. Dies wurde auf einer WinXP Maschine getan läuft Cygwin und gzip 1.3.12.

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

Hier ist ein weiterer Test einer realen JS Beispiel. Die Quelldatei ist „common.js“ Die ursprüngliche Dateigröße 73134 Bytes. Minimierte, kam es zu 26.232 Bytes.

Original-Datei:

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

minimierte Datei:

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

Original-Datei gzip mit -9 Option (gleiche Version wie oben):

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

minimierte Datei gzip mit -9 Option (gleiche Version wie oben):

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

Wie Sie sehen können, gibt es einen deutlichen Unterschied zwischen den verschiedenen Methoden. Der beste Weg ist, um sowohl als auch minify wie sie gzip.

Andere Tipps

Hier sind die Ergebnisse eines Tests ich eine Weile zurück tat, einen „wirklichen Leben“ CSS-Datei von meiner Website. CSS Optimiser für minification verwendet. Die Standard-Linux-Archiv-Anwendung, die mit Ubuntu kommt wurde Gzipping verwendet.

Original: 28781 Bytes
Minimierte: 22242 Bytes
Gzipped: 6969 Bytes
Min + gzip: 5990 Bytes

Meine persönliche Meinung ist zuerst für Gzipping zu gehen, denn das ist offensichtlich den größten Unterschied macht. Was minification, es hängt davon ab, wie Sie arbeiten. Sie müßten die ursprüngliche CSS-Datei halten, um Änderungen weiter auf der ganzen Linie zu machen. Wenn es Sie nicht stört es nach jeder Änderung minify dann gehen sie.

(Anmerkung:. Es gibt auch andere Lösungen, wie sie durch eine minifier „on-demand“ ausgeführt wird, wenn die Datei dient, und dem Caching es im Dateisystem)

Pass auf, wenn diese Prüfung: diese beiden Schnipsel von CSS trivialer klein sind, so dass sie nicht in den Genuss von GZIP-Komprimierung - die Zugabe von kleinen Header GZIP allein wird die Gewinne gemacht verlieren. In Wirklichkeit würden Sie nicht eine CSS-Datei dieses kleine und etwa Komprimieren betroffen sein.

minify + gzip komprimiert mehr als nur gzip

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

Beispiele für diese in der Tat Jquery Quellcode greifen, die zur Verfügung minified und dekomprimiert wird, komprimieren sie beide mit gzip und einen Blick darauf werfen.

Es ist erwähnenswert, dass Javascript viel mehr von minification zugute kommt als CSS gut optimiert, aber es ist immer noch ein Vorteil.

Begründung:

GZIP-Komprimierung ist verlustfrei. Das bedeutet, dass es den gesamten Text zu speichern, einschließlich der genauen Leerzeichen, Kommentare, lange Variablennamen und so weiter, so dass sie perfekt später reproduziert werden. Auf der anderen Seite ist Verkleinerungsverlustbehaftet. Wenn Sie Ihren Code minify, werden Sie viele dieser Informationen aus dem Code zu entfernen, so dass weniger als GZIP erhalten muss.

  • verwirft Minifizierung unnötig Leerzeichen, so dass Räume nur bei Bedarf aus syntaktischen Gründen.
  • Minifizierung entfernt Kommentare.
  • Code-minification kann Bezeichnernamen mit kürzeren Namen ersetzen, wo es würde keine Nebenwirkungen sein.
  • Code-minification kann trivial ‚Compiler-Optimierungen‘ machen, um den Code, der durch nur möglich sind, den Code tatsächlich Parsen
  • CSS minification können redundante Regeln beseitigen oder Regeln kombinieren, die den gleichen Wähler haben.

Sie haben Recht.

Es ist nicht die gleiche minify als Gzipping (sie gleich genannt werden würden, wenn das der Fall ist). Zum Beispiel ist es nicht das gleiche, dies zu gzip:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

als minify, um am Ende mit etwas wie:

var a = null;

Natürlich würde ich sagen, den besten Ansatz in den meisten Fällen gzip minify FIRST dann, als nur minifying oder Gzipping, obwohl je nach Code manchmal nur minifying oder Gzipping gibt Ihnen bessere Ergebnisse als die beide zu tun.

Es gibt eine Schwelle, bei der die gzip-Codierung ist vorteilhaft.Die Allgemeine Regel ist:je größer die Datei, desto besser die Kompression und gzip gewinnen die Hände nach unten.Natürlich können Sie minifizieren zuerst, dann gzip nach.

Aber wenn wir reden über gzip vs.minifizieren auf einem kleinen Stück text nicht mehr als 100bytes lange, einen "objektiven" Vergleich ist unzuverlässig, sogar sinnlos - es sei denn, wir kommen mit einer Grundlinie von text für den Aufbau einer standard-benchmarking, wie ein "Lorem Ipsum" -Typ, aber geschrieben in Javascript oder CSS.

Also, lassen Sie mich vorschlagen, einen benchmark für die neuesten Versionen von jQuery und MooTools (die nicht komprimierten Versionen) mit meinem Fat-Free Verkleinern (PHP -) code (einfach abstreifen Leerzeichen und Kommentare, keine Verkürzung der Variablen, die keine baseX-Codierung)

Hier sind die Ergebnisse verkleinern vs.gzip (at konservative level-5 Komprimierung) vs.minifizieren+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 springt der gun, das ist kein battle von JS-Bibliotheken.

Wie Sie sehen können, minifying+Gzip gibt Ihnen eine bessere Kompression auf große Dateien.Minifying code hat seine Vorteile, aber der größte Faktor ist, wie viel whitespace und Kommentare werden in der original-code.In diesem Fall, jQuery mehr, so gibt es bessere Verkleinerung (viel mehr Leerzeichen in der inline-Dokumentation).Gzip compression Festigkeit ist, wie viele Wiederholungen es gibt in der Inhalte.Es geht also nicht darum verkleinern vs.gzip.Sie machen Dinge anders.Und Sie erhalten das beste aus beiden Welten, indem Sie sowohl die.

Warum nicht beides verwenden?

Es ist zu Test einfach: den Text Ihrer CSS in Textdateien setzen und die Dateien mit einem Archivierungs wie gzip auf Linux komprimieren.

Ich habe dies nur getan, und es kommt vor, dass für die erste CSS, die Größe 184 Bytes und für das zweite 162 Bytes.

Sie sind also recht, weiße Raum Angelegenheiten auch für gzip-Dateien, aber wie man es von diesem kleinen Test sehen kann, für wirklich kleine Dateien, kann die Größe der komprimierten Datei größer sein als die Größe der Originaldatei.

Dies ist nur aufgrund der sehr geringen Größe Ihres Beispiel für größere Dateien, Gzipping erhalten Sie kleinere Dateien erhalten.

Ich habe niemanden gesehen Mangling erwähnen, damit ich auf, dass meine Ergebnisse bin Entsendung.

Hier sind einige Zahlen, die ich kam mit UflifyJS für minification und gzip. Ich hatte etwa 20 Dateien, die ich zusammen mit Kommentaren und alle bei etwa 2,5 MB verkettet.

Concat Files 2,5 MB

uglify({
    mangle: false
})

minimierte ohne Mangeln: 929KB

uglify({
    mangle: true
})

minimiert und verstümmelt: 617kb

Wenn ich nun diese Dateien nehmen und gzip sie ich jeweils 239KB und 190kb erhalten.

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

Natürlich „menschliche“ verlustbehaftete Kompression, die das Layout oder einige andere wichtige Dinge bewahrt und entfernt alle nicht benötigten Junk (Whitespaces, Kommentare, redundante Dinge etc.) wird besser als ein lossless gzip-Kompression.

Zum Beispiel Dinge wie Markierungen oder Funktionsnamen werden höchstwahrscheinlich von einer bestimmten Länge sein, um die Bedeutung zu beschreiben. Ersetzen dieser durch Namen ein Zeichen lang wird viel Platz sparen und ist nicht möglich, mit verlustfreier Komprimierung.

By the way, für CSS gibt es Tools wie CSS Kompressor das wird die verlustbehaftete Arbeit für Sie tun.

Allerdings werden Sie die besten Ergebnisse, wenn „verlustbehaftete Optimierung“ und verlustfreie Komprimierung kombiniert werden.

Natürlich können Sie testen - schreiben Sie Ihre in eine Datei und gzip es mit zlib . Sie können auch mit dem „gzip“ Utility-Programm versuchen.

zurück zu Ihrer Frage - es gibt keine eindeutige Beziehung zwischen der Länge der Quelle und dem Druckergebnis. Der entscheidende Punkt ist die ‚Entropie‘ (wie unterschiedlich ist jeweils Elemente in der Quelle).

so, das hängt davon ab, wie Sie Ihre Quelle ist. zum Beispiel vieler kontinuierlichen Räume (ex,> 1000) als gleiche Größe wie wenige komprimiert werden kann (ex, <10) Räume.

Dies ist das Ergebnis, wenn gziping die beiden Dateien

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Sie sind richtig, minify + gzip Ergebnisse in weniger Bytes. Kein wissenschaftlicher Beweis though.

Wie kommen Sie keine Testmethode haben?

minifizieren Code in einer Datei, und lassen Sie es „unminified“ auf einem anderen. Upload auf einen Webserver der Lage gziping den Ausgang (mod_deflate für Apache, zum Beispiel), installieren Sie Firebug-Erweiterung für Firefox, löschen Sie den Cache und die beiden Dateien zugreifen. Firebug „NET“ Registerkarte wird die genaue Menge an Daten enthalten, übertragen, vergleichen diese und Sie haben „empirisch“ Beweis.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top