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


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

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

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

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

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

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

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

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

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

13 126

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. Исходный файл является " общим.js " исходный размер файла 73134 байт. Уменьшенный, он пришел к 26232 байтам.

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

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

уменьшенная файл:

-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

мини-файл 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 байт
Уменьшенный: 22,242 байт
В сжатом виде: 6,969 байт
Мин+Gzip:5,990 байт

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

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

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

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

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

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

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

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

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

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

Вы правы.

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

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

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

var a = null;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

uglify({
    mangle: false
})

уменьшенный без искажения: 929kb

uglify({
    mangle: true
})

уменьшенный и искореженный: 617kb

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

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

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

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

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

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

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

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

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

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

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

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

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

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