Сравнение эффективности минимизаторов CSS- и JavaScript-кода (Сентябрь 2013)

За прошедшие, с момента публикации предыдущего обзора, 3 месяца уже успели обновиться почти все рассмотренные алгоритмы минимизации (кроме, Packer`а). Кроме того в Bundle Transformer появился новый модуль-минимизатор на базе Clean-css — BundleTransformer.CleanCss.

При подготовке данного сравнительного обзора были учтены следующие пожелания читателей:

1. В предыдущем обзоре в качестве исходных файлов использовались: bootstrap.css и bootstrap.js из Twitter Bootstrap 2.3.2, из-за чего достоверность результатов была низкой. В новом же обзоре размер выборки был увеличен: для сравнения были отобраны 7 JS-файлов и 5 CSS-файлов из 10 популярных Open Source-проектов.
2. Теперь в сравнении минимизаторов CSS-кода также участвуют встроенные средства минимизации препроцессоров LESS и Sass.
3. Как известно, Bundle Transformer минимизирует каждый файл по отдельности и затем производит объединение минимизированного кода в один файл. Данный механизм сделан для того, чтобы предотвратить повторную минимизацию предварительно минимизированных файлов. Другие аналогичные библиотеки сначала объединяют код файлов, а затем минимизируют этот объединенный файл. Поэтому для полноты картины мы произведем 2 сравнения: сначала сравним эффективность минимизаторов на файлах, полученных путем объединения минимизированного кода, а затем на файлах, полученных путем минимизации объединенного кода файлов.

Как и в предыдущем обзоре, для минимизации файлов мы будем использовать модули Bundle Transformer, а для измерения размеров полученных файлов – расширение YSlow.

Сравнение минимизаторов CSS-кода

Сравним следующие алгоритмы минимизации CSS-кода:

Таблица 1. Информация об адаптерах и алгоритмах минимизации CSS-кода

Для того, чтобы использовать адаптеры-трансляторы LessTranslator и SassAndScssTranslator в качестве минимизаторов, нужно изменить расширения исходных CSS-файлов на .less (и .scss соответсвенно) и присвоить конфигурационному свойству useNativeMinification значение равное true.

В качестве исходных файлов мы будем использовать:

1. bootstrap.css из Twitter Bootstrap 3.0.0
2. jquery-ui-1.10.3.custom.css из jQuery UI 1.10.3
3. animate.css из Animate.css от 15.08.2013
4. hint.css из Hint.css 1.3.0
5. zocial.css из Zocial CSS social buttons от 02.12.2012

Размер объединенного файла составляет 296,2 КБ, а после применения GZip-сжатия — 98,7 КБ.

Таблица 2. Результат применения алгоритмов CSS-минимизации к каждому файлу по отдельности

Таблица 3.Результат применения алгоритмов CSS-минимизации к объединенному файлу

Рис. 1. Экономия за счет использования алгоритмов CSS-минимизации (в килобайтах)

Из графика хорошо видно, что, как и в прошлый раз, наилучший результат показал минимизатор CSSO (CSS Optimizer) от компании Яндекс. Но не обошлось и без ложки дегтя: дополнительный выигрыш в 1,7 КБ при сжатии объединенного файла, был получен за счет удаления двух комментариев вида: /*! какой-нибудь текст */. Как правило, в таких комментариях содержится информация о версии библиотеки и ее разработчиках. CSSO оставляет лишь первый такой комментарий, а остальные удаляет.

Microsoft Ajax CSS Minifier снова показал хороший результат по сравнению своим основным конкурентом — YUI CSS Compressor for .Net.

Больше всего меня удивил новичок — Clean-css от компании Goal Smashers!. От столь популярного в Node.js-сообществе CSS-минимизатора (Clean-css используется пакетом grunt-contrib-cssmin) я ожидал большей степени сжатия. По эффективности минимизации он расположился между встроенными минимизаторами препроцессоров LESS и Sass.

Новая версия структурного минимизатора от компании Microsoft — WebGrease Semantic CSS Minifier до сих пор содержит в себе критические ошибки:

1. Не может обрабатывать директиву @charset и правило @-o-keyframes.
2. Обнуляет дробные значения, которые меньше единицы.

Поэтому WebGrease Semantic CSS Minifier опять выбывает из борьбы.

Из графика практически не видно, что файлы, полученные путем минимизации файла с объединенным кодом (исключение составляет файл, обработанный с помощью CSSO), по размеру немного меньше файлов, собранных из отдельно минимизированных файлов. Меньший размер таких файлов объясняется двумя причинами:

1. Были удалены лишние переводы строк, разделяющие код отдельных файлов.
2. Несколько директив @charset были объединены в одну.

Поэтому можно сделать вывод: что минимизация файла с объединенным кодом практически не дает выигрыша в размере файла.

Сравнение минимизаторов JS-кода

Сравним следующие алгоритмы минимизации JS-кода:

Таблица 4. Информация об адаптерах и алгоритмах минимизации JS-кода

Если вы уже заметили, то в приведенном выше списке отсутствует адаптер-минимизатор EdwardsJsMinifier. Поскольку поддерживаемый им алгоритм минимизации Packer 3.0 не менялся с 2007 года, то я решил не включать его в данный обзор.

В качестве исходных файлов мы будем использовать:

1. bootstrap.js из Twitter Bootstrap 3.0.0
2. jquery-ui-1.10.3.custom.js из jQuery UI 1.10.3
3. MicrosoftAjax.debug.js из Microsoft AJAX Framework 4.0.0.0
4. knockout-2.3.0.debug.js из Knockout 2.3.0
5. jsrender.js из JsRender 1.0.0-beta
6. linq.js из LINQ for JavaScript 2.2.0.2
7. moment.js из Moment.js 2.1.0

Размер объединенного файла составляет 1218,9 КБ, а после применения GZip-сжатия — 406,3 КБ.

Таблица 5. Результат применения алгоритмов JS-минимизации к каждому файлу по отдельности

Таблица 6. Результат применения алгоритмов JS-минимизации к объединенному файлу

Рис. 2. Экономия за счет использования алгоритмов JS-минимизации (в килобайтах)

Из приведенных выше данных видно, что минимизатор Closure Compiler от компании Google по-прежнему на первом месте.

Microsoft Ajax JS Minifier на этот раз обогнал UglifyJS и по праву занял второе место.

Вообще, UglifyJS меня очень сильно удивил тем, что при минимизации файла с объединенным кодом размер результирующего файла не только не уменьшился, а наоборот увеличился. Что говорит о некоторых недоработках в алгоритме.

YUI JS Compressor for .Net сильно отстал от первой тройки минимизаторов, что свидетельствует об устаревании его алгоритма.

Несмотря на то, что JSMin до сих развивается, принципы, заложенные в нем, остались прежними: никакого вмешательства в логику скрипта, только удаление комментариев и пробельных символов. Поэтому в данном обзоре JSMin является даже не участником, а выполняет роль нижней границы.

Также как и в случае с CSS-минимизаторами мы получили совсем незначительный выигрыш от минимизации файла с объединенным кодом.

Выводы

Как и в прошлый раз, битву минимизаторов выиграли поисковые гиганты — Яндекс и Google. Приятно сознавать, что лучший CSS-минимизатор был создан российской компанией.

Несмотря на серьезные проблемы с минимизатором WebGrease Semantic CSS Minifier, компания Microsoft добилась серьезных успехов при разработке семейства минимизаторов Microsoft Ajax Minifier.

Опрос

В заключении статьи предлагаю вам принять участие в опросе:

Автор: Taritsyn

Источник