Метка: javascript
Сравнение 2х основных утилит для сжатия статических файлов
Решил сравнить способности по сжатию javascript у 2х основных утилит closure compiler от google и yui compressor от yahoo.
Будем сравнивать с несжатой и сжатой версией jquery:
java -jar compiler.jar --js jquery-1.11.1.js --js_output_file=jquery-1.11.1.cc.js
java -jar compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js jquery-1.11.1.js --js_output_file=jquery-1.11.1.cca.js
java -jar yuicompressor.jar jquery-1.11.1.js -o jquery-1.11.1.yui.js
| jquery-1.11.1.js | 282766 |
| jquery-1.11.1.min.js | 95786 |
| jquery-1.11.1.cca.js | 87933 |
| jquery-1.11.1.cc.js | 96284 |
| jquery-1.11.1.yui.js | 107452 |
Лучше всего сжатие у closure compiler с опцией ADVANCED_OPTIMIZATIONS.
На следующем месте идет сжатый jquery от вендоров, так что если под рукой нет компрессора с java, лучше использовать его.
Как ни странно, мой любимый yui compressor на последнем месте. Но, в его защиту можно сказать, что он оставляет все комментарии с копирайтами, удалив которые, наверняка, можно было бы сэкономить еще. А так же, closure compiler не умеет сжимать css а размер его jar-файла 6 856 128 байт, против 891 148 yui, что в 7,69 раз больше.
Так что yui compressor по прежнему остается не заменимой утилитой, которую можно таскать и вместе с проектом в git, а так же сжимать как стили, так и скрипты, пусть и не с максимальной экономией.
Отслеживаем конверсию без перезагрузки страницы
Обычно, при отправки формы советуют редиректить пользователя на некий целевой URL, переход по которому будет означать конверсию цели.
Однако, в наш век Rich Internet Application, такой метод общения с пользователем кажется способом забиванием гвоздей камнями. Гораздо приятнее, когда форма проверяется и отправляются данные из нее прямо на той же странице, где находится пользователь. Тут же выводится и сообщение об успешной отправке. Например, как на этом лендинге по созданию целевых страниц.
Как же тогда отметить в Метрике достижение цели? Оказывается, разработчики метрики уже подумали об этом и предоставляют нам способ обозначить достижение цели через клиентский код.
А также показывают пример кода, который позволяет достигать целей конверсии без перезагрузки страницы: Можно ли задать в качестве цели нажатие посетителем на какую-либо ссылку или кнопку?
А чтобы сделать наше приложение максимально гибким, я разработал следующий код:
(function($, w, d){
$(w).on('load', function(){
$(d).on('yandex.reachGoal', function (e, params) {
var target = params.target;
params = params.params || null;
target && w.yaCounterXXXXXX && w.yaCounterXXXXXX.reachGoal(target, params);
});
});
})(jQuery, window, document);
Коду для работы требуется установленный на странице код Я.Метрики и jQuery. Здесь мы подвешиваем на документ обработчики событий, которые будут отправлять данные в Яндекс. Это нужно прежде всего для того, чтобы не передавать идентификатор счетчика в метрике по всему коду. Чтобы воспользоваться этим кодом, достаточно в коде обработки формы при успешной отправке возбуждать соответствующее событие.
$(document).trigger('yandex.reachGoal', {target:'REQUEST_SENT'});
Не забудьте добавить эту цель в интерфейсе метрики. Удачи.