Gzip в сравнении сократите

на днях у меня была довольно оживленная дискуссия о минимизации Javascript и CSS по сравнению с тем, кто предпочитает использовать Gzip.

Я назову этого человека X.

X сказал, что Gzip allready минимизирует код, так как он сжимает ваши файлы.

Я не согласен. Zip-это без потерь метод сокращения размера файла. Без потерь означает, что оригинал должен быть восстановлен идеально, то есть информация должна храниться, чтобы иметь возможность восстанавливать пробелы, ненужные символы, комментируемый код и все остальное. Это занимает больше места, так как больше должно быть сжато.

у меня нет метода тестирования, но я считаю, что Gzip этого кода:

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

по-прежнему будет больше, чем Gzip этого кода:

.a1{body:background-color:#FFF;padding:40px}
и, пожалуйста, не говорите: "это правильно, потому что это то, что я всегда использовал".

Я прошу научного доказательства здесь.

13 ответов


очень просто проверить. Я взял ваш js, поместил их в разные файлы и запустил gzip -9 на них. Вот результат. Это было сделано на машине WinXP под управлением Cygwin и 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

вот еще один тест с использованием реального примера JS. Исходный файл " common.js " исходный размер файла составляет 73134 байта. Minified, он пришел к 26232 байтам.

исходный файл:

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

Minified файл:

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

исходный файл gzipped с опцией -9 (та же версия, что и выше):

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

Minified файл gzipped с опцией -9 (та же версия, что и выше):

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

как вы можете видеть, существует определенная разница между различными методами. Лучший вариант-как минимизировать, так и gzip их.


вот результаты теста, который я сделал некоторое время назад, используя файл CSS "реальной жизни" с моего сайта. оптимизатор CSS используется для минимизации. Стандартное архивное приложение Linux, которое поставляется с Ubuntu, использовалось для Gzipping.

Оригинал: 28,781 байт
Minified:22,242 байт
В сжатом виде: 6,969 байт
Min+Gzip:5,990 байт

мое личное мнение-пойти на Gzipping во-первых, поскольку это, очевидно, имеет самое большое значение. Что касается minification, это зависит от того, как вы работаете. Вам нужно будет сохранить исходный файл CSS, чтобы внести изменения дальше по строке. Если это не беспокоит вас, чтобы минимизировать его после каждого изменения, тогда идите на это.

(Примечание: есть и другие решения, такие как запуск его через minifier "on-demand" при обслуживании файла и кэширование его в файловой системе.)


следите при тестировании этого: эти два фрагмента CSS тривиально малы, поэтому они не выигрывают от сжатия GZIP - добавление небольшого заголовка gzip в одиночку потеряет достигнутые успехи. На самом деле у вас не было бы такого маленького CSS-файла и вы беспокоились бы о его сжатии.

minify + gzip сжимает больше, чем просто gzip

ответ на исходный вопрос: да, minify + gzip получит значительно больше сжатия, чем просто с помощью gzip. Это верно для любого нетривиального примера (т. е. любого полезного кода JS или CSS, который составляет более нескольких сотен байтов).

для примеров этого в действительности,захватить исходный код Jquery который доступен minified и несжатый, сжать их обоих с помощью gzip и посмотреть.

стоит отметить, что Javascript намного больше выигрывает от минимизации, чем хорошо оптимизированный CSS, но все же есть преимущество.

аргументация:

с помощью gzip сжатие без потерь. Это означает, что он должен хранить весь текст, включая точные пробелы, комментарии, длинные имена переменных и так далее, чтобы они могли быть прекрасно воспроизведены позже. С другой стороны, это минимизация потерь. Если вы минимизируете свой код, вы удаляете большую часть этой информации из своего кода, оставляя меньше, что GZIP необходимо сохранить.

  • Minification отбрасывает ненужные пробелы, оставляя пробелы только там, где это необходимо для синтаксического причины.
  • Minification удаляет комментарии.
  • минификация кода может заменить имена идентификаторов более короткими именами, где не было бы побочных эффектов.
  • минимизация кода может сделать тривиальные "оптимизации компилятора" для кода, которые возможны только путем фактического разбора кода
  • CSS minification может устранить избыточные правила или объединить правила, которые имеют один и тот же селектор.

Вы правы.

это не то же самое, чтобы минимизировать, чем gzipping (они были бы названы одинаковыми, если бы это было так). Например, это не то же самое, чтобы gzip это:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

чем minify в конечном итоге с чем-то вроде:

var a = null;

конечно, я бы сказал, что лучший подход в большинстве случаев это сначала минимизировать Gzip, чем просто минимизировать или gzipping, хотя в зависимости от кода иногда просто минимизировать или gzipping даст вам лучшие результаты, чем делать оба.


существует порог, при котором gzip-кодирование является выгодным. Общее правило: чем больше файл, тем лучше сжатие и gzip выиграет руки вниз. Конечно, вы можете сначала минимизировать, а затем gzip после.

но если мы говорим о gzip против minify на небольшом фрагменте текста длиной не более 100 байтов," объективное " сравнение ненадежно, даже бессмысленно-если мы не выйдем с базовым текстом для установления стандартных средств бенчмаркинга, таких как Lorem Ipsum-тип, но написанный на Javascript или CSS.

поэтому позвольте мне предложить сравнить последние версии jQuery и MooTools (несжатые версии) с помощью my Обезжиренный Minify (PHP) код (просто удаление пробелов и комментариев, без сокращения переменных, без baseX-кодирования)

вот результаты минимизировать и с помощью gzip (на консервативном уровне-5 сжатия) и сократите+с помощью 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%)

