Сжатие Javascript и CSS
При сжатии javascript, как и HTML/CSS, используется GZIP на сервере: mod_deflate в apache/nginx, mod_deflate/mod_compress в lighttpd.
Это - универсальное сжатие. Но есть и специфическое, которое помогает уменьшить размер в 2 и более раза, по сравнению с простым gzip.
Минификация javascript убирает лишние символы из исходника и хитрыми способами уменьшает его размер. При хорошем сжатии обычно происходит обфускация, т.е имена переменных заменяются на более короткие там, где это возможно, в результате скрипт становится непонятным.
Рекомендация номер один. YUI Compressor(страница)
использует парсер javascript, написанный на языке java, который называется Rhino.
Патченный Rhino сжимает за счет двух основных операций:
- убирает лишние пробельные символы и комментарии
- заменяет имена локальных переменных на более короткие
Чтобы его использовать, нужны такие компоненты:
Сжать файл myfile.js в myfile-min.js:
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js
Также есть ряд полезных опций, о которых Вы узнаете, запустив:
java -jar yuicompressor-x.y.z.jar -h
Компрессор также умеет сжимать CSS, вставлять переносы строк после каждой точки с запятой, или каждые NN символов, и т.д.
Если русские символы криво сжимаются --- используйте опцию "charset".
Важно: при сжатии, в целях безопасности, YUICompressor не будет сжимать локальные переменные во всех областях видимости, связанных с вызовами with и eval. Поэтому использовать эти конструкции не рекомендуется.
Можно использовать для обфускации javascript, для сжатия не рекомендуется.
Утилита Packer доступна на нескольких языках программирования по адресу http://dean.edwards.name/download/#packer.
Можно поиграть с реализацией packer на javascript по адресу http://dean.edwards.name/packer/.
Packer делает следующее:
- Сжимает javascript регулярными выражениями
- Использует алгоритм архивации со словарем
Например, напустим PHP-версию на скрипт:
function somefunc() {
var test = 5
var myTest = 7
/* go go go!!! */
go(myTest)
}
Результат сжатия (все в одну строку):
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('3 6(){1 2=5 1 0=7 4(0)}',8,8,'myTest|var|test|function|go||somefunc|'.split('|'),0,{}))
При загрузке javascript разжатие осуществляется автоматически запуском eval.
Это означает, что нагрузка по разархивации ложится на javascript.
Есть мнения (new.com: http://www.clientcide.com/best-practices/optimization/dean-edwards-packer-compression-tool/ ), что это может привести к неоправданным тормозам на разархивацию вместо загрузки.
Тем более, что JS-файл кешируется, и при последующих заходах на страницу браузер будет снова и снова разархивировать один и тот же javascript-файл.
Packer имеет смысл использовать для сжатия javascript в двух случаях:
- Вы не хотите использовать gzip-компрессию, например, чтобы избежать глюков старых браузеров при распаковке javascript
- Вы хотите обфусцировать код, сделать его непонятным
В остальных случаях можно обойтись YUI Compressor как для Javascript так и для CSS.
Версия jQuery: 1.3.2. Это для примера, с тем же успехом можно было взять и другую ветку.
В названии файлов
- min - родная минификация jQuery. Тот же результат получается при минификации yui compressor 2.4.2
- packer - означает, что применили PHP packer 1.1
- gz - обычный gzip. Таким же gzipом сжимает скрипты вебсервер.
Несколько суффиксов обозначают два последовательно запущенных компрессии. Например, .min + .gz означает минифицированный и затем gzip'ованный скрипт.
Почти все современные браузеры принимают от сервера gzip'ованные скрипты.
jquery-1.3.2.js |
120763 |
jquery-1.3.2.js.gz |
35361 |
jquery-1.3.2.min.js |
57254 |
jquery-1.3.2.min.js.gz |
19716 |
jquery-1.3.2.pack.js |
41025 |
jquery-1.3.2.pack.js.gz |
20274 |
Из таблицы видно, что наилучший результат достигается после минификации с последующим gzip (jquery-1.3.2.min.js.gz).
Итак, лучший метод сжатия выбран как в теории и проверен на практике. Это минификация скрипта. А gzip пусть делает сервер.
На текущий момент наилучшим способом сжать javascript является использование Google Closure Compiler.
Этот инструмент заслужил отдельный цикл статей: Google Closure Compiler в деталях.
Соответственно, рекомендация: Google Closure Compiler + GZIP. Причины те же.
|
Спасибо большое, очень долго искал.
Друзья, смею обрадовать вас. Теперь по той же ссылке доступна новая версия - которая ко всему прочему сжимает локальные переменные и не портит регулярные выражения, записанные без кавычек.
Я тестировал программу на довольно больших кусках кода. Но вот маленький примерчик, с которым она легко справляется:
function test() {
var varOut/*a*/ = "opa";
function testIn(param) {
var str = varOut+"2, param: "+param;
return str.replace(/ p/i, '');
}
alert(testIn("!"));
}
А можете для PHP подсказать компрессор?
Я пользуюсь http://code.google.com/p/jsmin-php/, но он не преобразует локальные переменные, выкусывает комментарии и переносы строк, да и то, не все.
Может кто знает что-то получше на PHP?
а можно заставить браузер кушать gz файлы, если у меня нету доступа к настройкам сервера? тоесть к примеру если ети файлы сразу в формате gz. ато если просто вставить их в тег script, ничего не получается
Настройки сервера здесь касаются только пункта 2. То есть, сервер может быть настроен на сжатие определенных документов, или сжатие вообще может не не настраиваться.
Браузер в любом случае кушает gzip'ованное содержимое, если сервер сообщил про сжатие в заголовках.
печально, к настройкам серва мне не добратся(
а после прочтения этой статьи пакером не хочется сжимать, а без gzip он самый эффективный.
JSMin + gzip почти равен YUI + gzip. Зря тут нет результатов.
http://webo.in/articles/habrahabr/11-minifing-javascript/
А по поводу "битого" кода -- пишите его в строгом соответствии со стандартами и в нормальной нотации, а потом сжимайте.
а) Здесь есть результаты.
б) Не сбивайте с толку людей, основываясь на кривых данных.
Посмотрел статью.
Часть ссылок на файлы, использованные для тестирования в этой статье, просто не открывается: 404.
Кроме того (цитирую) "для анализа были найдены несколько ... JS-файлов ... разных .. степеней изначального сжатия".
Я посмотрел файлы (которые не 404) - так и есть.
То есть, автор сжимает уже изначально сжатые файлы вместе с несжатыми, потом сжимает их и бросает результат в одну кучу. Так делать нельзя.
Компрессия в реальной жизни применяется исключительно к несжатым файлам.
Вот, написал ещё такой способ сжатия. сжатие почти в 50%. Читаем: Сжимаем css с помощью base62
Этот способ не стоит использовать, если на сервере делается GZIP. Лучше YUI + GZIP.
это на валидацию никак не влияет?
http://javascript.ru/optimize/javascript-compression#packer
цитата:
Результат сжатия (все в одну строку):
eval( ...
запустил этот код и получил - Ошибка, предполагается наличие ";"

запускал и отдельным файлом *.JS и в составе HTML через тег
Подскажите, что значит:
"желательно, чтобы исполняемый файл java был на текущем пути (PATH)".
Если код написан некосоруко, то есть нет лишних пробелов, то код в одну строку превращается и простым редактором типа Notepad++ замещением символов табуляции и конца строки в пустую строку за пару секунд. Вуаля)))
Хороший способ ускорить сайт или блог.
Не используйте packer для обфускации. Совсем он ничего не делает, а кодировка обратима. Да и на самом сайте пакета написано компрессор, а не обфускатор.
Рекомендую всем хороший и, главное, бесплатный сервис для размещения файлов CSS и JS-библиотек с возможностью создавать прямые ссылки. Есть минимизация файлов. Ссылка: dirlink.ru
Сокращенный код потом сложно редактировать, как обратно вернуть?
Сжатый код помогает защищать разработки, пригодится при разработке сайтов и программ.
Отличная статья. А почему вы сервис https://c-wd.ru/tools/compressorcss/ по сжатию CSS не рассмотрели?
You have remarked very interesting points! ps decent website. last day on earth pc
thanks you for the nice post, i benefit a lot! love balls pc
This is a great thing, I think everyone feels this information is very valuable, thank you candy crush soda
what is a good sat score for harvard
Hello! this complex question. Here it is necessary to think...
An article that is remarkable and should be learned. Thank you for providing this great information. driving directions
I really like reading through a post that can make people think. Also, many thanks for permitting me to comment! basketball legends
If you want to find casual sex contacts for hot chat in United Kingdom visit casual sex manchester and you will not regret it
Find fine ladies for sexy chat contacts in UK and enjoy on our web platform adult chats uk
Love to see this useful web platform. Thank you very much.Get jasa SEO at https://seohandal.id official web.
Your work is very good. Thank you for sharing great information to us. sex frankfurt
belfast shemale is the best web place for hot chat with young girls in United Kingdom so check out right now and enjoy
Find hot local ladies ready for casual contacts in EU only at sexanzeigen graz
This is a very interesting post that can be helpful to anyone who reads it. We are looking forward to reading your future posts. Handy Solutions
If you are going for best contents like I do, simply go to see this website all the time as it provides feature contents, thanks 먹튀검증사이트추천
This is a great idea, it will definitely be shared widely, thanks for sharing it with us temple run
If you want casual sex contact in EU try to find fine ladies at Transen in Favoriten
Maswiktoria roksa
Sex Aachen ist sorgfältig mit unserer Matchmaking-Prozess, um sicherzustellen, dass Sie einen kompatiblen und reifen Sex hookup Partner zu sichern. Sie können nie etwas falsch machen, wenn Sie unserer Plattform beitreten. Wir sind unseren Mitbewerbern im Erwachsenen-Chat voraus, indem wir schnellere, einfachere und bequemere zwanglose Begegnungen und qualitativ hochwertige Matches anbieten. Für die beste lokale und internationale Erfahrung, suchen Sie nicht weiter. Worauf warten Sie noch? Genießen Sie die ganze Fülle, die wir zu bieten haben, indem Sie sich noch heute auf unserer exklusiven Plattform anmelden.
Hello. I'm subscribed to your posts. You inspire me a lot. mold removal professional near me san Antonio tx
This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post.
Immobilien Tour Nordzypern
This post is exactly what I'm looking for. quordle, The content is fully fit and I enjoy it so much. weaver game
Thanks for sharing such a great content. Search Engine Optimization in Fort Worth Texas
I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well..
immobilien nordzypern
I really appreciate you sharing ideas on how to do this correctly.
see services
thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future
you for the efforts you have made in writing this article. I am hoping the same best work from you
You and I both have the same issue. Visit the game among us to play some thrilling action games as you search for the solution.
redactle game
The racing game genre of video games is very popular all around the globe. Various great racing games, including smash karts , have been made throughout time on a range of different platforms.
You don't want to use gzip compression, for example to avoid old browser glitches when decompressing javascript.
www.dallasretainingwallcontractors.com
In the royal battle lol beans game, each round's elimination will be based on those who don't arrive at the finish line in time. You must therefore take action right away. By defending yourself, get through the qualification and move on to the championship round.
Thanks for sharing this amazing and informative post. keep sharing with us.
B3 Men Shearling Aviator Bomber Leather Jackets
If Russian characters are compressed crookedly --- use the "charset" option for towing services greenville.
bejaardensex is ideaal voor eenmalige verbindingen. Het mooie van losse relaties is dat je er niets voor terug verwacht. Je bent niet verplicht je te binden aan iemand die je niet leuk vindt, en je kunt het gewoon vergeten en verder gaan met iemand anders. Maar als u er een vaste gewoonte van wilt maken, kunt u de persoon in uw contact houden en het opnieuw proberen.
Only aim to have amazing content. Your post's lucidity makes me assume you're an expert on the subject. Only aim to have amazing content. Your post's lucidity makes me assume you're an expert on the subject.
Only aim to have amazing content. Your post's lucidity makes me assume you're an expert on the subject. geometry dash subzero
Your ideas inspired me very much. 온라인바카라사이트 It's amazing. I want to learn your writing skills. In fact, I also have a website. If you are okay, please visit once and leave your opinion. Thank you.
vcbn
i seach it's too, lol. It's just like moto x3m
I am very interested in this forum. give me lots of useful information. help me a lot. contexto game
love the content of this blog and the positive intent you have. Thanks!
Men Studded Jackets
Find out how to walk or drive step-by-step to your destination on mapquest directions
Thanks for shreaing great post.
You and I both agree. This article is really motivating. I like your article, and everything you provide with us is up to date and quite educational. I want to save this website so I can come back and tell you how well you did your work. contexto game
3amoto Leather provides a hassle-free method to purchase on a budget. Our website offers a distinguished type of clothes that has been creatively designed for people like you! Every item on our store has passed a quality assurance test, ensuring that you have the greatest possible clothing. Our extensive inventory includes a wide range of casual and formal clothing. Our craftsmen's extraordinary expertise profoundly finds those varieties.
Favorite mind game connect 4
Fans of Wordle who are looking for a challenge that is more difficult will like playing the word puzzle duotrigordle, which is more difficult.
If you want to find out something about fine ladies in EU you must check Sexanzeigen in Köniz
Shop the latest collection of kevin costner yellowstone jacket for ultimate comfort and warmth. Available in various sizes and colors. Get yours today!
I would like to say that this blog convinced me to do it! Thanks, very good post stumble guys
صيانة كينوود
صيانة ميانتا
صيانة براون
صيانة مولينكس
صيانة بلاك اند ديكر
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.