Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Microsoft Ajax Minifier          Автоматическая оптимизация JavaScript and                 CSS для веб сайтов высокой     ...
Что такое минификация и зачем она              нужна• Рефакторинг JS и CSS файлов с уменьшением  размера файла без потери ...
На что стоит обратить внимание• Поддержка кода  – Потеря читабельности кода при слишком    аггрессивной минификации  – Руч...
На что стоит обратить внимание• Gzip – иногда простое gzip-сжатие дает  приемлемый результат  – Во многих случаях комбинац...
Минификация JS• Что можно сделать в первую очередь чтобы  минимизировать JS файл:  – Комментарии  – Пробелы и табуляция  –...
Минификация JS• Объявление и инициализация переменныхvar x = new Object();         var x =   {};var y = new Array();      ...
Минификация JS• Объявление и инициализация переменных   var   x1;              var x1,x2,x3=10,x4;   var   x2;   var   x3 ...
Минификация JS• Switch блок   switch (myValue)    switch (myValue)   {                   {       case "a":           break...
Минификация JS• Блоки обработки исключений: удаление  пустого блока “finally” только если есть  блок “catch”         try  ...
Минификация JS• Вызовы функций и блоков кода function foo(a,b,c,d,e)      function foo(a) {                            {  ...
Минификация CSS• Пробелы и табуляция• Комментарии• Удаление одинаковых селекторов• Сжатие селекторов   – С одинаковыми име...
Минификация CSS• Сжатие селекторов #foo                     #foo {                        {     color : Blue;     color : ...
Минификация CSS• Сжатие селекторов с разными именами #bar                   #foo,#bar {                      {     color :...
Минификация CSS• Сжатие значений #foo                       #foo {                          {     padding: 0px;           ...
Выводы• Минификация позволяет существенно  уменьшить размер статического файла  – При чрезмерном увлечении минификацией в ...
Microsoft Ajax Minifier• Автоматическая минификация JS и CSS  – Можно использовать как часть билда для    сборки или как A...
Q&A
Upcoming SlideShare
Loading in …5
×

Microsoft Ajax Minifier – автоматическая опитимизация JavaScript и CSS для веб-сайтов высокой производительности (Евгений Чигиринский)

1,917 views

Published on

  • Be the first to comment

  • Be the first to like this

Microsoft Ajax Minifier – автоматическая опитимизация JavaScript и CSS для веб-сайтов высокой производительности (Евгений Чигиринский)

  1. 1. Microsoft Ajax Minifier Автоматическая оптимизация JavaScript and CSS для веб сайтов высокой производительностиЕвгений Чигиринский Октябрь 2010eugench@microsoft.com
  2. 2. Что такое минификация и зачем она нужна• Рефакторинг JS и CSS файлов с уменьшением размера файла без потери функциональности• Экономия траффика – Некоторые файлы можно сжать до 40-50% от исходного размера.• Увеличение скорости загрузки страницы
  3. 3. На что стоит обратить внимание• Поддержка кода – Потеря читабельности кода при слишком аггрессивной минификации – Ручная минификация может привести к ошибкам в коде
  4. 4. На что стоит обратить внимание• Gzip – иногда простое gzip-сжатие дает приемлемый результат – Во многих случаях комбинация из минификации+gzip получается наиболее оптимальной – Все зависит от конкретного JS/CSS файла
  5. 5. Минификация JS• Что можно сделать в первую очередь чтобы минимизировать JS файл: – Комментарии – Пробелы и табуляция – Использовать короткие имена переменных – Debugger statements – Использовать кодировку ASCII или UTF-8 • Unicode только увеличивает размер файла
  6. 6. Минификация JS• Объявление и инициализация переменныхvar x = new Object(); var x = {};var y = new Array(); var y = [];var z = new Array(a, b, c); var z = [a, b, c];obj["foo"] = 3 obj.foo = 3var i = 100000000 var i = 1e8
  7. 7. Минификация JS• Объявление и инициализация переменных var x1; var x1,x2,x3=10,x4; var x2; var x3 = 10; var x4; var y1; for (var y1,y2,i=0; ...) var y2; for (var i = 0; ...) function foo() function foo() { { var a = "bar"; return "bar"; return a; } }
  8. 8. Минификация JS• Switch блок switch (myValue) switch (myValue) { { case "a": break; case "b": a = b; case "b": break; a = b; case "f": break; a = f; default: } break; case "f": a = f; break; }
  9. 9. Минификация JS• Блоки обработки исключений: удаление пустого блока “finally” только если есть блок “catch” try try { { ... ... } } catch(e) catch(e) { { ... ... } } finally { }
  10. 10. Минификация JS• Вызовы функций и блоков кода function foo(a,b,c,d,e) function foo(a) { { alert(a); alert(a); if (A) A&&B(); B(); // B() - вызов функции if (C) C; return; } }
  11. 11. Минификация CSS• Пробелы и табуляция• Комментарии• Удаление одинаковых селекторов• Сжатие селекторов – С одинаковыми именами – С большим набором одинаковых значений• Удаление ненужных значений из определений отступа, цвета, длины и так далее• Удаление “;” перед закрытием селектора
  12. 12. Минификация CSS• Сжатие селекторов #foo #foo { { color : Blue; color : Red; color : Red; margin : 5 10 5 10 margin : 5 10; } background-color : White } ... #foo { background-color : White }
  13. 13. Минификация CSS• Сжатие селекторов с разными именами #bar #foo,#bar { { color : Blue; color : Blue; margin : 0; margin : 0; padding : 0; padding : 0 } } ... #foo #foo { { color : Red color : Red; } margin : 0; padding : 0; }
  14. 14. Минификация CSS• Сжатие значений #foo #foo { { padding: 0px; padding: 0; margin: 10 10 10 10; margin: 10; color : #AABBCC; color : #ABC } }
  15. 15. Выводы• Минификация позволяет существенно уменьшить размер статического файла – При чрезмерном увлечении минификацией в коде, код тяжело поддерживать.• Оптимальный вариант – – минификация вручную + – запуск приложений, которые делают автоматическое сжатие как часть сборки/билда.
  16. 16. Microsoft Ajax Minifier• Автоматическая минификация JS и CSS – Можно использовать как часть билда для сборки или как API.• Исходный код и исполняемые файлы доступны на http://ajaxmin.codeplex.com
  17. 17. Q&A

×