Реактивные веб-сайты

При использовании же еще и gzip-сжатия предварительная мини-

мизация позволяет увеличить итоговую степень сжатия в среднем на 3-5%.

В ситуациях, когда gzip-сжа-

тие применить невозможно, напри-

мер, когда CSS- и JS-код встроены в

веб-страницу, минимизация —

один из немногих оставшихся спо-

собов существенно уменьшить раз-

мер такой веб-страницы.

Стоит заметить, что после

проведения минимизации резуль-

тирующий код по-прежнему будет

полностью совместим со всеми

браузерами, т. к. он останется тем же корректным HTML-, CSS- или JS-ко-

дом, в то время как gzip-сжатие до сих пор поддерживается не всеми

пользовательскими браузерами. Кроме того, минимизированный код все-

гда распознается и обрабатывается браузером быстрее.

Обфускация

Так называется процесс, при котором JavaScript-код специальным

образом запутывается для того, чтобы затруднить процесс его разбора и

модификации. Обфускация может включать в себя те же операции, что и

минимизация, а также:

? кодирование символов в различные форматы;

? изменение имен переменных и функций;

? добавление избыточного кода.

———————— Page 23————————

22 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

Ниже приведен фрагмент JS-кода до обфускации:

var Prototype = {

Version: ’1.6.1_rc3′,

Browser: (function(){

var ua = navigator.userAgent;

var isOpera = Object.prototype.toString.call(window.opera)

== ‘[object Opera]‘;

return {

IE: !!window.attachEvent && !isOpera,

Opera: isOpera,

WebKit: ua.indexOf(‘AppleWebKit/’) > -1,

Gecko: ua.indexOf(‘Gecko’) > -1 &&

ua.indexOf(‘KHTML’) === -1,

MobileSafari: /Apple.*Mobile.*Safari/.test(ua)

}

})(),

BrowserFeatures: {

XPath: !!document.evaluate,

SelectorsAPI: !!document.querySelector,

ElementExtensions: (function() {

var constructor = window.Element || window.HTMLElement;

return !!(constructor && constructor.prototype);

})(),

SpecificElementExtensions: (function() {

if (typeof window.HTMLDivElement !== ‘undefined’)

return true;

var div = document.createElement(‘div’);

var form = document.createElement(‘form’);

var isSupported = false;

if (div['__proto__'] && (div['__proto__'] !==

form['__proto__'])) {

isSupported = true;

}

div = form = null;

return isSupported;

})()

},

ScriptFragment: ‘]*>([\\S\\s]*?)<\/script>',

JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,

emptyFunction: function() { },

K: function(x) { return x }

};

----------------------- Page 24-----------------------

3

Обзор методов клиентской оптимизации 2

А так этот же код выглядит после обфускации:

eval((function(x){var d="";var p=0;while(p

{if(x.charAt(p)! ="`")d+=x.charAt(p++);else{var

l=x.charCodeAt(p+3)-28;if(l>4)d+=d.substr(d.length-

x.charCodeAt(p+1)*96-x.charCodeAt(p+2)+3104-l,l);else

d+="`";p+=4}}return d})("var Prototype={Version:\

"1.6.0.3\",Browser:{IE:!!(window.attachEvent&&navigator.userAgent

.indexOf(\"Opera\")===-1),` )!:` -@>-1,WebKit` 1:Apple` C\"/`

P\"Gecko` 7:` >!` I!`!_;KHTML`!w#,MobileSafari:!!`

E0match(/`!P!.*` K\".*`M\"/)}`#F$Features:{XPath:!!document.

evaluate,SelectorsAPI` 5(query` 5$,ElementExtensions:!!`$=#HTML`

8#,Specific` =.` o%create` :#(\"div\").__proto__&&`

\"C!==`24form` ?(},ScriptFragment:\"]*>([\\\\S\\\\s]*?)

\",JSONFilter:/^\\/\\*-secure-([\\s\\S]*)\\*\\/\\s*$/,

emptyFunction:f` \"#(){},K` %&x){return x;}};"))

Несмотря на подобный вид, такой код работает точно так же, как ис-

ходный, из которого он был получен.

В редких ситуациях при помощи обфускации можно достичь более

эффективного сжатия, чем при помощи минимизации, но это отнюдь не

является основной целью операции. В ситуации, когда в код добавляется

большое количество избыточного кода, объем кода может значительно

увеличиваться.

О наиболее популярных приложениях для минимизации и обфуска-

ции было рассказано в книге «Разгони свой сайт», во второй главе. Также

часть подобных приложений рассматривается в начале седьмой главы.

Сжатие

Наиболее простым способом

уменьшения размера загружае-

мых объектов с точки зрения вне-

дрения является сжатие тексто-

вых файлов при помощи техноло-

гии gzip.