Your SlideShare is downloading. ×
0
Microsoft Ajax Minifier
Автоматическая оптимизация JavaScript and
CSS для веб сайтов высокой
производительности
Евгений Чи...
Что такое минификация и зачем она
нужна
• Рефакторинг JS и CSS файлов с уменьшением
размера файла без потери функционально...
На что стоит обратить внимание
• Поддержка кода
– Потеря читабельности кода при слишком
аггрессивной минификации
– Ручная ...
На что стоит обратить внимание
• Gzip – иногда простое gzip-сжатие дает
приемлемый результат
– Во многих случаях комбинаци...
Минификация JS
• Что можно сделать в первую очередь чтобы
минимизировать JS файл:
– Комментарии
– Пробелы и табуляция
– Ис...
Минификация JS
• Объявление и инициализация переменных
var x = new Object();
var y = new Array();
var z = new Array(a, b, ...
Минификация JS
• Объявление и инициализация переменных
var x1;
var x2;
var x3 = 10;
var x4;
var y1;
var y2;
for (var i = 0...
Минификация JS
• Switch блок
switch (myValue)
{
case "a":
break;
case "b":
a = b;
break;
default:
break;
case "f":
a = f;
...
Минификация JS
• Блоки обработки исключений: удаление
пустого блока “finally” только если есть
блок “catch”
try
{
...
}
ca...
Минификация JS
• Вызовы функций и блоков кода
function foo(a,b,c,d,e)
{
alert(a);
if (A)
B();
// B() - вызов функции
if (C...
Минификация CSS
• Пробелы и табуляция
• Комментарии
• Удаление одинаковых селекторов
• Сжатие селекторов
– С одинаковыми и...
Минификация CSS
• Сжатие селекторов
#foo
{
color : Blue;
color : Red;
margin : 5 10 5 10
}
...
#foo
{
background-color :
W...
Минификация CSS
• Сжатие селекторов с разными именами
#bar
{
color : Blue;
margin : 0;
padding : 0;
}
...
#foo
{
color : R...
Минификация CSS
• Сжатие значений
#foo
{
padding: 0px;
margin: 10 10 10 10;
color : #AABBCC;
}
#foo
{
padding: 0;
margin: ...
Выводы
• Минификация позволяет существенно
уменьшить размер статического файла
– При чрезмерном увлечении минификацией в
к...
Microsoft Ajax Minifier
• Автоматическая минификация JS и CSS
– Можно использовать как часть билда для
сборки или как API....
Q&A
Upcoming SlideShare
Loading in...5
×

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

1,663

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,663
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×