прежде чем кто-нибудь прыгнет пистолет, это не битва библиотек JS.

Как вы можете видеть, minifying+gzipping дает вам лучшее сжатие на больших файлах. Минимизация кода имеет свои преимущества, но основным фактором является количество пробелов и комментариев в исходном коде. В этом случае jQuery имеет больше, поэтому он дает лучшую минимизацию (намного больше пробелов в встроенной документации). Сила сжатия Gzip заключается в том, сколько повторений есть в содержимом. Так что речь идет не о minify против gzip. Они все делают по-другому. И вы получите лучшее из обоих миров, используя оба.


Почему бы не использовать оба?


Это легко проверить : просто поместите текст вашего css в текстовые файлы и сжать файлы с помощью архиватора, как gzip на linux .

Я только что сделал это, и случается, что для первого css размер составляет 184 байта а для второго-162 байта.

Итак, вы правы, пробел имеет значение даже для gzipped файлов, но, как видно из этого маленького теста, для действительно маленьких файлов размер сжатого файла может быть больше, чем размер оригинала файл.

Это просто из-за очень небольшого размера вашего примера, для больших файлов gzipping даст вам меньшие файлы.


Я не видел, чтобы кто-нибудь упоминал о калечении, поэтому я публикую свои результаты на этом.

вот некоторые цифры, которые я придумал с помощью UflifyJS для минимизации и Gzip. У меня было около 20 файлов, которые я объединил вместе примерно на 2.5 MB с комментариями и всем.

Конкат файлы 2,5 МБ

uglify({
    mangle: false
})

Minified без калечить: 929kb

uglify({
    mangle: true
})

Minified и mangled: 617kb

теперь, если я возьму эти файлы и gzip их, я получу 239kb и 190kb соответственно.


есть очень простой способ проверки: создать файл, состоящий только из пробелов, и файл действительно пустой. Затем Gzip и сравните их размеры. Файл с пробелами, конечно, будет больше.


конечно, "человеческое" сжатие с потерями, которое сохраняет макет или некоторые другие важные вещи и удаляет любой ненужный мусор (пробелы, комментарии, избыточные вещи и т. д.) будет лучше, чем сжатие gzip без потерь.

например, такие вещи, как метки или имена функций, скорее всего, будут иметь определенную длину для описания значения. Замена этого на имена длиной в один символ сэкономит много места и невозможна при сжатии без потерь.

кстати, для CSS есть такие инструменты, как CSS компрессор это сделает работу с потерями для вас.

однако вы получите наилучшие результаты при объединении "оптимизации с потерями" и сжатия без потерь.


конечно, вы можете проверить - напишите в файл и заархивировать с zlib. Вы также можете попробовать с помощью утилиты" gzip".

вернемся к вашему вопросу - нет никакой определенной связи между длиной источника и сжатым результатом. ключевым моментом является "энтропия" (насколько разные элементы в источнике).

Итак, это зависит от того, каков ваш источник. например, серии непрерывных космосов (ex, > 1000) могут быть обжаты как такой же размер как несколько (ex,


это результаты при gziping двух файлов

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

вы правы, minify + gzip приводит к меньшему количеству байтов. Однако научных доказательств нет.

Почему у вас нет метода тестирования?

сократите свой код в один файл, и оставить его "unminified" на другой. Загрузите на веб-сервер, способный gziping вывод (например, mod_deflate для Apache), установите расширение Firebug для firefox, очистите кэш и получите доступ к обоим файлам. Вкладка "NET" Firebug будет содержать точное количество передаваемых данных, сравните их и вы есть "эмпирические" доказательства.