ReactiveWebsites v1 4

-
-

www.intuit.ru
, 2010
.

www.lbz.ru
004.738.1(07)
32.973.2027
68
68
..
-.
: / .. , .. ,
.. .: -
: . , 2010. 336 .: .,
. ( ).
ISBN 978-5-9963-0253-6
, , , ,
.
, .
004.738.1(07)
32.973.2027
-
, ,
-
.
:
.
(499) 157-1902, (499) 157-5272,
e-mail: lbz@aha.ru, http://www.lbz.ru
ISBN 978-5-9963-0253-6
, 2010
.
, 2010
7
7
6
11
1.
11
12
20
28
40
43
1.1.
1.2. -
1.3.
1.4.
1.5. -
1.6. -
49
2.
49
52
55
65
71
2.1. ,
2.2. , - firewall
2.3. - Apache, nginx lighttpd
2.4.
2.5.
75
3.
76
82
92
107
114
3.1. GIF (Graphics Interchange Format)

3.2. JPEG (Joint Photographic Experts Group)
3.3. PNG (Portable Network Graphics)
3.4. SVG (Scalable Vector Graphics)
3.5. -
119
4.
119
127
135
138
142
4.1.
4.2. CSS Sprites
4.3. CSS Sprites data:URI, Microsoft
4.4. data:URI
4.5.
156
5. -
156
160
167
171
177
181
185
5.1. :
5.2. CSS-
5.3. CSS
5.4.
5.5. JavaScript
5.6. CDN
5.7. CDN Google Apps
192
6.
193
197
208
214
220
224
234
239
6.1. JavaScript
6.2.
6.3. JavaScript
6.4. CSS3-
6.5. API CSS-
6.6. Canvas: ,
6.7. Web Workers
6.8.
251
7.
251
256
263
269
272
7.1.
7.2. Web Optimizer
7.3. Web Optimizer
7.4. Web Optimizer
7.5. Web Optimizer
279
8.
279
285
300
304
308
315
318
328
8.1. ASP .NET: 100 A YSlow

8.2. Drupal
8.3. Wordpress
8.4. Joomla! 1.5
8.5. Joostina
8.6. Ruby on Rails
8.7. jQuery
8.8.
335
335

,
,
-, .
,
(http://speedupyourwebsite.ru/), ( ) , .
, , . , ,
.
, ,
, . ,
, ,
.
- , ,
.
( )
-,
, Web Optimizer
(http://www.web-optimizer.ru/).
, ,
-, , . .
, ( )
, .

: ,
.

. , - , !

,
, .

.
, ,
-.
.
, -,
,
Web Optimizer.
,

, ,
. ,
.
, Acronis,
,
, . , .
.
( PNG), nginx

-x,
CSS-.
,
(aka sirus, http://fullajax.ru/#:developers)

data:URI ( ). (http://www.getincss.ru/) , (http://mearion.

blogspot.com/) Ruby on Rails.

Drupal ( ), Joostina ( ) jQuery ( ),
.
,
,
,
.

.
,
.
,
. ,
.
5 - (
Akamai), (
webo.in). 60
, .
5-10% . .
, ?
? 75% 10 .
4 :
90% ,
-.
. Google, Amazon, Flickr, Netflix, ,

.
. , .
?
. 50
500 . ,
,
. ,
.
. - (, GPRS).
. . .
-
,
-. (
).
.
.
HTML-.
.
.
.

. -. ?
host-tracker.com,
.
(
1, ).
webo.in/my/action/timings/ (
).

Load Impact (http://www.loadimpact.com/).
50 (
).
, .
, . ,
,
.
. : www.loadimpact.com

YSlow Firebug Firefox ( 80, 90), webo.in ( 70, 80). .

, . , , , , . ,
,
, .
HTML-
. 4 , .
.
,
,
- -. -, .

. ,
. ,
- , . .
,
, , . , , , , , .
, .
.
. , Amazon S3, Google Apps, Microsoft Azure.
. CDN NGENIX
(http://ngenix.net/). CDN .
11
1.
1.1.
-.
, , .
, ,
. ,
, , HTML-,
, (
CSS, JavaScript ).
, , .
.
, ,
, . .
12
1.2. -

,
.
.
, , , .
- : - , - ,
- .
1.2.1.
:
- ;

, ;

.
.
.
- .
13
,
,
. .
,
, . . 5% , , .
Google Analytics (http://www.google.com/analytics/)
. 1.1. Google Analytics
Google Analytics
.
: , , , , . .
, :
, .
14
. (http://metrika.yandex.ru/)
,
.
, , , , .
.
1.2.2. ,
Firebug (http://getfirebug.com/)
-
- Firebug
Firefox.
Net Firebug . ,
, , .
,
,
.
. 1.2. Net Firebug Firefox
Firebug DOM- CSS- , , JavaScript.

.
, Firebug
. Safari
15
. 1.3. Net
Firebug Firefox
Web Inspector, Opera

Dragonfly, Internet Explorer Developer Toolbar.
LiveHTTPHeaders (http://livehttpheaders.mozdev.org/)
LiveHTTPHeaders Firefox . 1.4. LiveHTTPHeaders
16
. , Replay,
GET POST, .
YSlow (http://developer.yahoo.com/yslow/)
YSlow Firefox , -, . , , : , ,
cookie, , .
. 1.5.
YSlow Firefox
HTTPWatch (http://www.httpwatch.com/)
- HTTPWatch. Firefox Internet
Explorer ,
Firebug. HTTPWatch , HTTPS, , , , , cookie,
POST- . HTTPWatch
, , .
17
. 1.6. HTTPWatch Firefox
Hammerhead (http://stevesouders.com/hammerhead/)
Firefox HammerHead

. .
.
: .
1.2.3. -
YSlow, PageSpeed (http://developer.yahoo.com/yslow/,
http://code.google.com/speed/page-speed)
YSlow PageSpeed Firefox
, , ,
.
, ,
- .
, ,
.
18
. 1.7. YSlow Firefox
-
-, .
http://webo.in/ , .
, . .
http://webpagetest.org/ , . .
http://site-perf.com/ : , , . ,
.
1.2.4.
.
, -
19
, ,
, . , -.
Browserscope (http://www.browserscope.org/)
, , . , - , .
. 1.8.
Browserscope
Cuzillion (http://stevesouders.com/cuzillion/)
,
-
, . Cuzillion , .
-
.
20
. 1.9. -, Cuzillion
1.3.

.
HTML-, CSS
JavaScript .
21
, , , Google, Yahoo, , , .
1.3.1. ,

:
, ;
;
.
HTML, CSS JS
,
gzip-, 30% ,
. gzip- 3-5%.
, gzip- , , CSS- JS-
-,
-.
,
-

, . . HTML-, CSS- JS-, gzip-
. , .
, JavaScript-
,
. ,
, :
;
;
.
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: '<script[^>]*>([\\S\\s]*?)<\/script>',
JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,
emptyFunction: function() { },
K: function(x) { return x }
};
23
:
eval((function(x){var d="";var p=0;while(p<x.length)
{if(x.charAt(p)! ="`")d+=x.charAt(p++);else{var
l=x.charCodeAt(p+3)-28;if(l>4)d+=d.substr(d.lengthx.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\\\\s]*?)
</` 4\">\",JSONFilter:/^\\/\\*-secure-([\\s\\S]*)\\*\\/\\s*$/,
emptyFunction:f` \"#(){},K` %&x){return x;}};"))
, , , .

, ,
. ,
,
.
, .
.

gzip. ,
DEFLATE,
13 . Google, 99,8% gzip-
HTML- CSS JavaScript.
24
HTTP/1.1 HTTP- , Accept-Encoding:

Accept-Encoding: gzip, deflate
- , , . , , , Content-Encoding.
Content-Encoding: gzip
gzip- , 20% .
gzip-
, ( -
) . , , . .
. , -,
, . . .
gzip-, ,
.
,
, gzip- -, . , .
, ,
.
HTML CSS
, ,
, , HTML-, CSS- ( ).
.
25
1.3.2.

50%
.
,

, , (. . ), .
, : PNG-8, PNG-24, JPEG, GIF, ICO.
.
.
,
(, . .) JPEG
. , JPEG , , .

, , PNG-24, -. , Internet Explorer 6
AlphaImageLoader.

PNG-8. , GIF, ( -), GIF
. -
26
(), , , .

, , GIF.
APNG. 3.3.
- (favicon.ico)
- ICO,

. favicon.ico
, .
, . (, ,

) ,
, -.
Windows Mac OS Adobe Photoshop, Adobe Fireworks.
Linux
Gimp.
, , .
1.3.3.

, HTML CSS.
, ,
-
27
. http://pepelsbey.net/2008/04/semanticcoding-1/ http://pepelsbey.net/2008/04/semantic-coding-2/.
HTML CSS, , , ,
target=_self.
CSS , -, , , , . .
, .

- CSS- JS-. style= HTML- , CSS-, JavaScript- (, onclick=, onmouseover= .) -
. JavaScript- , , .

- , HTML-,
.
, DOM- CSS-, . , -
, .
CSS JS, -,
, , .
CSS- Dust-Me Selectors
Firefox (https://addons.mozilla.org/ru/firefox/addon/5392).
cookie
cookie , , . -
28
, cookie ,
.
cookie , . - -, ,
.
(, , CSS
JS) , cookie .
1.4.
HTML- 10%
. 90%
( , CSS JS).
:
IP- ;
;
;
;
.
, -
, , ,
JS ,
. 1.10.
-
29

-.

.
1.4.1.

-
.
.
: , onload,

-.
, iframe XHTML 1.0
Strict XHTML 1.1.
, , , - , , .
AJAX.
CSS
CSS-. .
-
CSS-, ,
, .
, -,
-. <head>
:
30
<link type="text/css" rel="stylesheet" href="screen.css"

media=" screen" />
<link type="text/css" rel="stylesheet" href="handheld.css"
media="handheld" />
<link type="text/css" rel="stylesheet" href="print.css"
media="print" />
,
@media.
,
, CSS- @import
HTML- CSS-.
CSS- , @import, .
, -
Internet Explorer
CSS-. . , , :
<![if gt IE 7]><!>
<link rel="stylesheet" href="css/style.css"/>
<!<![endif]>
<![if lt IE 8]>
<link rel=stylesheet href="css/style.ie.css">
<![endif]>
JavaScript
CSS,
JavaScript. , .
JS , . ,
JavaScript ( 50-100
).
, -
100-150 ,
31
:
, . , - , , , .
,
, ,
JS. P1 F1, F2 F3, P2 F1, F3 F4, P3
F1, F3, F5 F6. .
1. . P1
F1, F2 F3, P2
F4 (F1 F3 ),
P3 F5 F6.
2. . P1
F1-F6,
.
3. , . P1 F1, F2 F3, P2
F1, F3 F4, P3 F1, F3, F5 R6. ,
,
, . . F1 F3 .
, . . , . F1 F3.
,
.

.
1.4.2.
.
32
. 1.11.
() ,
. .
.
:
<a class="button" href="#"> </a>
, background :hover,
:
33
a.button {
background: url(/img/button.png) 0 0 no-repeat;
display: inline-block;
width: 100px;
height: 20px;
}
a.button:hover {
background-position: -100px 0;
}

:
, (repeat);
, (repeat-x);
, (repeat-y);
, (norepeat).
, . , , (, ), , , .

- , .
, , ,
, ,
. .
, .
,
; . ,
40%.
,
<map>
.
34
1.4.3. -
CSS JS
CSS- JS-, HTML-.
:
.
, -
, .
, HTML- :

, , ;
, .. ,
-
;
-.
CSS <style>, <head> , JavaScript- <script> , <body> <head>.
,
CSS- JS- - (. .
style, onclick . .). , .

HTML- ,
data:URI. RFC 2397 URI
.
:
data:[< >][;base64],<>
mime- (, image/gif). base64- .
:
35
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQA
QMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDr
Az3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkS
uQmCC" width="16" height="14" alt=" " />
, HTML-, , HTML-, . , ,
CSS-.
:
base64-
33% ;
base64- , ;
Internet Explorer 7 .
gzip CSS, .
base64-
Internet Explorer.

data:URI .
1.4.4. HTTP-

,
, . ., , IP- .

, -
.

,
36
IP- DNS-, (
).
,

-, , .
DNS- ,
, -. , ,
.

.
,
, (4-6) .
.

. :
;
,
;
37
(, www );
,
;
, ;
(HTTP
HTTPS);
. .
, HTTP-, .
, , . :
, - ,
;
() ;

, ;
, -;
, ;
,
<meta> JavaScript-.
, 300, 301
302 Location, ,
-. , ,
-.
1.4.5.
-
,
. ,
, -
38

.

,
.
.
Expires
HTTP- (, HTML-
) , Expires . . .
,
, .
:
(.), (2 ) (.)
:: GMT
Expires .
, ,
( ),
, :
Expires: Mon, 27 Dec 2027 00:00:00 GMT
Cache-Control
Cache-Control ,
.
:
Cache-Control: no-store, no-cache, must-revalidate
, ,
, , (60 * 60 * 24 * 365
), :
Cache-Control: max-age=31536000
39
Last-Modified, If-Modified-Since
Last-Modified ,
. , Expires:
Last-Modified: Tue, 4 Aug 1995 04:58:08 GMT

If-Modified-Since:
If-Modified-Since: Tue, 29 Oct 1994 19:43:31 GMT
, 304 Not Modified . .
, , , ,
.
ETag, If-None-Match
ETag LastModified , .
:
ETag: "any-type-of-tag-or-hash"
, ,
, , , , :
If-None-Match: "any-type-of-tag-or-hash"
, , 304 Not Modified . .
40

Expires CacheControl , , .
GET- , ,
:
http://testdomain.com/global.css?v1
http://testdomain.com/global.css?20080901

:
http://testdomain.com/global.v1.css
,
-, GET-,
,
:
.
RFC-2616 HTTP- . , . .
1.5. -
- , - ,
, HTML CSS,
JavaScript.
, .
1.5.1.
HTML-, ,
. ,
41
CSS-, , .
-
CSS- ,
. , . .
HTML-. .
,
, HTML- CSS-.
-. , ,
-, . , .
CSS-expressions Internet Explorer. Expressions JS-, . , expressions ,
expressions.
. ,
42
#header .menu li a ,
#header .menu-item. ,
, , menu , ,
header. , .
, , , , , .
CSS- ,
.
1.5.2. -
-,
, -,
. - , .
, :
;
CSS- ( ,
);
DOM-;
: class, font,
display, visible, margin, padding, width, height;
, , , :hover.
, , ,
:
DOM-, - , , ;
CSS-,
CSS-;
43
, , position: absolute position: fixed;

DOM-,
;
,

.
1.6. -
HTML-
.

.
,
:
1. HTML-;
2. CSS, HTML-;
3. JavaScript,
HTML- <head>;
4. JavaScript HTML-
<body>,
.
1.6.1.
CSS
, CSS- .
, <style>, , -
44
, , .
, , -, <head>,
<link>, CSS-,
, <style>.
JavaScript
- , JavaScript
-, , JS-, , .
, JS-. JS- ,
.

-
CSS JS.
<head>
<script type="text/javascript" src="script-1.js"></script>
<link rel="stylesheet" type="text/css" href="style-1.css" />
</head>

JavaScript, CSS JS
JS
.

, CSS,
.
<head>
</head>
45

JS.
JavaScript, .
, JavaScript , . JS .
. 1.12.

, , .
, ,
. , .
1.6.2.
. .
1. , , , JavaScript-.
2. , , JavaScript.
46
3. -
- ,
-

.

CSS JavaScript <head>
HTML-. .
, , , , . , .
, , -.
HTML-, . JavaScript
, , .

.
- ,

.
, .
,
.
,

.
.
47
-
HTML-, JavaScript.
, - .
JavaScript, , ,
, - . .
:
, , , ..;
JavaScript
, , ;
, .
data:URI CSS, base-64.
, , , .

, ,
Safari,
.
, ,
-. , ,
, .
, . , , JavaScript
CSS.
,
, .
48
1.6.3. (CDN)

, 2 8 . (CDN), ,
( , ).
, HTML-. . ,
- .
,
CSS, JavaScript
.

, .

, 5 (1 4 ) , . 60% .
(CDN)
.
49
2.
,
, . , , , - .
,
. .
2.1. ,
Accept-Encoding
, . , , ,
50
, ( Content-Encoding), .
, , Accept-Encoding Opera 10.00:
Accept-Encoding: deflate, gzip, x-gzip, identity, *;q=0
, : deflate
gzip. x- , , gzip x-gzip ( compress x-compress) . identity ()
, . , , .

:
gzip (x-gzip) gzip deflate
DEFLATE (RFC 1951), LZ77 . gzip (RFC
1952) ,
, (CRC32)
;
deflate (x-deflate)
DEFLATE ;
compress (x-compress) ,
UNIX- compress. Compress
LZC, LZW (Lempel
ZivWelch), ,
LZ78;
bzip2 (x-bzip, bzip)
bzip2, , compress DEFLATE, . bzip2
-, MTF- (move-to-front) ;
sdch (Shared Dictionary Compression Over HTTP)
, Google 2008
.
(, , , CSS- JavaScript-). VCDIFF (RFC3284), (, gzip).
51
sdch
,
HTML-, :

gzip/deflate
bzip2
Compress
132023
88263
222091
587828
gzip bzip2 , , ,
,
. , , .
compress, . bzip2, , ,
OmniWeb, w3m, lynx Google Chrome.
Gzip
bzip2
189058
189058
3,333 / 44572
40,282 / 32247
3,519 / 42685
43,716 / 29690
4,713 / 42685
43,765 / 29690
5,274 / 39111
44,213 / 29690
6,526 / 37039
43,704 / 29690
8,036 / 36206
43,814 / 29690
9,098 / 35940
43,934 / 29690
12,87 / 35713
43,725 / 29690
14,319 / 35707
45,129 / 29690
52
PHP, gzcompress , , gzip bzip2 , ,

.
bzip2 ,
( ),
:
100 900 .
, , , ( 184,5 ) , bzip2 , .
bzip2
, ,
.
gzip, , ,
, , .
, gzip 10 , , Comtech AHA
Corporation.
2.2. , - firewall
, , . ,
, .
, HTML,
CSS JavaScript.
2.2.1. Opera
gzip deflate.

- , .
53
2.2.2. Internet Explorer

gzip deflate.
, , .
, , ,
,
.
, ,
Internet Explorer 6.0 SP1. , Service Pack 2 . , Useragent: SV1 (Security Version 1),
.
, , , , .
0,5%
, , IE6SP1, , : 13%*, IE6, Windows Vista, SP2.
2.2.3. Konqueror
gzip deflate.
, 3.1
deflate. , - , , deflate .
gzip
JavaScript CSS. , ( 0,1%).
2.2.4. Mozilla Firefox
gzip deflate.
Firefox 3.0x CSS JavaScript, , , 3.0 *
w3schools LiveInternet.
54
HTTPS, Keep-Alive.
26%.
2.2.5. Safari
gzip deflate.
JavaScript- CSS-, , URL, , .gz, .
2.2.6. Google Chrome
gzip, deflate, bzip2, sdch.
CSS JavaScript: ,
.

6%.
bzip2 -
-,
, .
2.2.7. firewall
firewall ,
.
-. , ,
, . .
Vary, ,
, ,
. .
(, WinGate,
Kerio WinRoute) ,
, , ,
55
,
(, Cache-control: private).

Via, HTTP- 1.1 (RFC 2616). HTTP 1.0 ,
.
( Google) Velocity09 (http://velocityconference.
blip.tv/file/2293022/), : firewall , . -
Accept-Encoding. , 15% .
firewall (,
Accept-Encoding X-cept-Encoding),
.
,
, Accept-Encoding, User-agent, , Internet Explorer 8.0 Firefox 3.5 gzip.
, .
:
Accept-Encoding (<iframe>) HTML JavaScript , cookie
JavaScript. , cookie
. , , .
, .
2.3. - Apache, nginx lighttpd

: . : , ; ,
56
,
.
, , .
2.3.1. Apache
Apache 1.x , : mod_deflate mod_gzip.
. , ; :
, , ,
.
Apache 2.x mod_deflate (
Apache 1.x).
,
Apache 1.x mod_deflate, , . , , .

mod_setenvif, .
# Apache 1.x mod_deflate ( mod_setenvif)
#
DeflateEnable on
# Internet Explorer 4.0,
#
DeflateDisableRange "MSIE 4."
#
# , ,
#
DeflateHTTP 1.0
# , -,
# WinRoute, Kerio WinRoute
DeflateProxied poor_cachable
57
# Vary ,
# IE 4.06.0SP1 , ,
# Vary,
#
DeflateVary on
#
DeflateCompLevel 9
DeflateHash 128
DeflateWindow 32
# ap_bflush,
# (,
# Chili!Soft ASP).
# ,
DeflateIgnoreFlush on
# ,
DeflateMinLength 100
# ,
DeflateType text/html text/css text/xml application/xml image/x-icon
DeflateType application/x-javascript text/plain
#
# CSS JavaScript (
# , , "no_gzip"
# , )
SetEnvIf
Content-Type text/css no_gzip
SetEnvIf
Content-Type application/x-javascript no_gzip
SetEnvIf
Content-Type image/x-icon no_gzip
# MSIE < 6SP1,
# IE ""
BrowserMatch "MSIE [456]" no_gzip
BrowserMatch "SV1;" !no_gzip
BrowserMatch "Opera" !no_gzip
BrowserMatch "MSIE ([789]| [1-9][0-9])" !no_gzip
# Firefox > 3
BrowserMatch "Firefox/(3\.[^0]|[4-9]|[1-9][0-9])" !no_gzip
mod_gzip
,
, .
58

( gz1 level = 6
gz1_init).
mod_gzip CSS JS
, .
.
# Apache 1.x mod_gzip
<IfModule mod_gzip.c>
# gzip
mod_gzip_on
Yes
#
# .gz, , CPU
#
mod_gzip_can_negotiate
Yes
# .gz
mod_gzip_static_suffix
.gz
#
# Content-Encoding: gzip
AddEncoding
gzip .gz
# ,
#
# , ,
# -
mod_gzip_update_static
No
# ,
# :
mod_gzip_minimum_file_size 1000
# ,
# , mod_gzip
# ,
# ,
mod_gzip_maximum_file_size 500000
59
# ,
# , ,
# , 60000
# ,
# 64
#
mod_gzip_maximum_inmem_size 60000
# ,
# gzip- . ,
# . 1.1
# HTTP Via,
# , ,
# 1.0 ,
# 1.0
mod_gzip_min_http
1000
# (IE 6.0SP1)
# - Opera MSIE,
# , Apache
# POSIX Extended Regular Expression,
# .
# , ,
# ,
mod_gzip_item_exclude
reqheader "User-agent: MSIE
[456]([^S]V|[^S]V1|[^V]1|1[^;]|SV[^1]|[^SV1])+$"
# .html
mod_gzip_item_include
file
\.html$
#
# MIME-
mime
^text/html$
mime
^text/plain$
mime
^httpd/unix-directory$
# ( )
mod_gzip_item_exclude
mime
^image/
# 'Transfer-encoding: chunked' gzip-,
#
mod_gzip_dechunk
Yes
60
# Vary ,
# -
mod_gzip_send_vary
On
</IfModule>
<IfModule mod_headers.c>
# -
<FilesMatch .*\.(html|txt)$>
Header set Cache-Control: private
</FilesMatch>
</IfModule>
Apache 2.x, mod_deflate,
. : , , HTML-
CSS/JS .
, ,
,
.
, Apache, mod_setenvif, ,
mod_deflate .htaccess, virtual host .
# Apache 2.x mod_deflate ( mod_setenvif)
# gzip
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
# favicon.ico
AddOutputFilterByType DEFLATE image/x-icon
# CSS- JavaScript-
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/x-javascript
#
#
#
#
(9)
(15). ,
1,
20%.
61
DeflateCompressionLevel 9
DeflateWindowSize 15
DeflateBufferSize 32768
# ,
#
# MSIE < 6SP1,
# IE ""
BrowserMatch "MSIE [456]" no_gzip dont-vary
BrowserMatch "SV1;" !no_gzip !dont-vary
BrowserMatch "Opera" !no_gzip !dont-vary
# Firefox < 3.5, CSS/JS
BrowserMatch "Firefox/[0-3]\." gzip-only-text/html
BrowserMatch "Firefox/3\.[1-9]" !gzip-only-text/html
# Chrome
BrowserMatch "Chrome/2" gzip-only-text/html
# Safari
BrowserMatch "Safari" gzip-only-text/html
# Konqueror
BrowserMatch "Konqueror" gzip-only-text/html
# - User-Agent
#
Header append Vary User-Agent env=!dont-vary
# - ,
# ,
<FilesMatch .*\.(css|js|php|phtml|shtml|html|xml)$>
Header append Cache-Control: private
</FilesMatch>
2.3.2. nginx
- nginx ( engine X)
: ngx_http_gzip_module
ngx_http_gzip_static_module
.
62
# nginx, ngx_http_gzip_module ngx_http_gzip_static_module

# " "
gzip on;
# , , text/html ,
#
gzip_types
text/plain text/css application/x-javascript
text/xml application/xml application/rss+xml text/javascript
image/x-icon;
#
gzip_min_length 1000;
#
gzip_comp_level 9;
# HTTP ,
#
gzip_http_version 1.0;
# Vary
gzip_vary on;
# ,
#
# Expired, Cache-contol: no-cache, Cache-contol: no-store,
# Cache-contol: private Authorization
gzip_proxied expired no-cache no-store private auth;
# MSIE < 6.0SP1, 0.8.11
# Internet Explorer 6.0SP2
gzip_disable msie6;
# , nginx
# - ,
# CSS JavaScript , ,
# .css .js,
location * \.(css|js) {
#
# ".gz",
gzip_static on;
63
# CSS JS
gzip_disable Firefox/([0-2]\.|3\.0);
gzip_disable Chrome/2;
gzip_disable Safari;
}
2.3.3. lighttpd
- lighttpd (lighty) (mod_compress, mod_deflate), . gzip deflate, bzip2, - -.
mod_compress
, , .
ETag. , ETag, .
, , ( ,
10 ):
find /var/www/cache -type f -mtime +10 | xargs -r rm
mod_compress . .
# Lighttpd, mod_compress
#
server.modules += ("mod_compress")
# , ,
# bzip2
# - deflate - Konqueror
compress.allowed-encodings = ("gzip")
# ,
compress.cache-dir = "/var/www/cache/"
64
compress.filetype = ("text/plain", "text/html", "text/xml",

"application/xml", "application/rss+xml", "image/x-icon")
# , , 500KiB
compress.max-filesize = 500000
# , URL
$HTTP["url"] =~ "\.(css|js)$" {
$HTTP["useragent"] != "Firefox/([0-2]\.|3\.0)" {
$HTTP["useragent"] != "Chrome/2|Konqueror" {
compress.filetype += ("text/css", "application/
x-javascript", "application/javascript",
"text/javascript")
}
}
}
$HTTP["useragent"] = "MSIE [4-6]" {
$HTTP["useragent"] != "SV1|Opera" {
compress.filetype = ()
}
}
mod_deflate, 1.5.0
( 1.4.x),
.
# Lighttpd, mod_deflate
#
server.modules += ("mod_deflate")
deflate.enabled = "enable"
#
deflate.compression-level = 9
deflate.mem-level = 9
deflate.window-size = 15
# , ,
# bzip2 - deflate - Konqueror
deflate.allowed_encodings = ("gzip")
# ,
65
deflate.min-compress-size = 1000
# - ,
# JS CSS,
deflate.mimetypes = ("text/plain", "text/html", "text/xml",
"application/xml", "application/rss+xml", "image/x-icon")
#
deflate.work-block-size = 512
# IE
$HTTP["useragent"] = "MSIE [4-6]" {
$HTTP["useragent"] != "SV1|Opera" {
deflate.enabled = "disable"
}
}
# , URL
$HTTP["url"] = "\.(css|js)$" {
$HTTP["useragent"] != "Firefox/([0-2]\.|3\.0)" {
$HTTP["useragent"] != "Chrome/2|Konqueror|Safari" {
compress.filetype += ("text/css", "application/
x-javascript", "application/javascript",
"text/javascript")
}
}
}
2.4.
, , PHP,
. , , , , , , , .
<?php
class mod_compress
{
//
66
//
static public $deflatelevel = 9;
// ( ),
// (0 )
static public $minsize = 0;
//
static public $maxsize = 500000;
//
static private $supported = null;
static public function init()
{
// gzip?
if (!self::issupportgzip()) {
return self::$supported = false;
}
// , ?
$type = self::detecttype();
if ($type == 'unknown') {
}
$ua = $_SERVER['HTTP_USER_AGENT'];
// ,
// ,
// MSIE < 6.0SP2
if (preg_match('/MSIE [4-6](?:.(?!Opera|SV1))+/', $ua)) {
}
// CSS/JS,
//
if (
$type == 'notsafe' &&
preg_match('@Chrome/2|Konqueror|Firefox/
(?:[0-2]\.|3\.0)@', $ua)
) {
}
return self::$supported = true;

}
// gzip
static private function issupportgzip()
{
foreach (preg_split('/\s*,\s*/',
$_SERVER['HTTP_ACCEPT_ENCODING']) as $method) {
//
// () , ,
// "bzip2;q=0.9, gzip;q=0.1"
// ,
// , ,
// bzip2,
// gzip
$method = explode(';', $method, 2);
// gzip,
//
if ($method[0] == 'gzip' ||
$method[0] == 'x-gzip') {
return true;
}
}
return false;
}
// "" ""
static private function detecttype()
{
//
$notsafe = array('text/css', 'text/javascript',
'application/javascript',
'application/x-javascript',
'text/x-js', 'text/ecmascript',
'application/ecmascript', 'text/vbscript',
'text/fluffscript');
//
67
68
$safe = array('text/html', 'image/x-icon',

'text/plain',
'text/xml', 'application/xml',
'application/rss+xml');
foreach (headers_list() as $header) {
if (stripos($header, 'content-type') === 0) {
$header = preg_split('/\s*:\s*/', $header);
$type = strtolower($header[1]);
if (in_array($type, $safe)) return 'safe';
if (in_array($type, $notsafe))
return 'notsafe';
return 'unknown';
}
}
// , Content-type , ,
// text/html
return 'safe';
}
//
static private function checksize($len)
{
if ($minsize && $len < $minsize) return false;
if ($maxsize && $len > $maxsize) return false;
return true;
}
// ,
static private function checkproxy()
{
// HTTP 1.1 ,
// , Via, HTTP/1.0
//
return $_SERVER['SERVER_PROTOCOL'] == 'HTTP/1.0' ||
isset($_SERVER['HTTP_VIA']);
}
// , , ,
//
static public function handler($content, $stage)
{
// (
// )
if ($content == '' ||
!self::checksize(strlen($content))) {
return $content;
}
if (self::$supported === null) {
self::init();
}
// ,
if (self::$supported === false) {
return $content;
}
// - ,
//
//
//
header('Vary: User-agent, Content-encoding');
//
//
//
if
,
,

(self::checkproxy()) {
header('Cache-control: private');
}
return self::compress($content);
}
static public function compress($content)
{
// gzip'
$content = gzencode ($content, $deflatelevel,
FORCE_GZIP);
69
70
// ,
// ** :
//
header('Content-length: ' . strlen($content));
//
header('Content-encoding: gzip');
return $content;
}
}
ob_start(array('mod_compress', 'handler'));
//
, . handler, ob_start, , .
, , ob_start ,
.
, bzip2 (
bzip2, x-bzip bzip), . bzip2 PHP .
: gzip
ob_gzhandler,
, , .
:
, , , ;
gzip, ,
;
,
, , ;
, Internet Explorer
, , 6.0 Service Pack 2, CSS
JavaScript ,
;
, , , , ,
71
, , -;
,
, .
2.5.
,
,
,
, , ,
.
, ,
. canvas, JavaScript, JavaScript.

Nihilogic (http://blog.nihilogic.dk/2008/05/compression-using-canvasand-png.html); , ( ), , 2001 JUnix (http://junix.kzn.ru)
, jzip.
2.5.1. canvas
canvas Apple , HTML5. JavaScript
.
, ,

, (GIF,
PNG).
canvas drawImage ( Firefox 1.5 , Safari 2.0 , Opera 9.0 , Google Chrome).
, canvas , , JavaScript.
20 50%. , jQuery 1.2.3
72
53 17, 32% ( : gzip 15,5 ,

bzip2 14,6 ).
, JavaScript,
, :
var codeimg = new Image()
// ,
codeimg.onload = function () {
var code = '' // ,
var size = 119 // ( )
var canvas = document.createElement("canvas")
canvas.width = canvas.height =
canvas.style.width = canvas.style.height = size
var inner = canvas.getContext("2d")
// CANVAS
inner.drawImage(codeimg)
//
var data = inner.getImageData(0, 0, size, size)
for (var i = 0, len = data.length; i<len; i+=4) {
if (data[i] > 0) code += String.fromCharCode(data[i])
}
eval(code)
}
// URL ,
codeimg.src = 'image-with-our-code.png'
, PHP ,
, ,
.
CSS eval DOM <style> .
, ,
.
73
. 2.1. Prototype ( 1.6.0.2),

30 PNG ( 24%)
. -, - ,
. -,
(200-500 ) . -,
(, IE). -, UTF-8 (,
, ).
, ,
, ,
,
.
,
.
( , ) .
2.5.2. , JavaScript
JavaScript
, .
- :
JavaScript , : , , .
74
, . JavaScript Firefox, Safari Google Chrome . , JavaScript LZW (LempelZiv-Welch, GIF PDF) (http://zapper.hodgers.com/labs/?p=90)
Prototype 1.6.0.2 ( 123 )
.
, , ,
, Internet Explorer 8.0 0,3
.
,
gzip , JavaScript, - .
, Packer
(http://dean.edwards.name/packer/), , Base62, 62 .
, ( ), , 62 . . .
,
.
75
3.

, ,

: GIF, JPEG, JPEG2000, PNG,
APNG, MNG, ART, WMF, EMF, BMP,
ICO, XBM, SVG, CUR, ANI, WBMP, TIFF.
(
ART XBM Internet
Explorer MNG Firefox),
(, WBMP
JPEG2000 WebKit/KHTML), , , GIF, JPEG PNG.
SVG, , , , Internet
Explorer; , ,
. , .
ICO , : , -, , , .
, : GIF, JPEG, PNG SVG,
, , , -
76
, .
.
3.1. GIF (Graphics Interchange Format)

1987 CompuServe
: GIF87a GIF89a. ,
, .
( XBM), , :
256 .
PNG, ,
, JPEG.
, - ,
(APNG, MNG, SVG)
. GIF , PNG.
3.1.1. 1:
GIF . 8
, . :
, . LZW, GIF,
.
, ,
, .
Adobe Photoshop Lossy
Save for Web (Ctrl+Shift+Alt+S) GIF.
, , , . , , - -
77
, , Lossy,
.
. 3.1. Lossy 13
596 281
, , .
GIF : ( ), , (, ), ,
.
3.1.2. 2:
, , . -
78
, .
:
2, 4, 8, 16, 32, 64, 128, 256, .
, , 200 , 256 , 56 . , .
, ,
, ,
GIF .
Adobe Photoshop : Perceptual, Selective, Adaptive Restrictive (Web).
: 216 , 256 .
Perceptual ,
; ,
.
Selective ; .
Adaptive , ; , , , .
,
. , Photoshop No Dither, Diffusion, Pattern Noise. ,
, , .
,
,
Adobe Photoshop.
3.1.3. 3:
GIF . , , , .
79
, GIF ,
.
494 , 310 . 10 , GIFTUBE,
, 7,63 . 411 , ; , 21,95 .
Gifsicle 1.5
258 (17%) 7,63 (0%)
21,53 (2%)
GIFLite 2.10
275 (11%) 6,19 (19%)
19,22 (12%)
SuperGIF 1.5
188 (40%) * 17,78 (19%)
Advanced GIF
Optimizer 4.0.12
250 (19%) 7,63 (0%)
21,57 (2%)
Real GIF Optimizer 3.0.5 250 (19%) 7,63 (0%)
21,57 (2%)
Ultra GIF Optimizer 1.02 250 (19%) 7,63 (0%)
21,57 (2%)
A Smaller GIF 1.22
293 (5%)
7,63 (0%)
21,89 (>1%)
* SuperGIF ( ), .
, SuperGIF ( BoxTop Software,

$49,95), :
. ,
, GIFLite,
White River Software ( $30,
), 1995 (
DOS).
80
SuperGIF , GIFLite :
,
,
. , Windows:
@ECHO OFF
REM "BOLK" . 2007.
MKDIR GIFLITE.$$$ 2>nul
REM GIF
FOR /R %%N IN (*.gif) DO @CALL :method %%N
REM ,
DEL /Q giflite.tmp 2>nul
RMDIR /S /Q GIFLITE.$$$
EXIT
:method
REM
FOR %%M IN (0 1 2 3) DO @CALL :giflite %%M %%~s1 %1
REM
REM ()
FOR /F "usebackq skip=3" %%R IN (`DIR /B /O-S GIFLITE.$$$`)
DO @CALL :getresult %%R %1
GOTO :EOF
:getresult
REM ,
MOVE /Y GIFLITE.$$$\%1 %2
DEL /Q GIFLITE.$$$\*.*
GOTO :EOF
:giflite
REM
GIFLITE.EXE -t -h -m%1 -o %2 GIFLITE.$$$\%1
GIF .
81
3.1.4. 4:
GIF , , . GIF : ,
, : ,
.
,
(, ),
, , . , . , ,
.
3.1.5. 5: GIF PNG
GIF,
.
GIF :
, , 256 ( 1616, 256 , ,
). , . ,
, .
. 3.2. ,
GIF, PNG
82
,
. , ,
itsagif, Pedagoguery Software.
itsagif , GIF PNG
300
1000. , , PNG GIF, , .
756488 1073 . PNG, PNGout, 77,6 , GIF 68,4, 12%.
3.1.6.
. (PNG) GIF : ,
.
, , Lossy (Adobe Photoshop). Lossy
.
.
GIFLite
SuperGIF, .
,
, , . , , itsagif Pedagoguery Software, ,
, PNG.
3.2. JPEG (Joint Photographic Experts Group)

JPEG 1992 Joint
Photographic Experts Group, -
83
. , JPEG
,
,
JPEG, JFIF (JPEG File
Interchange Format),
JPEG,

.
GIF JPEG
:
, ,
. ,
0 100, (, : Paint Shop Pro
, ). , , ,
- .
GIF, Mosaic,
, . ,
. , .
JPEG : JPEG2000,
, JPEG-LS .
, .
3.2.1. JPEG
, JPEG. ,
, .
-, Internet Explorer, , JPEG (
): ,
JPEG, , . , , , .
84
-, (, Photoshop)
JPEG CMYK, . , ( Firefox 2, Internet Explorer 6, Google Chrome 2)
, Safari, 4, .
. 3.3. Adobe Photoshop
-, Firefox ( 3.5.3)
Windows JPEG-: . : Photoshop,
#5c6264 80%.
3.2.2. 1:

. , ,
: Adobe Photoshop GIMP.

, , JPEG.
85

800600. : , , , , , .

: , .
Adobe Photoshop CS2
198,4
108,7
35,9
GIMP 2.6.6
124,3
73,5
28,9
GIMP:
.
. 3.4. JPEG GIMP
, ,
EXIF , -
86
( ), 22,
11, 11 DCT .
( ) . , . : , 4:2:2

. : 4:2:0
22 .
4:2:0 22, 4:4:4 11. , GIMP , . , 22, 11, 11 : 22
, , .
,
. ,
4:2:2 , 4:2:0 , .
DCT .
, ( ), . ,
.
, .
, .
75%
, 10 , 94% , .
Internet Explorer, , , , .
():
, . GIMP JPEG- .
(, )
,
.
87
,
: (contrast) / (saturation), JPEG.
.
75% ,
, . , 50%. 95%,
, . 100% , .
,
JPEG Optimizer
Xat. , GIMP, ,
.
. 3.5. Xat JPEG Optimizer
,
JPEG . ,
, .
- JPEG Optimizer , ,
,
(Options Expert Mode).
88
, .
, . , ,
, . Compress Much More (F8) Freehand Selection (F9), Rectangle Selection (F10) Line
Selection (F11) .
, ,
Compress Even More (F7) Compress
More (F6). - , , Undo (Ctrl-Z) Remove Extra Compression (F5) .
, 3-20%
GIMP, .
3.2.3. 2:
JPEG- : YCbCr .
. , 88
.
. 3.6. JPEG
() ()
, JPEG . ,
89
? : 88 ,
88 ,
.
, , 88.
Photoshop Grid
(Ctrl+), (Ctrl+K, Ctrl+6) .
, Photoshop JPEG 0-50
816.

,
.

, (downsampling) , . , . GIMP 11, 11, 11, cjpeg -sample 1x1, Photoshop
,
50%.
3.2.4. 3:

JPEG. 2, (,
) .
, JPEG
YCbCr,
.
, , , .
Photoshop Lab, L ,
a b , , .
, .
700432, : ,
.
90
. 3.7. ,

, Photoshop 55%, 105,5 .

Photoshop
Lab (Image Mode Lab Color), ,
(Image Dublicate).
, .
a b (Ctrl+2,
Ctrl+3), , :
. 3.8. , b
91
.
a (Ctrl+2), ( Lasso Tool)
Median (Filter Noise
Median). Radius ,
. 24,
34.
(Ctrl+~),
, .
Levels (Ctrl+L). ,
.
b. JPEG 10%.
3.2.5. 4:

. : , , ,
EXIF.
EXIF , .
, . JPEG-:
. .
, ,
360 , 10,94 .
.
JPEG ( )
. ,
.
92
PureJPEG 1.0
10,82 (1%)
jpegtran 08-Feb-2005
10,67 (2,4%)
Jpegoption 1.2.2
10,78 (1,7%)
jpegtran Independent JPEG Group, .

.
3.2.6.
, . , JPEG, ;
, Xat JPEG
Optimizer. , ,
88 ( 816,
Photoshop 0-50) , , . jpegtran.
3.3. PNG (Portable Network Graphics)

PNG 4 1995 ,
.
48 , (-),
- , , GIF, .
, GIF,
, PNG
, .
,
, -
93
. - APNG
PNG;
, ,
.
APNG Opera ( 9.5)
Mozilla Firefox ( 3.0 ).
3.3.1. PNG
, Internet Explorer. , ( ),
PNG:
Internet Explorer 4.0 PNG;
Internet Explorer 5.0 5.01 PNG object;
5.01
( -) Windows 98;
PNG 6.0:
4097 4098, IDAT ( SP1), ( , );
Internet Explorer 7.0 8.0 -
;
.
, ,
:
PNG Firefox 3,
3.5;
WebKit ( Safari Google Chrome)
PNG;
Opera
6.0, - 6.1,
,
: PNG, , .
, Internet Explorer PNG. -
94
: AlphaLoader,
- ,
VML, .
.
AlphaLoader .
(http://ap-project.org/Russian/
Article/View/83/Russian_translation/), . 27 (!) ,
78(!) .
VML : ,
VML, , , , .
Internet Explorer , , PNG , VML AlphaLoader
. , DD_belatedPNG (http://dillerdesign.com/experiment/
DD_belatedPNG/).
PNG
, . ,
-.
PNG . , , . , , , , .
, PNG , . ,
PNG JPEG Mac OS, Windows.
PNG , . optipng ,
PNGcrush:
pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png
outfile.png
95
, Adobe Photoshop ( CS4) , GIMP gAMA, .

3.3.2. PNG
PNG, , : ( ) 8 , (
24 ) 48 .
, PNG :
(256 -) ( GIF
100% , ).
, .
, ( -), 8 . - , ,
.
Adobe Photoshop
Save As
(Shift+Ctrl+S), Save for Web (Alt+Shift+Ctrl+S),
. , Photoshop , ,
Grayscale (Image Mode Grayscale).
. 3.9. , 24 (349 ),
8 (253 )
GIMP . , -
96
OptiPNG PNGout ( ), :
optipng -o7 dog.png -out dog-optimized.png
pngout /c0 dog.png dog-optimized.png

PNG 24 , . .
, ,
, , (RGB),
(RGB +
). , ( ) .

PNG . 3.10. PNG Internet
Explorer 6.0
97
,
(RGB), RGBA (, ,
-).
Photoshop, , ,
optiPNG ,
256 , . Improved
PNGNQ, ( 16
256) .
Internet Explorer 6.0
. , PNG ,
, , GIF
, , , IE PNG.
3.3.3.

, .
, , ,
?
: PMT (PNGcrush),
optiPNG PNGout. pngout
, , optiPNG ( blog.ad.by):
@ECHO OFF
IF "%1"=="" EXIT 1
FOR /F "usebackq delims==,IDAT tokens=5" %%i in
(`optipng -o4 -full -sim "%1"`) DO SET f=%%i
IF "%2"=="" (
pngout /k0 /n2 /f%f:1,1% "%1" || EXIT 3
) ELSE (
pngout /k0 /n2 /f%f:1,1% "%1" "%2" || EXIT 3
)
10 :
( 24 ), (
24 ), (8 )
(8 ).
98
optiPNG 0.6.3
4,52
(5%)
4,75 (9%)
PNGout 21
Jun 2009
4,38 4,55 (13%)

(8%)
2,57 495,13
(24%) (11%)
PNGcrush 1.6.15
4,55
(4%)
4,99 (4%)
3,20 515,21
(5%)
(8%)
PNGoutwin 1.0.1
4,54 M
(4%)
4,07 (22%) 3,07 484,87

(9%) * (13%)
2,67 510,01
(21%) (9%)
* PNGoutwin
: 8 ; ( , ), PNGoutwin
2,56 (24%).
, PNGoutwin, PNGout ( optiPNG ),

PNGcrush.
3.3.4. Lossy GIF
, PNG
, GIF, , ;
.
PNG
Adobe Photoshop , Lossy.
, , GIF,
, .
PNG , .
GIF, PNG.
3.3.5.
.
, -
99
.
,

.
Photoshop
Image Adjustments
Posterize, GIMP Color
Posterize.
.
, .
, : ,
.
3.3.6. Photoshop
PhotoFreebies plugin suite,
.
. 3.11. (226,3 )
100
Photoshop (Image Duplicate), (Filter Photo Wiz Remove Transparency) (Image Mode Indexed Color).
50 : ,
, Preserve Exact
Colors. Diffusion Dither Amount 30% ( , , ).
RGB , .
(Alt+Ctrl+G) .
164,5 , 27%.
3.3.7. Color quantizer
, ,
, - ,
,
.
, , , Color quantizer (http://x128.ho.ua/).
, 256 .
394 PNG 116,8 .
, ,
. , ,
. ( ), ,
. , .

, , ,
.
101
. 3.12. Color quantizer,
, ,
, , . , .
:
( ,
), , , , .
RGB/YUV
. mse/msad/psnr
. OK ,
, ,
.

, (Weight), (Color) (Light). , , , , , .
102
, .
120 , ,
, .
;
, , Dithering, , .
66,48 , 43% , .
.
:
PNGout (
), , , ( ), , .
(,
), . , .

. ,
+ .
3.3.8. Adobe Photoshop
Photoshop CS4 ,
, Color quantizer, . Photoshop ,
, , , .
, , ; PNG-8.
Dither , ,
- .
, , (Channel),
, -
103
. 3.13. Photoshop
. : , Photoshop
.
Channels
, color. RGB,
, ,
. , , .
, Save for Web
(Alt+Shift+Ctrl+S), . , Color quantizer,
, .
3.3.9.
, , , , , , , .
, .
Ctrl Layers,
Channels Save selection as channel
(. 3.15).
104
. 3.14. ,
(2,44 )
. 3.15.
, . (Ctrl+D),
(Ctrl+I) Threshold (Image Adjustments
Threshold).
105
Threshold ,
.
Ctrl
Channels Median (Filter Noise Median).
; ,
.
Threshold, 138, Median, 4,
440 (18%) .
3.3.10.
Adobe Photoshop
, PNG.
Photoshop - ,

(, Lasso Tool)
,
, Save For Web
(Alt+Shift+Ctrl+S).
. 3.16. Elliptical Marquee Tool
,
, . , .
106
XnView, , .
. 3.17. XnView
, Photoshop .
, .
, : Ctrl+
Layers, (Ctrl+Shift+I), ( Delete)
(Alt+Shift+Ctrl+S).
, , : Ctrl+
Layers, ( Q),
Image Adjustments Threshold
OK, ( Q) (Ctrl+Shift+I).
(Edit Fill),
(Ctrl+Shift+I) ( Add Layer Mask ). .
7%. ,
, .
, PNG ( ),
- , , .

.
107
3.3.11.
: , , , ,
. , , .
, , .
Photoshop. , . ,
Ctrl Layers, Channels , Save
selection as Channel.
(Ctrl+D) Threshold (Image
Adjustments Threshold), . .
Ctrl Alpha 1, Layers, Layers via Cut (Shift+Ctrl+J). , . PNG
( GIF), (, ), PNG.
1 , 59%.
3.3.12.
PNG .
, :
, ?
? ? Photoshop, - ?
.
3.4. SVG (Scalable Vector Graphics)

SVG VML
(Vector Markup Language), Microsoft,
108
Macromedia, Autodesk, Hewlett-Packard Visio Corporation, PGML

(Precision Graphics Markup Language),
Adobe Systems, IBM, Netscape Sun Microsystems.
SVG 1999 , , ,
. , Microsoft SVG
Internet Explorer 8.0, ,
Microsoft SVG.
SVG , , , , XML.
, , .
, ,
Nokia S60 Platform: Vector Graphics Optimization , Nokia .
- SVG
. .
, ,
( 83%), .
3.4.1.
,

SVG.
, ,
, .
109
, , CSS- SVG, :
, g.
path :
, h v , s t
.
, SVG .

.
- , ,
, , .
, :
, ,
, .
, , .
,
.
, ,
.
3.4.2. SVG

.
?
Adobe (Macromedia) FreeHand , , Windows Mac, :
SVG Macromedia Adobe,
(. 3.18).
Adobe Illustrator ,
, , , SVG. Windows Mac (. 3.19).
110
. 3.18. Macromedia FreeHand MX
. 3.19. Adobe Illustrator
111
Inkscape , , , SVG.
Linux, Mac Windows (. 3.20).
. 3.20. SVG Inkscape
. 3.21. GIMP
112
GIMP Adobe Photoshop,

,
. SVG. Linux, Mac, Windows (. 3.21).
Sketsa , Java SVG (. 3.22).
. 3.22. Sketsa
3.4.3.
,
SVG.
Java,
.
PHP, http://bolknote.ru/files/
svgcrush.phps
113
, . ,
, -f, . :
php svgcrush.php -fpicture.svg > optimized.svg
.
1. SVG XML, , ,
XML ,
.
2. Inkscape, SVG , . , .
3. d path , .
56 ,
, . path d, .
4. (style), , ,
, , fill stroke, , . , ,
(#aabbcc #abc).
5.
, ,
(0.05000 .5).
6. id . <script> <style>, .
, , . , , (tan, red, plum), , rgb(r,g,b) #rrggbb
.
114
:
php svgcrush.php [] -f > _
, :
-f , ;
-r (. 3) d, path,
1 9, 1;
-D (
4);
-C ( ,
4);
-I ID ( 6);
-F XML ( 1).
Open Clip Art Library 0.18 SVG. 2875 ,
:
1% 83%, 50%. ,
, , SVG.
3.4.4. gzip

, gzip deflate. SVG . ( XML-)
Adobe Systems, 5080% , .
-
.
3.5. -
, . , : , , ,
.
, : Yahoo! Smush.it
115
(http://smush.it) punyPNG (http://punypng.com), . , GIF

PNG ( ).
punyPNG , , -
PNG (Smush.it PNGcrush ) , 3.3.10,
. , .
Gracepoint After Five
(http://www.gracepointafterfive.com/punypng-benchmarks) PNG- -
PNG:
PunyPNG
Smush.it
OptiPNG
ImageOptim
Ask Image 01
22%
20%
20%
20%
Ask Image 02
46%
39%
40%
2%
Ask Image 03
8%
7%
7%
7%
Ask Image 04
35%
1%
33%
34%
Blocks
58%
0%
0%
0%
Butterfly
41%
1%
1%
1%
Facebook
63%
36%
61%
61%
NASCAR
37%
28%
28%
28%
Yahoo!
17%
9%
9%
9%
41% (112 K) 14% (37 K)
19% (51 K)
20% (53 K)
- API. Yahoo! API ,

. API punyPNG -
116
- ( ), .
API,
- URL. URL
. GET-, JSON.
Smush.it
URL, : http://smushit.eperf.vip.ac4.
yahoo.com/ysmush.it/ws.php
:
img URL , ;
id , , ;
callback , JavaScript,
(
JSON-).
: http://smushit.eperf.vip.ac4.yahoo.com/
ysmush.it/ws.php?img=http://www.publicdomainpictures.net/pictures/
2000/nahled/1-1222847524s7rl.jpg
{
"src":"http:\/\/www.publicdomainpictures.net\/pictures\/2000\/
nahled\/1-1222847524s7rl.jpg",
"src_size":50219,
"dest":"http:\/\/smushit.zenfs.com\/results\/3144140b\/smush\/
pictures%2F2000%2Fnahled%2F1-1222847524s7rl.jpg",
"dest_size":49198,
"percent":"2.03"
}
, dest , .
, : http://smushit.eperf.vip.
ac4.yahoo.com/ysmush.it/ws.php?img=http://bolknote.ru/imgs/2009.09.29.jpg
:
{
"src":"http:\/\/bolknote.ru\/imgs\/2009.09.29.jpg",
"src_size":148529,
"error":"No savings",
117
"dest_size":-1,
"id":"test"
}
, Smush.it
.
, , ( ) .
PunyPNG
- API, , ,
. , , , EXIF.

ZIP-.
URL, : http://www.gracepointafterfive.com/
punypng/api/optimize
:
img URL ;
key ;
group_id , ( ) .
:
http://www.gracepointafterfive.com/punypng/api/optimize?img=
http://www.conradchu.com/images/portfolio/targets.gif
&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
:
{
"original_url": "http://www.conradchu.com/images/portfolio/
targets.gif",
"original_size": 35071,
"optimized_size": 27922,
"optimized_url":"http://www.gracepointafterfive.com/punypng_staging/
attachments/514367d961c0c9c5ef80e02cc3381660b24d77d8/targets.gif.png",
"group_id": null,
"savings_percent": 21,
"savings_bytes": 7149
}
118
, , ,
optimized_url. ( group_id ), ZIP- URL
http://www.gracepointafterfive.com/punypng/api/download_zip?
group_id=
.
, :
http://www.gracepointafterfive.com/punypng/api/optimize?img=
http://libpng.org/pub/png/img_png/ pnglogo-grr.png&key=
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
:
{
"error": "Sorry, the max file size supported is 150KB."
}
150
, , , ,
50. , .
119
4.

, , . .
4.1.

, , , -
120
. , Web Optimizer .
4.1.1. CSS-
, CSS . media ( , ),
@import . . -.

CMS CSS- head ,
HTML-. :
/*
<link rel= "stylesheet"> <style type="text/css">
head- */
$regex =
"!(<link[^>]+rel\\s*=\\s*(\"stylesheet\"|'stylesheet'|stylesheet)
([^>]*)>|<style\\s+type\\s*=\\s*(\"text/css\"|'text/css'|text/css
)([^>]*)>(.*?)</style>)!is";
preg_match_all($regex, $this->head, $matches, PREG_SET_ORDER);
if (!empty($matches)) {
foreach($matches as $match) {
$file = array();
$file['tag'] = 'link';
$file['source'] = $match[0];
/* HTML- ,
*/
$file['content'] =
preg_replace("/(<link[^>]+>|<style[^>]*>[\t\s\r\n]*|[\t\s\r\n]*<\
/style>)/i", "", $match[0]);
/* */
preg_match_all("@(type|rel|media|href)\s*=\s*(?:\"([^\"]+)\"|'([^
']+)'|([\s]+))@i", $match[0], $variants, PREG_SET_ORDER);
if(is_array($variants)) {
121
foreach($variants AS $variant_type) {
$variant_type[1] = strtolower($variant_type[1]);
$variant_type[2] = !isset($variant_type[2]) ?
(!isset($variant_type[3]) ?
$variant_type[4] :
$variant_type[3]) :
$variant_type[2];
switch ($variant_type[1]) {
/* */
case "href":
$file['file'] = trim($this->strip_querystring($variant_type[2]));
$file['file_raw'] = $variant_type[2];
break;
default:
/* media="all|screen"
Safari @media all{} @media screen{} */
if ($variant_type[1] != 'media' || ($variant_type[1]
== 'media' && !preg_match("/all|screen/i",
$variant_type[2]))) {
$file[$variant_type[1]] = $variant_type[2];
}
break;
}
}
}
$this->initial_files[] = $file;
}
}
head ($this->head), $this->initial_files. , media , all ( ) screen ( ,
).

, . , -
122
@import ( ) .
resolve_css_imports:
function resolve_css_imports($src) {
$content = file_get_contents($src);
/* @import
*/
$content = preg_replace("!/\*\s*@import.*?\*/!is", "",
$content);
/* @import */
preg_match_all('/@import\s*(url)?\s*$?([^;]+?)$?;/i',
$content, $imports, PREG_SET_ORDER);
if (is_array($imports)) {
foreach ($imports as $import) {
$src = false;
/* */
if (isset($import[2])) {
$src = $import[2];
$src = trim($src, '\'" ');
}
if ($src) {
/* ,
@import */
$content = str_replace($import[0],
$this->resolve_css_imports($src), $content);
/* CSS- (
) ( ) */
$content = $this->resolve_relative_paths($src, $content);
}
}
}
return $content;
}
resolve_css_imports,
,
HTTP- .
123
, .
(http://speedupyourwebsite.ru/
books/speed-up-your-website/), @media. , :
$this->initial_files = array(
array(
'content' => ' ',
'media' => 'print|handheld|etc',
'file_raw' => ' head-'
),
...
)
CSS-
:
foreach ($this->initial_files as $file) {
if (!empty($file['media'])) {
$full_content .= '@media '. $file['media'] . '{';
}
$full_content .= $file['content'];
if (!empty($file['media'])) {
$full_content .= '}';
}
}
CSS-,
head, , . , file_raw, (, <head>) .
, ,
? Gzip- : (
).
124
CSS- CSS-. .
( ). Perl.
$data
$data
$data
$data
=
=
=
=
s!\/\*(.*?)\*\/!!g;
s!\s+! !g;
s!\} !}\n!g;
s!\n$!!;
$data = s! \{ ! {!g;
$data = s!; \}!}!g;
#
#
#
#
#

#

CSS Tidy (http://csstidy.sourceforge.net/)

CSS-. , ( class.csstidy.php) :
$css = new csstidy();
$css->load_template($root_dir . 'css.template.tpl');
$css->parse($css_code);
echo $css->print->formatted();
(css.template.tpl):
|{||{|||;|}||}||{||
YUI Compressor (http://developer.yahoo.com/yui/compressor/).
Java
. :
java -jar yuicompressor.jar -o output.css input.css
output.css.
125
CSS Tidy
Web Optimizer (http://www.weboptimizer.ru/).
, Intenet Explorer ( 8- ) 4096 (
MSDN, http://msdn.microsoft.com/en-us/library/aa358796(VS.85).aspx)
CSS- ( 32 @import).
CSS- .
4.1.2. JavaScript-
JavaScript- , .

-, ,
media:
$regex =
"!<script[^>]+type\\s*=\\s*(\"text/javascript\"|'text/javascript'
|text/javascript)([^>]*)>(.*?</script>)!is";
preg_match_all($regex, $this->head, $matches, PREG_SET_ORDER);
if (!empty($matches)) {
foreach($matches as $match) {
$file = array();
$file['tag'] = 'script';
$file['source'] = $match[0];
/* HTML- ,
*/
$file['content'] = preg_replace("/(<script[^>]*>
[\t\s\r\n]*|[\t\s\r\n]*<\/script>)/i", "", $match[0]);
$file['file'] = '';
preg_match_all("@(type|src)\s*=\s*(?:\"([^\"]+)\"|'([^']+)'
|([\s]+))@i", $match[0], $variants, PREG_SET_ORDER);
if(is_array($variants)) {
foreach($variants AS $variant_type) {
$variant_type[1] = strtolower($variant_type[1]);
$variant_type[2] = !isset($variant_type[2]) ?
(!isset($variant_type[3]) ? $variant_type[4] :
$variant_type[3]) : $variant_type[2];
126
switch ($variant_type[1]) {
case "src":
$file['file'] =
trim($this->strip_querystring($variant_type[2]));
$file['file_raw'] = $variant_type[2];
break;
default:
$file[$variant_type[1]] = $variant_type[2];
break;
}
}
}
$this->initial_files[] = $file;
}
}
: JavaScript-
.
,
- .
,
( ) .
: tiny_mce.js fckeditor.js.
, CSS- (
@import ).
JavaScript-
: JSMin (http://www.crockford.com/
javascript/jsmin.html , PHP) YUI
Compressor (http://developer.yahoo.com/yui/compressor/). ( ).
JSMin : (http://code.google.com/p/jsmin-php/),
:
require 'jsmin-1.1.1.php';
echo JSMin::minify(file_get_contents('example.js'));
127
, JSMin IE. (, Web Optimizer).

4.1.3.

, (
).
webo.in, 2,7
( 5,5 ) 5 JavaScript- (
15 ). 0,5-1
. ( gzip-,
85%) 60 , 0,6
100 /.
,
.
4.2. CSS Sprites

CSS Sprites.
CSS Sprites .
CSS Sprites .
4.2.1.
CSS Sprites, ,
background,

CSS1. ,

,
(
CSS
128
Sprites, ). , :
background-image .
data:URI, CSS
Sprites. ;
background-repeat
. no-repeat
, ,
CSS Sprites ( repeat);
background-position CSS Sprites,
.
(,
background-color), .
,
, ( ) (padding).
.
4.2.2.
, , :
, .
(, : CSS Sprites
).
- (
), CSS
Sprites . :
X Y.

( , em, % ). ,
, , . ( no-repeat)
129
(
). , background-position CSS Sprites , (, 100%
100%). , background-position, background-repeat .
.
PNG- JPEG- CSS
Sprites, : PNG- .
:
1. background-repeat: no-repeat, background-position: .
2. background-repeat: no-repeat, background-position: , .
3. background-repeat: repeat-x, .
4. background-repeat: repeat-x, .
5. background-repeat: repeat-y, .
6. background-repeat: repeat-y, .
7. background-repeat: no-repeat, background-position: 100% 0,
( ).
8. background-repeat: no-repeat, background-position: 0 100%,
( ).
9. background-repeat: no-repeat, background-position: 100% 0,
( ).
10. background-repeat: no-repeat, background-position: 0 100%, ( ).
11. background-repeat: repeat.
12. background-repeat: repeat-x background-repeat: repeat-y,
.
13. background-repeat: no-repeat, background-position: .
14. GIF-.
, , CSS Sprites. , -
130
CSS- background-position
CSS Sprites, .
CSS Sprites
.
4.2.3. : CSS Tidy
Auto Sprites (http://sprites.in/),
Web Optimizer (http://www.weboptimizer.ru/).
: .
CSS-,
, . CSS Tidy (http://csstidy.sourceforge.net/), , . CSS Tidy
PHP-,
- .
CSS- PHP:
/* $this css_sprites */
/* CSS Tidy,
$css_code*/
$this->css = new csstidy();
$this->css->parse($css_code);
/* CSS- , */
/* */
$this->none = 'none!important';
/*
@media-*/
foreach ($this->css->css as $import => $token) {
/* @media */
$this->media[$import] = array();
/* CSS- */
foreach ($token as $tags => $rule) {
/* CSS-
*/
/*
if
/*
/*
/*
/*
/*
/*
/*
/*
/*
/*
/*
131
foreach ($rule as $key => $value) {

*/
(preg_match("/background/", $key)) {
"" , */
*/
if ($key == 'background' && $value == 'none') {
$this->css->css[$import][$tags]['background'] =
$this->none;
}
CSS- */
foreach (split(",", $tags) as $tag) {
*/
if (!empty($this->media[$import][$tag])) {
$this->media[$import][$tag] = array();
}
if ($key == 'background') {
CSS- background */
$background = $this->css->optimise>dissolve_short_bg($value);
foreach ($background as $bg => $property) {
, */
if (
, background-position */
!($bg == 'background-position' &&
($property == '0 0 !important' ||
$property == 'top left !important' ||
$property == '0 0' ||
$property == 'top left')) &&
background-origin */
!($bg == 'background-origin' &&
($property == 'padding !important' |
$property == 'padding')) &&
background-color */
!($bg == 'background-color' &&
($property == 'transparent !important' ||
$property == 'transparent')) &&
background-clip */
!($bg == 'background-clip' &&
($property == 'border !important' ||
$property == 'border')) &&
background-attachement */
132
!($bg == 'background-attachment' &&

($property == 'scroll !important' ||
$property =='scroll')) &&
/* background-size */
!($bg == 'background-size' &&
($property == 'auto !important' ||
$property == 'auto')) &&
/* background-repeat */
!($bg == 'background-repeat' &&
($property == 'repeat !important' ||
$property == 'repeat'))) {
/* background-image, */
if ($bg == 'background-image' &&
($property == 'none !important' ||
$property == 'none')) {
$property = $this->none;
}
/* background-position, left
left center, right right center,
*/
if ($bg == 'background-position') {
$property =
$this->compute_background_position
($property);
}
/* ,
*/
$this->media[$import][$tag][$bg] = $property;
}
}
/* CSS-, */
} else {
/* background-position, left left
center,
right right center,
bottom right */
if ($key == 'background-position') {
$value =
$this->compute_background_position($value);
}
133
/* "" CSS-,
*/
if ($key != 'background-position' || $value != '0 0') {
$this->media[$import][$tag][$key] = $value;
}
}
}
}
/* CSS- */
}
}
}
4.2.4. :
: ? :
1. ,

, , .
2. repeat-x ( 3)
.
( ).
no-repeat ,
( 1). 1
4. 1 ,

.
: ,
, ,
background-color.
134
3. repeat-y.
4. 7 (0
100% , , ,
).
5. 8 . ,

background-position.
6. 1
( : , ;
, ).

9 (8 1 ), ,
.
7. .

: ,
( , , ). ,
. , .
8. 4
( 6 7).
no-repeat , .
9. 5
.
10. 3 . ( ) ( PNG). ,
pngcrush jpegtran. , : JPEG PNG
( , ).
135

:
. 4.1.
( 1500 )
,
Web Optimizer (http://www.web-optimizer.ru/) (-
).
Auto Sprites (http://sprites.in/), SVN (http://code.google.com/p/
web-optimizator/source/browse/trunk/libs/ php/css.sprites.php).
- (
, ).

MIT ( , ,
, ).
4.3. CSS Sprites data:URI, Microsoft

Flash-, .
136
,
.
.
,
CSS Sprites, .
( , ) . :
. ( ).
( DOM- );
.
, CSS
Sprites ( )
;
;
.
4.3.1. data:URI
? , . data:URI,
CSS-
base64-. :
, , ( ) ( ), . .
: IE 7
data:URI. IE8 , IE . ?
4.3.2. mhtml
mhtml (MIME HTML),
IE ( ) Opera ( 9.0). base64- CSS-
. :
.
data:URI, .
?
137
4.3.3. 1:
CSS-
( gzip-).
( 1015 ), .
. ?
CSS-
window.onload, ,
: -. CSS Sprites, .
4.3.4. 2: JavaScript
( ) JavaScript ( 9899%). . <noscript>
( )
</body> ( <head>).
CSS- , JavaScript.
4.3.5. 3: Safari window.onload
- , Safari
( ),
( ).
Safari .
Safari window.onload.
4.3.6. 4: Microsoft, IE7 Windows Vista
,
Vista mhtml- -
138
. (
JavaScript) ( CSS Sprites). IE7@Vista JavaScript ,
CSS Sprites.
,
, .
4.4. data:URI
. 4.2. duris.ru: Data:URI [CSS] Sprites. : duris.ru
-
. CSS Sprites. , , .

, - background CSS. repeat .
4.4.1. Data:URI CSS
CSS-
data:URI. ,
,

. CSS- data:URI
.
CSS-,
, , , -
139
.
: data:URI + mhtml.
.
. CSS. data:URI . ,
data:URI .
CSS- data:URI
Data URI Sprites DURIS.ru.
.
4.4.2. ?

CSS- data:URI.
DURIS:
(<style>) (<link>)
;
background-image ;
base64 , ;
background-image ;
CSS- ( );
data:URI
IE6, IE7 Vista ( FAQ, duris.ru/faq/).
4.4.3. ?
CSS-:

;

,
;
;
;
140
;
.
4.4.4. IE
data:URI CSS-. IE. : IE 8 data:URI. mhtml-.

,
(99% ). , , Microsoft.
mhtml- Vista IE7 ,
IE7 Vista mhtml- ( mhtml Vista IE7).
, , , .
, Microsoft , . IE7 Vista DURIS , . IE7 Vista
. , , IE7 Vista, 5% . ,
, IE8 data:URI-.
4.4.5.
CSS-.
141
,
,
.
CSS-
.
4.4.6.
- DURIS, CSS-.
, filter:AlphaImageLoader, !important.
DURIS Java (. .
). , -
OpenSource-. , YUI Compressor. CSS- .
Java, DURIS.
4.4.7.
/ CSS- data:URI .
FAQ (http://duris.ru/faq/), ,
. .
(aka sirus, http://fullajax/#:developers).
4.4.8.
IE8 data:URI ( 32 , http://msdn.microsoft.com/en-us/library/
cc848897%28VS.85%29.aspx)
,
.

data:URI CSS- FAQ (http://duris.ru/faq/).
,
.
142
, (,
, Web Optimizer). , CSS Sprites , CSS-. .
( 24 )
, CSS Sprites
, .
( data:URI)
, ( CSS Sprites) , .
4.5.
.
, .
4.5.1.
:
.

. ,
143
, - ( Cache-Control: public).
PHP ( Expires 10
):
<?php
header("Cache-Control: public, max-age=315360000");
header("Expires: Mon, 01 Jul 2019 00:00:00");
?>
Apache:
<FilesMatch \.(bmp|png|gif|jpe?g|ico|swf|flv|pdf|tiff)$>
Header append Cache-Control public
ExpiresActive On
ExpiresDefault "access plus 10 years"
</FilesMatch>
nginx:
location * ^.+\.(bmp|gif|jpg|jpeg|png|swf|tiff|swf|flv)$ {
expires
10y;
header set Cache-Control public;
}
10- :
, . ,
( ), .

, - (
CSS-, JavaScript- ICO-) . : , , .
PHP:
<?php
header("Cache-Control: private, max-age=315360000");
144
header("Expires: Mon, 01 Jul 2019 00:00:00");

?>
Apache:
<FilesMatch \.(css|js|ico)$>
Header append Cache-Control private
ExpiresActive On
ExpiresDefault "access plus 10 years"
</FilesMatch>
nginx:
location ~* ^.+\.(css|js|ico)$ {
expires
10y;
header set Cache-Control private;
}
,
.

HTML-, FilesMatch , .

( ) HTML- . ( ,

, ).
HTML-, PHP ( Expires
):
header("Expires: Wed, 01 July 2009 00:00:00");
header("Cache-Control: no-store, no-cache, must-revalidate,
private");
header("Pragma: no-cache");
Apache:
<FilesMatch \.(php|phtml|shtml|html|xml|htm)$>
ExpiresActive Off
145
Header append Cache-Control "no-store, no-cache,

must-revalidate, private"
Header append Pragma "no-cache"
</FilesMatch>
nginx:
location * ^.+\.(php|phtml|shtml|html|xml|htm)$ {
expires
0;
header set Cache-Control "no-store, no-cache, must-revalidate,
private";
header set Pragma no-cache";
}
4.5.2.
, - :
. , . , ,
, , .
, ,

( ). (
, , ) .
:
Last-Modified + If-Modified-Since ETag + If-None-Match.
,
,
, - .
Last-Modified
. ETag (. Entity Tag,
) :
, , (,
).
146
( ) .
ETag-, .
, HTML- (, , ).
/* , ,
*/
$content = @file_get_contents($file);
/* , */
$hash = md5($content);
/*
*/
if ((isset($_SERVER['HTTP_IF_NONE_MATCH']) &&
stripslashes($_SERVER['HTTP_IF_NONE_MATCH']) == '"' . $hash .
'"') ||
(isset($_SERVER['HTTP_IF_MATCH']) &&
stripslashes($_SERVER['HTTP_IF_MATCH']) == '"' . $hash . '"')) {
/* 304- */
header ("HTTP/1.0 304 Not Modified");
/* */
header ("Content-Length: 0");
exit();
}
/* ETag */
header("ETag: \"" . $hash . "\"");
/* */
echo $content;
4.5.3.
,
, .

, -
147
.
, GET- (
)
. URL ( ),
.
CSS-:
<link rel="stylesheet" href="/css/main.css?20090701"
type="text/css"/>
( , ?) (20090701). ,
,
, : .
, ,
, ,
PHP- :
<?php
/* , */
$timestamp = filemtime($file);
/* HTML- */
echo '<link rel="stylesheet" href="/css/main.css?". $timestamp .
"' type="text/css"/>';
?>
, HTML-
.

: -
148
, .
Rewrite- Apache:
RewriteRule ^(.*)(\.v[0-9]+)?\.(css|js)$ $1.$2 [QSA,L]
? , HTML-

main.layout.v123456.css

main.layout.css
- . PHP-
:
<?php
/* , */
$timestamp = filemtime($file);
/* HTML- */
echo '<link rel="stylesheet" href="/css/main.css.v". $timestamp .
?>
, , .

,
. , . ,
,
, .
, .
, :
$hash = '';
foreach ($this->initial_files as $file) {
$hash .= $file['file_raw'];
}
$new_file_name = md5($hash);
149
, ,
. , (
, , ), ,
.

. :
(APC, eAccelerator,
memcache);
( -,
).
APC :
<?php
/* ( 1 ) APC
*/
/* , -
*/
if ($changed) {
apc_store($new_file_name, apc_fetch($new_file_name), 1);
}
/* ,
*/
$mtime = apc_fetch($new_file_name);
if (!$mtime) {
/* ,
APC */
$mtime = $_SERVER['REQUEST_TIME'];
echo '<link rel="stylesheet" href="/css/main.css?". $mtime .
apc_store($new_file_name, $mtime);
} else {
/* , ,
*/
150
echo '<link rel="stylesheet" href="/css/main.css?". $mtime .

}
?>
, (
, ),
( )
.
,
( ) 5001000% ( 5-10 ), , , , .
4.5.4.
, () .
( ), . HTML.
( ) HTML- , ( )
151
(,
eaccelerator).
( )
( ) HTML. ?

HTML-, ( ) , ( ), . , ,
.
,
, Web Optimizer:
/* , */
if (!empty($this->cache_me)) {
/* */
$this->uri = $this->convert_request_uri();
$file = $this->options['page']['cachedir'] . '/' . $this->uri;
/* , */
if (is_file($file) &&
$_SERVER['REQUEST_TIME'] - filemtime($file) <
$this->options['page']['cache_timeout']) {
$content = @file_get_contents($file);
/* , */
if (!empty($this->options['page']['gzip']) &&
substr($content, 0, 8) ==
"\x1f\x8b\x08\x00\x00\x00\x00\x00") {
/* , */
$this->set_gzip_header();
}
/* */
echo $content;
/* PHP- */
die();
}
}
152
$cache_me
( URL, , , , . .). , , URL , :
(/, ?), .

,
?
(
Web Optimizer):
/* ,
*/
if (!empty($this->cache_me)) {
/* */
$file = $options['cachedir'] . '/' . $this->uri;
/* , */
if (!is_file($file) ||
$_SERVER['REQUEST_TIME'] - filemtime($file) >
$options['cache_timeout']) {
/* */
$fp = @fopen($file, "a");
if ($fp) {
/* */
@flock($fp, LOCK_EX);
/* */
@ftruncate($fp, 0);
@fseek($fp, 0);
@fwrite($fp, $this->content);
@fclose($fp);
}
}
}
(
) ( -
).
153
4.5.5. XHR-
Steve Souders F5
and XHR deep dive, XHR-.
, , AJAX, IE , (Ctrl+F5). .
(F5), IE
( ), XHR. , , .
? ,
Expires ? -
Cache-Control max-age (
Expires)?

. , XMLHttpRequest.
.
Expires
Expires, 30 ,
Cache-Control max-age=0.
Expires
Expires Cache-Control.
Expires
Expires, 30 , CacheControl max-age=2592000.

. , XHR- , , HTTP-.
, F5.
, (
).
XHR-,
( : ,
XHR- ).
154
4.1. XHR, F5?

Expires
Expires
Expires
Chrome 2
304
304
304
Firefox 3.5
304
304
304
IE 7
304
IE 8
304
Opera 10
304
304
Safari 4
200
200
200
,
XHR- Expires, Expires
. IE 7&8 XHR-,
Expires Expires ,
Ctrl+F5. Opera 10 XHR-,
Expires ( Ctrl+F5 Opera ).
Opera 10, Safari 4 favicon.ico ( ).
Safari 4 If-Modified-Since .
- 200 . XHR-, ( ).
- XHR-.
1. XHR , ,
, Expires
.
2. XHR- , .
,
155
XHR-. ,
, . XHR. , , GET-,
-.
.
3. XHR- ,
. IE 7&8 ,
(F5).
156
5. -
, ( ) : , .
5.1. :

,

( ). : CSS- HTML.
, ,
.
5.1.1.
CSS- , ,
157
, ,
.
, 10 . ( , ) gzip .
5.1.2. XHR <body>
XMLHttpRequest CSS-, innerHTML <body> .
, DOM- ,
<head>. .
// , :
var xhr = new XMLHttpRequest;
if (xhr) {
xhr.onreadystatechange = function() {
try {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// <body>
document.body.innerHTML +=
'<style type="text/css">' + xhr.responseText +
'</style>';
}
}
} catch(e){}
};
xhr.open("GET", 'styles.css?'+Math.random(), true);
xhr.send(null);
}
: ?
. offsetHeight.
, , , ( ), ( ).
158
, CSS-
(
):
var start = new Date();
var _timer = setInterval(function(){
// ,
//
if (document.getElementById('neck').offsetHeight < 300) {
//
alert('CSS files loaded in '+(new Date() - start));
//
clearInterval(_timer);
}
}, 10);
, .
( ) 15 , , 2 , ( 3--).
.
5.1.3. XHR head
<head> ( innerHTML
innerText ).
var text = xhr.responseText;
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
// IE
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
// Safari/Chrome
if (style.innerText == '') {
style.innerText = text;
//
159
} else {
style.innerHTML = text;
}
}
head.appendChild(style);
5.1.4. XHR head

innerHTML <head> ( , ). , , .
HTML-,
DOM- ( IE6/7),
.
var text = xhr.responseText;
var head = document.getElementsByTagName('head')[0];
if (/WebKit|MSIE/i.test(navigator.userAgent)) {
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.innerText = text;
}
head.appendChild(style);
} else {
head.innerHTML += '';
}
5.1.5. DOM-
, , .
<head> DOM-.
var link = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(link);
link.setAttribute('type','text/css');
link.setAttribute('rel','stylesheet');
link.setAttribute('href','style.css');
160
5.1.6.
. , .
XHR <body>
XHR <head> XHR <head> DOM
IE 6
482
379
342
335
IE 7
532
364
391
353
IE 8b2
370
326
301
284
FX 3
420
294
300
282
Opera 9
892
894
1287
764
Safari 3
308
286
296
Chrome
349
335
367
5.1.7.
, DOM-
. Safari/Chrome XHR ( ).
Opera : .
, .
, , -
( ), . , ,
, .
5.2. CSS-
Steve Souders dont
use @import (http:/www.stevesouders.com/blog/2009/04/09/dont-use-
161
import/) Simplifying CSS Selectors (http://www.stevesouders.com/blog/

2009/06/18/simplifying-css-selectors/) CSS-. (http://www.getincss.ru/).
5.2.1. <link> vs. @import
:
<link>:
<link rel='stylesheet' href='a.css'/>
@import:
<style type='text/css'>
@import url('a.css');
</style>
<link> , ,
@import ,
.
5.2.2. @import @import
:
a.css b.css. 2 , .
@import .
HTML- :
@import url('b.css');
</style>
@import
, , ,
. 5.1. . : getincss.ru
162
, JavaScript.
(. 5.1) , @import <link>.
5.2.3. <link> @import
<link> a.css
@import b.css:
<link rel='stylesheet' type='text/css' href='a.css'/>
</style>
IE ( 6, 7 8) , , . 5.2. , IE .
. 5.2. @import <link> IE. : getincss.ru

a.css <link> @import b.css:
:
<link rel='stylesheet' type='text/css' href='a.css'/>
a.css:
, (. 5.3), ,
IE, . :
a.css . @import, b.css.
163
. 5.3. @import <link> IE. : getincss.ru

: IE. <link> a.css
proxy.css, @import b.css.
HTML-:
<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>
proxy.css:
IE . 5.4.
HTML-. a.css (2 ). proxy.css.
b.css (2 ). , IE b.css, a.css .
, (. . 5.5).
. 5.4. IE. : getincss.ru
. 5.5. . : getincss.ru
164
5.2.6. @import
@import IE ,
, .
6 ( 2 ), JS- (4 ).
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script src='one.js' type='text/javascript'></script>
. 5.6. @import. : getincss.ru
. 5.6 , .
, , IE .
,
(getElementsByClassName, . .),
, , .
5.2.7. <link> <link>
<link> :
<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='b.css'>
165
<link>
(. . 5.7). <link> ,
,
.
. 5.7. <link>. : getincss.ru
, , . @import . ,
, @import <link>.
5.2.8. CSS-

CSS-
. CSS-
(, expression IE) JavaScript,
. .
CSS-
David Hyatt CSS Mozilla (https://developer.mozilla.org/en/Writing_Efficient_CSS).
:
, CSS-, . , , .
, CSS-,
- .
, CSS- , , IE ( CSS- , ,
Opera CSS- ).
, : ,
166
. - (, #id).
,
HTML- , (http://clubs.ya.ru/yacf/
replies.xml?item_no=338&ncrnd=3604), .
CSS-,
. DIV DIV DIV P A.class0007 {}. 5 , DOM-. ,
, A.class0007, , 1 , .
CSS-
, . : A.class0007 * {}.
, .
, , (*). ,
,
. 5.8. ( )
. : stevesouders.com
167
.
.
, CSS- , ,
. ,
, :
A.class0007 DIV {}
#id0007 > A {}
.class0007 [href] {}
DIV:first-child {}
CSS- ,
, . CSS- , .
2.0- DOM-, CSS- .
,
JavaScript- . , : JavaScript-.
, , CSS1 YASS (http://yass.webo.in/).
5.3. CSS
CSS- . , ,
,
,
.
, : , , ,
.
168
, (, .class1 .class2, , , .class2).

5.3.1.
CSS- :
= DOM- * CSS- *
* +

,
, . . CSS-,
.
5.3.2.
,
DOM-, ,
(, , , (*)
).
DOM- CSS- (
, ).

, , .
:
( ) CSS, DOM- , . , (
30-50 , IE 200).
169
, :
DOM-, ,
, .
5.3.3.

, ( ). : CSS- DOM-
DOM- CSS-.
, .
, (
.class1, .class1 .class2 .class1 .class2 .class3).
, ( 10-20% ).
, , :
T = ((DOM1 * K) + DOM2 * In) * t + DOM2 * L
:
T ;
DOM1 , CSS ( CSS- );
DOM2 DOM-;
K CSS- ,
1 1,5;
In CSS- , 40-200;
t , 0,0001...0,0005 ;
L DOM-, 0,0005...0,005 .

10% ( 20%, ,
, ,
).
5000 DOM- 0 CSS-.
170
5.3.4.
.
.
DOM- . . : DOM . ( ) 20% .
,
, ,
CSS-. (*) :
.
.
1.
(,
ins, del, q, u, b, i).
2. .

(, HTML-),

(, , CSS Monkey Joe,
http://clubs.ya.ru/yacf/).
( ) ( ), , .
()
,
. , 90% DOM-
div, ,
).
CSS- , 100-200
( ).
171
, (http://clubs.ya.ru/yacf/replies.xml?item_no=338) CSS- ( 10% ), .

HTML- ( DOM- 1000 , CSS- 500,
40% ) 100 . (, , DOM- ).
5.4.
Steve Souders ( Yahoo! ) Coupling Async Scripts (http://www.stevesouders.com/blog/

2008/12/27/coupling-async-scripts/). Steve
JavaScript-
.
(<script src=...>),
( Firefox Safari , 70%
IE) , HTML-. (, window.onload) , .

(
), ,
. -
172
HTML-, ( ), . , , ,
: , .

JavaScript-.
window onload. JavaScript-
window onload. , .
onreadystatechange . onreadystatechange () onload ( , ). , ,
, .
. ,
, . ,
. .
:

,
( jQuery) <script>.
5.4.1.
( <script
src=...>), .
, , . . 5.9 ,
( sorttable-async.js) HTTP- ( , arrow-right-20x9.gif), . Firebug 1.3
beta. Firebug onload (
domcontentloaded). onload 487- .
173
. 5.9. .
: stevesouders.com
5.4.2.
sorttable-async.js .
( , ) 1
.
, DOM-
<script>:
var script = document.createElement("script");
script.src = "sorttable-async.js";
script.text = "sorttable.init()"; //
document.getElementsByTagName("head")[0].appendChild(script);
HTTP- . 5.10. ,
: sorttable-async.js arrowright-20x9.gif . 429 .
. 5.10. , :
stevesouders.com
5.4.3.
, , . -
174
sorttable.init() onload . ( ) ,
sorttable.init() <script>, ( src).
: window onload, onreadystatechange
. <script>.
John , , :
<script src="jquery.js" type="text/javascript">
jQuery("p").addClass("pretty");
</script>
<script> ,
.
:
: <script> ;
: ;
: ,
, , .

. , , .
, script.text.
sorttable-async.js:
var scripts = document.getElementsByTagName("script");
var cntr = scripts.length;
while ( cntr ) {
var curScript = scripts[cntr-1];
if ( -1 != curScript.src.indexOf("sorttable-async.js") ) {
eval( curScript.innerHTML );
break;
}
cntr;
}
175
, , (
src, sorttable-async.js). , ( sorttable.init()), . ( :
text,
innerHTML.
.)
, , .
,
.
:
var _on_ready_execution = setInterval(function() {
if (typeof urchinTracker === 'function') {
urchinTracker();
clearInterval(_on_ready_execution);
}
}, 10);

(http://speedupyourwebsite.ru/books/speed-up-your-website/),

: .
,
<script> . , (510 , )
( <script>
GET-),
(, - ).
5.4.4.
, (
176
onload). onload:
window.onload = function() {
var script = document.createElement("script");
script.src = "sorttable-async.js";
script.text = "sorttable.init()";
document.getElementsByTagName("head")[0].appendChild(script);
}

. , onload .
5.11. onload, , 320- . ,
( ),
.
. 5.11. ,
stevesouders.com
5.4.5.

, ( ).
:
487 ;
429 ;
~320 .
, onload.
- -
177
.
(~400 417 ).
- .
5.5. JavaScript

- JavaScript-.
: .
? ?
.
onload / onreadystatechange . , .
: - .
5.5.1. :

,
. , :
var modules = [
[0, 'item1', function(){
alert('item1 is loaded');
}],
}],
}]
];
178
.
(0 ,
),
. , .
,
.
/* */
function load_by_parent (i) {
i = i || 0;
var len = modules.length,
module;
/* */
while (len) {
module = modules[len];
/* */
if (!module[0]) {
loader(len);
}
}
}
/* - */
function loader (i) {
var module = modules[i];
/* script */
var script = document.createElement('script');
script.type = 'text/javascript';
/* */
script.src = module[1] + '.js';
/* */
script.text = module[2];
/* */
script.title = i + 1;
/* IE */
script.onreadystatechange = function() {
if (this.readyState === 'loaded') {
/* , */
load_by_parent(this.title);
}
179
};
/* */
script.onload = function (e) {
/* ( Opera) */
if (/opera/i.test(navigator.userAgent)) {
eval(e.target.innerHTML);
}
/* , */
load_by_parent(this.title);
};
/* */
document.getElementsByTagName('head')[0].appendChild(script);
}
/* */
load_by_parent();
, - , . ,

JavaScript-. , : , , .
5.5.2. : DOM-
, JSX (http://jsx.ru/), DOM-.
, - , jsx-component, .
DOM-, , , . .
,
? ? JSX
DOM- . : .
180
,
.
,
. JSX : ( ), , .
?
5.5.3. : JSX+7YASS
. JSX ,
. , .
HTML-:
<div id="item1" class="yass-module-utils-base-dom">
<span id="item2" class="yass-module-dom"
title="_('#item2')[0].innerHTML = 'component is loading...';">
</span>
</div>
, .
1. YASS DOM- yass-module-*.
2. : dombase-utils dom. : , dom loaded, (e
eval) , title (
span).
3. : yass.dom.js, yass.base.js yass.utils.js.
( ,
dom base, utils)

( ). , -
181
: (
)
( dombase-utils).
4. - , - (, base-callbacks),
base callbacks. ( ,
base) :
_.load('callbacks-base');
5.
DOM-: yass-module-callbacks-base.
.
:
dom
-> base
-> utils
-> callbacks
, ,
. :
, .
, YASS (http://yass.webo.in/).
5.6. CDN
- .
CDN (. Content Delivery Network) . ,
. -
182

CDN NGENIX.

: , CDN , ,
.
, CDN
-.
. 5.12. CDN, : ngenix.net
5.6.1.
, -
. , , (
),
24
(, ),
.

:
, . -
183
, - .

,
: ,
, ,
.
5.6.2.
, (
),
.
: , VPS ( shared-), 50-200 ( ,
). CDN
10 .
5.6.3.
CDN
, .
( , ),
, .
,
CDN, .
5.6.4.
( -, -) ( ,

184
).
CDN.
CDN

,
,
. -,
(, ) ,
: .
5.6.5.
CDN
, DDoS- .
, .
5.6.6.
: , 1000
. ,
( , , -) ,
- -
.
5.6.7. CDN
NGENIX CDN
NGENIX CDN .
185
NGENIX -
- -. NGENIX CDN
,
-, -, , , ,
. .
NGENIX CDN
-
- ,
IT-, -,
- .
5.7. CDN Google Apps

, Google ?
!
5.7.1.
1. CDN Python. ,
Google Apps. 2.5 ( 3.0 Google SDK , 2.5 ). Python :
http://www.python.org/download/, ,
( ).
2. Google Apps SDK
(http://code.google.com/appengine/downloads.html).
( . 1
Python, ). , -
.
3. appengine.google.com (
Google). Google Apps Engine ,
.
4. .
URL ( appspot.com) :
SMS,
CDN , , ?
186
. 5.13. Google App Engine SDK
. 5.14. Google App Engine
187
5. ( Google)
(
Pyt hon, SDK). , app.yaml,
:
application: __
version: 1
runtimee: python
api_version: 1
handlers:
- url: /favicon.ico
static_files: favicon.ico
upload: favicon.ico
- url: /.*
script: cacheheaders.py
webo, webo.appspot.com, version
. ,
.
Google Apps
(http://appengine.google.com/ deployment).
6. , , favicon.ico , cacheheaders.py: (
, Python- , ):
import wsgiref.handlers
from google.appengine.ext import webapp
class MainPage(webapp.RequestHandler):
def output_file(self, path, lastmod):
import datetime
try:
self.response.headers['Last-Modified'] =
lastmod.strftime("%a, %d %b %Y %H:%M:%S GMT")
expires=lastmod+datetime.timedelta(days=365)
188
self.response.headers['Expires'] = expires.strftime("%a, %d %b %Y %H:%M:%S GMT")

self.response.headers['Cache-Control'] = 'public,
max-age=31536000'
fh = open(path, 'r')
self.response.out.write(fh.read())
fh.close
return
except IOError:
self.error(404)
return
def get(self, dir, file, extension):
if (dir != 'i' and extension != 'jpg' and extension !=
'png' and extension != 'gif'):
self.error(404)
return
if extension == "jpg":
self.response.headers['Content-Type'] =
"image/jpeg"
elif extension == "gif":
"image/gif"
elif extension == "png":
"image/png"
try:
import os
import datetime
path = dir+"/"+file+"."+extension
info = os.stat(path)
lastmod = datetime.datetime.fromtimestamp(info[8])
if self.request.headers.has_key('If-Modified-Since'):
dt = self.request.headers.get('If-ModifiedSince').split(';')[0]
modsince = datetime.datetime.strptime(dt,
"%a, %d %b %Y %H:%M:%S %Z")
if modsince >= lastmod:
189
# ,
( )
self.error(304)
return
else:
#
self.output_file(path, lastmod)
else:
self.output_file(path, lastmod)
except:
self.error(404)
return
def main():
application =
webapp.WSGIApplication([(r'/(.*)/([^.]*).(.*)',
MainPage)], debug=False)
wsgiref.handlers.CGIHandler().run(application)
if __name__ == "__main__":
main()
. , Google Apps Last-Modified / ETag ( Expires,
app.yaml
default_expiration: 365d). CDN ( 304-),

cacheheaders.py.
, ,
CDN? cacheheaders.py
, i .png, .gif .jpg,
, 304- ( If-Modified-Since ).
7. Google.
( -, ) upload.bat ( - , Windows, -
190
). :
"___Python___1" "C:\Program
Files\Google\google_appengine\appcfg.py" update
"_____"
2
Google App Engine SDK,
C:\Program Files\Google\google_appengine.
8. i , , CDN.
( cacheheaders.py
).
9. upload.bat, / Google App
Engine ( ) CDN.
10. _.appspot.com/i/ Google
(, http://webo.appspot.com/i/b.png). !
5.7.2.
( 250500 /),
Google .
:
,
Last-Modified (
);
Google CDN Content-Encoding.

Google;
,
(
).
.
191
. , webo.in
CDN ( webo.appspot.com/i/).
, Google App Engine - App Engine. (
) , Google (
20 ).
192
6.
,
.
, JavaScript,
CSS-
JavaScript-.
() JavaScript AJAX .
193
6.1. JavaScript
( JavaScript- jQuery),
JavaScript .
CSS- Sizzle
(http://sizzlejs.com/), YASS
(http://yass.webo.in/), jQuery DOM- .

(http://ejohn.org/blog/deep-profiling-jquery-apps/) jQuery ,
jQuery. ,
, , ,
, , .
- .
Firebug, ( ). , ,
, . !
6.1.1. FireUnit

FireUnit (http://fireunit.org/).
fireunit.getProfile();
, console.profile(); console.profileEnd();
, . , , fireunit.getProfile() JavaScript:
{
"time": 8.443,
"calls": 611,
194
"data":[
{
"name":"makeArray()",
"calls":1,
"percent":23.58,
"ownTime":1.991,
"time":1.991,
"avgTime":1.991,
"minTime":1.991,
"maxTime":1.991,
"fileName":"jquery.js (line 2059)"
},
// etc.
]}
fireunit.profile( fn );
. 6.1. JavaScript, : ejohn.org
, FireUnit,
. ,
, , , getProfile().
,
.
:
fireunit.profile(function(){
document.getElementsByClassName("foo");
});
6.1.2.
-,
(http://github.com/jeresig/fireunit) FireUnit. Firefox:
195
http://fireunit.org/fireunit-1.0a1.xpi
, :
1. Console Script Firebug ;
2. extensions.firebug.throttleMessages about:config
false.
6.1.3.
jQuery 1.3.2 ( jQuery, , , , O(n)
):
O(n)
.addClass(test);
542
6n
.addClass(test);
592
6n
.removeClass(test);
754
8n
.removeClass(test);
610
6n
.css(color, red);
495
5n
.css({color: red, border: 1px solid red});
887
9n
23772
2n+n2
.append(<p>test</p>);
307
3n
.append(<p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>);
319
3n
.show();
394
4n
.hide();
394
4n
28759
3n+n2
.remove();
.html(<p>test</p>);
196
.empty();
28452
3n+n2
.is(div);
110
.filter(div);
216
2n
.find(div);
1564
16n
O(n), jQuery , . addClass , filter , is .

,
, .remove(),
.empty() .html(). n2,
. : .html() .empty(), .empty() .remove(), .remove() .
( , jQuery ), ,
.

:
O(n)
.remove();
298
3n
.html(<p>test</p>);
507
5n
.empty();
200
2n
.
, ,
jQuery .

.
197
John jQuery . John

, . ( ,
jQuery , ) .
.
6.2.
Christian Stockwell, IE. - : , ,
, .
.
6.2.1.
-.
,

,
, .
, ,
. - , , - , , . - , ,
IE.
198
, , , . IE , ,
, , , , , .
, .
Flickr Google.
, AJAX- , Windows Live Hotmail, ,
HTML, , , Craigslist, (,
).
. ,
,
. ,
,
HTML. AJAX- JavaScript, CSS DOM, , . Flash
Silverlight, ,
.
, ,
IE 8, . - , , -.
6.2.2.
,

.
199
, , . .
? , http://www.microsoft.com

- , ,
, .

, . , , ,
http://www.msnbc.com. ,
-,
, . , - (,
) . , , ,
, -, , ,
, .
, , . , -, ,
, , ,
,
,
.
, , - .
,
, . , ,
-
, .
200
. , , , , -.
6.2.3.
,
, , .
- . . , , .
, , . ,
, - , .
, ,
-:
. 6.2. , : blogs.msdn.com
201
,
, ,
: , .
6.2.4.
, , -
, ,
- .
, ,
, . , ,
.
,
, , . , ,
.
6.2.5.

, .
202
,

. , -
, ,

.
,
, . , Windows 10 ;
, , . , ,
, , .
,
. , . , :
, , . , - .
:
%windir%\\system32\rundll32.exe advapi32.dll,ProcessIdleTasks
6.2.6.
,
, .

. , , , ; ,
203

.
,
,
. , . - , . ,

.
:
(
). - , ,
.
,
,
.
, .
6.2.7.

. .
.
. ,
, , ,
.
204
6.2.8.
, ,
,
.
,
, .
, ,
, . ,
,
. IE, .
, , . ,
. , , Superfetch (http://www.microsoft.com/windows/windowsvista/features/superfetch.aspx),
.
6.2.9. -
- . ,
, .
-, , . , , .
.
Facebook MySpace :
- ,
- . , ,
.
. , -
205
: , Fiddler
, . , ,
. , , , , , .
6.2.10.
-
, -,

.
, ,

, . , . .
, ,
, ,
, . , . , ,
,
.
, ,
, -
. ,
,
,
.
206

, - ,
.
6.2.11.
, -
? ,
AJAX?
, , ,
. ,

. - (http://www.w3.org/ TR/html401/interact/scripts.html#h-18.2.3)
, . , , -.
, , , , - ,
. ,
, - , , ( !) .

, ,
.
,
, . , ,
.
, . ,

207
. ,
, -, ,
.
6.2.12.
,
.
.
, Microsoft, IE
( Mozilla ).
.
: ,
, ,
, , , . , Firefox IE, , ,
IE Firefox
. .
IE 8 Manage
add-ons Tools. All Addons .
, iexplore.exe
-extoff IE .

, , , , .
208
6.3. JavaScript
, YASS (http://yass.webo.in/) CSS-.
6.3.1.
. ,
.
.
:
var a = 1,
b = 2,
c = 3;
if(a == 1) {
if (b == 2) {
if (c == 3) {
...
}
}
}
, , , if:
if(a == 1 && b == 2 && c == 3){
...
}
. , . , if-then-else .
, :
var v = a == 1 ? b == 2 ? c == 3 ? 1 : 0 : 0 : 0;
10-50% , ,
.
209
, , 510% :
if (a + b + c == 6) {
...
}

(. . , undefined, NaN,
null, 0), 510% , ( 1020% ,
):
if (a && b && c) {
...
}
- ,
. , .
:
var a
b =
c =
if (a
...
}
= 1,
2,
'3';
== 1 && b == 2 && c === '3') {
===,

1020%.
6.3.2.
, .
RegExp (exec, test), (match,
search, indexOf).
- , test:
210
var str = 'abc',

regexp = new RegExp('abc');
if (regexp.test(str)) {
...
}
40% ,
exec:
if (regexp.exec(str)[1]) {
...
}
match exec RegExp, 1015% . search (510%), test, .
, ,
( 10% ) :
if (/abc/.test(str)) {
...
}
, , ,
indexOf, :
if (str.indexOf('abc') != 1) {
...
}
6.3.3.
: /a|b|c/.
( ). ( 50%) -
:
211
var hash = {'a':1, 'b':1},

str = 'a';
if (h[str]) {
...
}
( 20%)
:
if (ss === 'a' || ss === 'b'){
...
}
3 : if, switch , . if
( ), if switch 10%. ,
20%. , . .
CSS- ,
.

test:
if (/^[\w[:#.][\w\]*^|=!]*$/.test(selector)) {
...
} else {
...
}
(
). 5
3 ( ,
), switch:
switch (firstLetter) {
case '#':
212
...
break;
case '.':
...
break;
case ':'
...
break;
case '[':
...
break;
default:
...
break;
}
- (>, +, , ):
switch:
switch (ancestor) {
case ' ':
...
break;
case '':
...
break;
case '+':
...
break;
case '>':
...
break;
}
, child (first-child, last-child, nth-child, . .)
(=, *=, = . .) :
_.attr = {'': ... , '=': ... , '&=': ... , '^=': ... ...
}
213
6.3.4.
,
:
(==)
, ,

(!)
String.match(RegExp)
RegExp.exec(String)
RegExp.test(String)
String.indexOf(String)
(
)
if
(===)

( 12)
if

( 38)
switch

( 8)
,

,
JavaScript
(http://webo.in/articles/habrahabr/
7 8 - j a va s c r i p t - c o n s t r u c t i o n s performance/) .
214
6.4. CSS3-

JavaScript-,
CSS-. ?
. .

. Sizzle ( ,
jQuery 1.3+), Peppy
( Sizzle,
) , YASS
(http://yass.webo.in/).
,
- CSS-, DOM (, )? , , ( ), .
6.4.1.
. , ,
( ).
.
( )
CSS-. ?
-, (DOM-
, JavaScript- ).
-, CSS- , ,
( , ).
-, ,
.
. 200 HTML , .
.
-, , : , ,
, . .
215
6.4.2.
:
_(p) ;
_(p a) ;
_(p a.blog) blog.
6.4.3. ?
, - ,
. YASS
, , CSS- ( ), .
, ( , YASS
, js-core, http://code.google.com/p/js-core/).
YASS CSS- ,
MooTools, Prototype, jQuery, YUI .
CSS- .
6.4.5. CSS-
: ? ,
CSS-,
(http://www.w3.org/TR/2005/WD-css3-selectors-20051215/),
, .
.

( IE8+):
// my_id
querySelectorAll('#my_id')
// external
querySelectorAll('.external')
//
querySelectorAll('p')
216
:

.
JavaScript-, . , -
, , .
: , , .
JavaScript-, .
: (
), .
indexOf ( ) .
, , ( ) . , , exec test charAt / substr:
20%.
, .
YASS :
//
if
//
//
,
(/^[\w[:#.][\w\]*^|=!]*$/.test(selector)) {
,
'#', '.' , ':' '['
var firstLetter = selector.charAt(0);
...
}
6.4.6.
, CSS-. , p a.link, form input[type=radio], :?
217
,
.
.
(sets).

, ( p a.link). , ,

.
( ) nodes.
, ,
, CSS 2/3. exec, :
single = regexp.exec(single);
tag = single[1];
id = single[2];
...
, ,
CSS- .
, ( indexOf substring ) 3 (
). , .
218
6.4.7.
a, -
.
( ), . .
while(i) .

for:
for (var j=0, item = a[j]; item; item = a[j++]) {
item++;
}
, 3040% while:
var j = 0,
item,
len = a.length;
while (j < len) {
item = a[j++];
item++;
}
-
, . while ( ) 510%:
var j = 0,
item;
while (item = a[j++]) {
item++;
}
, YASS (http://yass.webo.in/)
.
(, false), while:
219
while (idx) {
sets[idx].yeasss = null;
}
, . , .
6.4.8.
CSS- . div p
div,
,
. , -
, .
, , , : DOM-,
.
(, ,
), .

:
for (child in children) {
if (!children[child].yeasss) {
if (last) {
children[child].yeasss = 1;
}
newNodes = children[child];
}
}
, yeasss (,
, ). , -, , .
220
, yeasss , :
, . , ( ), (
) , .
( ) (
) ,
IE ( - IE 6/7).
6.4.9.
YASS (http://yass.webo.in/)
.
, (, CSS- YASS ).
6.5. API CSS-

DOM selectors
API in Firefox 3.5 (http://hacks.mozilla.org/2009/06/dom-selectors-api/)
( jQuery - Mozilla), .
API
(http://dev.w3.org/2006/webapi/selectors-api/), W3C, JavaScript , DOM-
CSS-. , , DOM-
, .

, :
221
Internet Explorer 8, Chrome

Safari, Firefox 3.5 Opera 10.
6.5.1. querySelectorAll
API DOM-, ( , ,
, ,
JavaScript): querySelector querySelectorAll. : CSS- DOM- ( , querySelector
).
, HTML-:
<div id="id" class="class">
<p> .</p>
<p> .</p>
</div>
querySelectorAll,
div id.
var p = document.querySelectorAll("#id p");
for ( var i = 0; i < p.length; i++ ) {
p[i].style.backgroundColor = "red";
}
div,
class.
first.
document.querySelector("div.class > p:first-child")
.className = "first";
JavaScript-/DOM-,
- . , CSS- , (
CSS3-) .
222

, , , YASS (http://yass.webo.in/).
API
( ),
CSS-. API ( : ,
CSS- , JavaScript
) CSS- , .
(Firefox, Safari, Chrome Opera) , CSS3-. Internet Explorer 8

CSS2- ( IE 6/7).
, API
CSS- . ,
CSS1-, .
CSS2- (http://www.w3.org/TR/CSS2/
selector.html) CSS3- (http://www.w3.org/TR/css3-selectors/)
.
6.5.2.
API CSS- , , CSS- DOM. API , , ( , IE
6, IE 7 Firefox 3). ,
CSS- DOM.
, ,
, , API API (

).
, -
223
API (
- ). ,
CSS- API
, .
, API :
jQuery (http://jquery.com/)
Prototype (http://prototypejs.org/)
Dojo (http://dojotoolkit.org/)
MooTools (http://mootools.net/)
, API (
DOM JavaScript). , JavaScript, API .

:
. 6.3. API ,
: hacks.mozilla.org
API
224
-,
, .
6.5.3.
API
(http://dev.w3.org/2006/webapi/selectors-api/) , (
Mozilla).
.
, API,
:
Firefox 3.5: 99,3%
Safari 4: 99,3%
Chrome 2: 99,3%
Opera 10b1: 97,5%
Internet Explorer 8: 47,4%
Internet Explorer 8, , CSS3- (, , w3.org), .
, API
DOM- . , JavaScript-
.
API.
6.6. Canvas: ,

,
.
6.6.1.
1998 Microsoft W3C VML (. Vector Markup Language -
225
).
HTML .
Microsoft
IE 5.0. Open Office XML (ISO
29500:2008 ECMA-376) 2008 .
1998 Adobe, IBM, Netscape Sun W3C Microsoft PGML (.
Precision Graphics Markup Language ).
, W3C
, 1999 SVG (. Scalable Vector Graphics ). ( , 1.1 2003 )
(, , IE).
JavaScript-, , SVG
VML IE. . Google Maps. (SVG VML)
; ,
VML :
<html xmlns:v="VML">
<style type="text/css">
v\:*{behavior:url(#default#VML);position:absolute}
</style>
<body>
<v:oval style="left:0;top:0;width:100;height:50"
fillcolor="blue" stroked="f"/>
</body>
</html>
SVG:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
<ellipse cx="50" cy="25" rx="50" ry="25" fill="blue"
stroke="none" />
</svg>
226
6.6.2. Canvas
Canvas ( ,
) 2005 Apple WebKit ( Safari Chrome). W3C Canvas Web
Applications 1.0, HTML 5.0.
Canvas
. IE 8 VML-.
VML SVG - Canvas,
HTML CSS:
JavaScript. , SVG , Canvas ,
(
JavaScript).
6.6.3.
Canvas API . ,
( ), (, , ), ( ), (, ,
), .
( Photoshop
) .

Canvas:
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
227
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
:
. 6.4. Canvas,
: developer.mozilla.org
Canvas
(
) MathML SVG. ,
, HTML-. , Flash- Canvas (,
, VML IE).
Canvas , , WHATWG (http://www.whatwg.org/specs/web-apps/
current-work/multipage/the-canvas-element.html).
228
6.6.4. Canvas, SVG VML

Canvas , 2D-.
2D- 3D-
Canvas 2D- . ,
, . ,
Canvas 3D- -
.
. 6.5. Canvas, : www.nihilogic.dk
Typeface.js

typeface.js (http://typeface.neocracy.org/) (
Flash).
( Canvas )
.
typeface.js , JavaScript, ( ,
).

50 500 ( ).
229
( 500-1000
) (
, ).
JavaScript- 10 HTML- CSS-
.
. 6.6. Canvas ,
typeface.neocracy.org
Cufon
Cufon
SVG.
.
http://cufon.shoqolate.com/generate/.
Prosessing.js
Processing , Casey Reas
Benjamin Fry . .
Canvas
Processing JavaScript ( ) Processing.js (processingjs.org/). -
230
Canvas.
,
Processing.js, , , , .
. 6.7. processing.js ,
: willarson.com
Raphal
Canvas
, Raphael.js (http://raphaeljs.com/)
( SVG +
VML). .
: ( ). http://raphaeljs.com/.
6.6.5.
Canvas , SVG. Canvas Google Maps (http://www.ernestdelgado.com/
gmaps/canvas/ddemo1.html). 200500% ( , Canvas).
231
. 6.8. Raphael.js ,
: raphaeljs.com
. 6.9. Canvas, : www.ernestdelgado.com
(http://prototype-graphic.xilinus.com/
samples/shape.html) Canvas SVG, .

(http://intertwingly.net/ stories/2006/07/10/penroseTiling.html) Canvas SVG. SVG
( , ).

(http://www.borismus.com/canvas-vs-svg-performance/),
SVG, Canvas
. -
232
. 6.10. Canvas,
: prototype-graphic.xilinus.com
. 6.11. Canvas SVG, : intertwingly.net
, ( SVG ) SVG ( ), Canvas . ,

.
233
. 6.12. Canvas SVG ,

: www.borismus.com
(
), : . Canvas
( ) ( ).
. 6.13. Canvas SVG ,
: www.borismus.com
234
: () , Canvas
. ( )
SVG.
VML IE 8 .
6.7. Web Workers

Computing with JavaScript Web
Workers (http://ejohn.org/blog/
web-workers/),

JavaScript
.
Web Workers, ,
,
JavaScript- , .
, - JavaScript-, . ,
.
, Web Workers.
6.7.1. Web Workers
Web Worker (http://www.whatwg.org/specs/web-workers/
current-work/)
Google Gears WorkerPool
(http://code.google.com/apis/gears/api_workerpool.html). , .
Worker , . Web Workers , :
new Worker("worker.js");
235
,
worker.js, (
,
).
:
1. Worker DOM. document,
getElementById . . ( setTimeout,
setInterval
XMLHttpRequest.)
2. Worker .
, :
, , Worker
?
Worker, .
( ) (Firefox 3.5 JSON- ).
Worker, Worker . .
API postMessage :
var worker = new Worker("worker.js");
// worker
worker.onmessage = function(e){
// :
e.data;
};
worker.postMessage("start");
:
onmessage = function(e){
if ( e.data === "start" ) {
// -
done();
}
};
function done(){
//
postMessage("done");
}
236

:
( , , ) (
DOM ).
Web Workers Firefox 3.5 Safari 4.
Chromium
(http://build.chromium.org/buildbot/snapshots/chromium-rel-xp/). , : , - (
!), . Web
Workers
.
( ,
Web Workers ). .
, API.
6.7.2. (RayTracing)
. 6.14. Web Workers, ejohn.org
Canvas .
Web Workers, , . Worker. Worker -
237
Canvas,
. (, Worker .)
6.7.3.
. 6.15. Web Workers, : ejonh.org
: video,
canvas .
Web Workers ( ).
6.7.4.
. 6.16. Web Workers, : ejohn.org
238
, (simulated annealing). PNG- ( Firefox 3.5), , .

6.7.5. JavaScript Web Workers
Engine Yard
(http://www.engineyard.com/blog/2009/programming-contest-winiphone-3gs-2k-cloud-credit/). : ,
SHA1-, ( ).
, JavaScript. . , ( , ),
.
( )
: , .
1000-1500 . ,
.
-,
Web Workers!
Ray C Morgan (http://www.raycmorgan.com/),
4 Web Workers, 4500-9500
( ,
Web Workers).
( ) :
Web Worker SHA1 (http://ejohn.org/apps/webworkers/)
(http://ejohn.org/apps/web-workers/
run.js)
Worker (http://ejohn.org/apps/webworkers/worker.js)
239
6.8.
-, - .
, .
,
, , ,
.
6.8.1. Cookie
Netscape,

cookie
- . , ,
50, 4
. Internet Explorer
20 cookie, 4 ( IE 8 50 , 10 ).
: cookie
, . cookie ,
,
.
, - Apache
( LimitRequestLine),
8 . ,
cookie ( , cookie URL-encoded ) 2,6 . ,
,
.
cookie
.
240
API cookie, , . cookie , navigator.cookieEnabled.

,
document.cookie.
,
cookie, . cookie , ,
: , Internet
Explorer cookie .
cookie ( ):
expires cookie; ,
cookie ,
cookie . cookie,
.
domain , , cookie ; , . , , .
path , ; . .
secure , ,
cookie HTTPS.
cookie , document.cookie
key=value; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/;
domain=.example.net
, , -, . domain ,
. cookie .
cookie ,
,
,
.
241
6.8.2. userData behavior

Microsoft, - , ,
.
Internet Explorer 5 userData behavior,
Microsoft, 128
, 1 , 512 10 .
API , behavior, .
DOM-, , CSS, behavior userData:
function IEStorage (storagename) {
this.storagename = storagename
var el = document.createElement('div');
el.setAttribute('id', 'ourstore-' + storagename);
el.style.display = 'none';
el.addBehavior('#default#userData');
document.body.appendChild(el);
this.storage = el;
this.get = function (name) {
this.storage.load(this.storagename);
return this.storage.getAttribute(name);
}
this.set = function (name, value) {
this.storage.setAttribute(name, value);
this.storage.save(this.storagename)
}
this.del = function (name) {
this.storage.removeAttribute(name);
this.storage.save(this.storagename);
}
}
, : , , .
242

, load:
var time = new Date();
time.setHours(time.getHours() + 1);
//
this.storage.expires = time.toUTCString();
6.8.3. Flash Local Shared Object
2002 Flash,
, , , 95% . Local Shared
Object, 100
.
Local Shared Object.
Flash-,
. Flash , Flash8
ExternalInterface, , ,
.
, , ( ), , , Flash.
6.8.4. WHATWG DB Backend (openDatabase)
WHATWG

Apple, Mozilla Foundation
Opera Software ASA.
Web
Application 1.0, HTML.
,
-
. HTML5
243
, , ,
WebKit.
, WebKit Safari (
iPhone) Chromium openDatabase (
)
SQLite JavaScript. ,
openDatabase 10.50.

SQLite, Safari 5 .
( )
openDatabase :
function SafariStorage(name, maxsize) {
this.db = null;
if (!window.openDatabase) return;
try {
this.db = openDatabase(name, '1.0 ', 'Storage for ' +
name, maxsize); // maxsize
} catch (e) {
this.db = null;
return;
}
this.db.transaction(function (t) {
t.executeSql('CREATE TABLE IF NOT EXISTS storage(k TEXT
UNIQUE NOT NULL PRIMARY KEY, v TEXT NOT NULL);', []);
})
this.get = function (name, fn, scope) {
scope = scope || this;
t.executeSql('SELECT v FROM storage WHERE k = ? '
[name], function (t, r) {
if (r.rows.length) {
fn.call(scope, r.rows.item(0)['v'])
} else {
fn.call(scope, null)
}
});
});
244
}
t.executeSql('INSERT OR REPLACE INTO storage(k, v)
VALUES (?, ?)', [name, value]);
});
}
t.executeSql('DELETE FROM storage WHERE k = ?',
[name]);
});
}
}
transaction , . transaction ,
, , , .
executeSql ( !) :
callback ,
, : .
6.8.5. globalStorage localStorage
globalStorage HTML5, . globalStorage
, cookie.
Firefox 2 ( Internet Explorer
8.0 beta 1), .
globalStorage localStorage, HTML5 .
localStorage
FireFox 3.5 , Internet Explorer 8.0 ( beta 2), Safari 4.0
, Opera 10.50 .
245
, , -, , Firefox
5 , IE 8 10 (, , , ). , ,
.
function HTML5Storage() {
if (window.localStorage) {
this.storage = window.localStorage
} else if (window.globalStorage) {
this.storage = window.globalStorage[location.hostname
|| 'localhost.localdomain ']
} else {
return false
}
var out = this.storage.getItem(name);
return out && out.value ? out.value : out;
}
this.storage.setItem(name, value);
}
this.storage.removeItem(name)
}
}
6.8.6. Google Gears
Google Gears, , Google. Google Chrome, . : Firefox 1.5, Internet Explorer 6.0
, Safari 3.1.1 ( Mac OS), IE
Mobile 4.01 Opera Mobile 9.51 .
Google Gears , openDatabase,
SQLite, API:
246
function GearsStorage(name) {
if (!window.google || !window.google.gears) {
var factory = null;
// Firefox
if (typeof GearsFactory != 'undefined') {
factory = new GearsFactory();
} else {
// IE
try {
factory = new ActiveXObject('Gears.Factory');
if (factory.getBuildInfo().indexOf('ie_mobile')
!= -1) {
factory.privateSetGlobalObject(this);
}
} catch (e) {
// Safari
if ((typeof navigator.mimeTypes != 'undefined')
&& navigator.mimeTypes["application/
x-googlegears"]) {
factory = document.createElement("object");
factory.style.display = "none";
factory.width = 0;
factory.height = 0;
factory.type = "application/x-googlegears";
document.documentElement.appendChild(factory);
}
}
if (!factory) return;
if (!window.google) {
google = {};
}
if (!google.gears) {
google.gears = {factory: factory};
}
}
this._begin = function () {
this.db.execute('BEGIN').close();
}
this._commit = function () {
this.db. execute('COMMIT').close();
}
247
this.db = google.gears.factory.create('beta.database');
this.db.open(name)
this.db.execute('CREATE TABLE IF NOT EXISTS storage(k TEXT
UNIQUE NOT NULL PRIMARY KEY, v TEXT NOT NULL);').close()
this._begin()
var r = this.db.execute('SELECT v FROM storage WHERE k
= ? ', [name])'
this._commit()
var result = r.isValidRow() ? r.field(0) : null;
r.close();
return result;
}
this._begin()
this.db.execute('INSERT OR REPLACE INTO storage(key,
value) VALUES(?, ?) ', [name, value]).close()
this._commit()
}
this._begin()
this.db.execute('DELETE FROM storage WHERE key = ? ',
[name]).close()
this._commit()
}
}
, Google Gears,
-. API ,
openDatabase ,
, callback.

, , , ,
SQLite, .
6.8.7.
, .
, ,
248
. , ,
.
PersistJS (http://pablotron.org/?cid=1557) , . (, Google Gears IE ), ,
, .
, PersistJS . , localStorage Google Gears, cookie
, .
, , Google Gears, , PersistJS .
PersistJS Flash-,
, , , ,
. Flash-

, 100 , , .
, , , , JSON.
, ( 9 )
.
Dojo (http://www.dojotoolkit.org/) Flash,
Google Gears, globalStorage (Firefox 2.0) -
Adobe AIR.
PersistJS, : 1.3.2 45 . ,
, 100 .
Dojo Storage,
SRAX Storage (http://fullajax.ru/#:download/),
Flash Local Shared Object.
jStore (http://code.google.com/p/jquery-jstore/) jQuery, , cookie, ( 15 ) PersistJS.
249
6.8.8.
, HTML5
URL. , JavaScript ,
HTML*.
, , , , () .
: JavaScript, CSS,
userData behavior 512 IE 5.0+

, 10 ,

64 / 640 ,
128 / 1
globalStorage
FF 2.0+, IE 8 beta 1
localStorage
Firefox, Safari, Opera 5 FF 3.5+, Safari 4+,

Internet Explorer 10 MiB IE 8 beta 2+, Opera 10.50+
openDatabase
Google Gears

Google Chrome,
,
IE 6+, Opera
Mobile 9.51+, FF 1.5+, IE
Mobile 4.01+, Safari 3.1.1+
Flash

100
,

Opera 10.50+,
Safari 3.xx, 4.xx,
Google Chrome 3.xx, 4.xx
IE, FF,
Google Chrome, Safari
* Google Gears ,
, Canvas.
250
, , .
:
; , ,
, (, AJAX) .
DOM.
, Opera
, Flash Local Shared Object;
- .
cookie,
-
.
, , jStore:
, .
251
7.

.
.
- PHP Web Optimizer
(http://www.web-optimizer.ru/).
7.1.
-,
. : . . , .
- .
. -, -
252
,
. , .
7.1.1. JSMin Ant Task
JSMin Ant Task (http://code.google.com/p/jsmin-ant-task/). JSMin ( JavaScript- )
Ant-.
7.1.2. JSMin PHP
JSMin PHP (http://code.google.com/p/jsmin-php/). PHP-, JSMin PHP. : . ( ). gzip-
YUI Compressor, PHP.
7.1.3. YUI Compressor
YUI Compressor (http://developer.yahoo.com/yui/compressor/). Rhino-
Yahoo!. YUI Compressor
JavaScript-: ( 1 ) . gzip- . ,
Java.
7.1.4. Packer
Packer (http://dean.edwards.name/packer/) Dean Edwards. Packer , JavaScript, ( 50%). gzip-, Packer,
, YUI
Compressor.
253

( 30-300 ).
PHP.
7.1.5. CSS Min PHP
CSS Min PHP (http://code.google.com/p/cssmin/)
JSMin CSS-.
, ( CSS
) .
7.1.6. CSS Tidy
CSS Tidy (http://sourceforge.net/projects/csstidy/)

CSS-. , (
HTML Tidy HTML). , CSS- .
: PHP C ( ). 1.3, ,
- .
7.1.7. Minify
Minify (http://code.google.com/p/minify/) , .
, CSS-
JavaScript-, HTML-.
-.
( ,
),
. CSS Sprites data:URI ,
.
254
7.1.8. qpimg
qpimg (http://code.google.com/p/qpimg/) php5-
CSS- (CSS sprites). CSS - ( . 4).

.

coolRunnings (http://jaredhirsch.com/coolrunnings/about/), , -.
7.1.9. Smart Sprites
Smart Sprites (http://csssprites.org/) CSS Sprites , CSS-. Java, PHP-.
7.1.10. SpriteMe
SpriteMe (http://www.stevesouders.com/spriteme/)
Steve Souders (
- Velocity, ), CSS
Sprites .
, , ( ,
), ( -
coolRunnings).
7.1.11. Smart Optimizer
Smart Optimizer (http://code.google.com/p/smartoptimizer/) ( Minify) -, -. : CSS- JavaScript-,
, data:URI.
255
(
.htaccess, ) (
). PHP-, Apache + mod_php.
7.1.12. PHP Speedy
PHP Speedy (http://code.google.com/p/phpspeedy/) . , ( 2 PHP Speedy).
: ,
CSS- JavaScript-, data:URI, .htaccess, .

Wordpress Joomla! 1.0, , PHP5.
7.1.13. Web Optimizer
Web Optimizer (http://www.web-optimizer.ru/) - . 3-5 ( 7-10 ), YSlow 92-98 ( 100). .

, : Wordpress,
Joomla!, Drupal, Bitrix, NetCat, UMI.CMS, DataLife Engine, Simple Machines
Forum, phpBB, Invision Power Board . . .
Web Optimizer PHP4, PHP5, PHP
CGI, mod_php. Wordpress
Joomla!.
7.1.14. Web Application Optimizer
, Web Application Optimizer (http://wao.monosoftware.com/), , Minify,
256
, ASP .NET.
: CSS- JavaScript-, gzip- HTML-. .
WAO $99 .
7.1.15. Aptimize
Aptimize (http://www.aptimize.com/)
.
IIS Apache ( ) ,
CSS Sprites ( )
.
Aptimize $1000
.
7.2. Web Optimizer

-
Web Optimizer.
7.2.1. 1:
Web Optimizer
: ZIP- -.

code.google.com/p/web-optimizator/downloads/list Featured
0.5 .
ZIP- . SSH-,
wget:
wget http://web-optimizator.googlecode.com/files/weboptimizer.v0.5beta.zip
257
. 7.1. Web Optimizer
,
web-optimizer.
FTP-, , , (, FAR) .

( ) -, ( curl )
. install.me.php
.
,
, , web-optimizer/config.php () web-optimizer/cache ,
. . ( ), .
7.2.2. 2:

http://_/web-optimizer/index.php
258
web-optimizer , Web Optimizer. Web

Optimizer. , ,
Web Optimizer, .
:
;
.

. Web Optimizer ,
:
. , ( index.php,
CMS) , .
Web Optimizer .
259
260
. 7.5. Web Optimizer:
261

. ,
, 2 3 .

. , . : ( .htaccess).
Web Optimizer
HTTP Basic Authorization. . , Web
Optimizer, , .
7.2.3. 3:
Web Optimizer
.
262
-, ( ),
( 2 3
). -, ( , - CSS- JS- )
. -,
Web Optimizer ( CMS ,
.htaccess ) .
curl

, , (
).
. .
Web Optimizer
:
263
. 7.9. Web Optimizer:
Web Optimizer HTML- . ,

head CSS- JavaScript-,
(
), </body> (-
). HTML ( ,
, , ).
7.3. Web Optimizer

, Web Optimizer 0.5.
7.3.1.
( ),
264
CSS-, JavaScript- HTML-.

( ).
cache Web Optimizer.
7.3.2.

JavaScript- CSS-. JavaScript- JSMin ( YUI Compressor,
Java). JavaScript
Dean Edwards Packer ( gzip). , HTML- (
, () ). IE .
7.3.3. JavaScript-
Web Optimizer JavaScript- ( ), ( <script>). CSS-, <style> ( ).
( ) (, ),
.
Tiny MCE
FCE Editor, .
7.3.4. JavaScript
JavaScript. , JavaScript </body> ( DomContentLoaded), , (
JavaScript- HTML-
, , ).
265
7.3.5.
, .
( ).
JavaScript- CSS- .
7.3.5. Gzip- ()
,
JavaScript-, CSS- HTML- . gzip- 70-85% , ( PHP ) .
.htaccess ( CSS JavaScript- ). .htaccess gzip- JavaScript- CSS- , (
PHP) .
( JavaScript-) cookie,
( , ).
7.3.6.
JavaScript-, CSS-, HTML- ( ). .htaccess, PHP.
10 (
, md5- ).
HTML-
.
( HTML-) , HTML , -
266
, HTML- .
, .
( .htaccess,
PHP).
7.3.7.
.
CMS ( ). Web
Optimizer ( , ):
HTML-.
HTML-
Web Optimizer, .
, .
, 1-2
( ), . . URL , ( ), (USER AGENTS),
.
7.3.8. CSS Sprites
, ,
Web Optimizer. (!)
( 20-100 3-10).
IE 6 ( 32- , IE 6
PNG), IE 6 ( )
.
JPEG PNG
, (repeatx repeat-y -
267
), (
).
: PHP- 64 (
3000 3000 , ), , 4000 , . ( ,
900) (-
, ) CSS
Sprites.
7.3.9. data:URI
data:URI
CSS-. IE
8. 24 (32
data:URI 24576 ). data:URI IE 7 CSS- ,
.
data:URI
. API smush.it. -
. ,
CSS- .

.
7.3.10.

. ( ). DNS IP-, ( )
. :
268
ServerAlias i1.site.ru
i1 i2 Web Optimizer
, .
Web Optimizer
( ), ( ). ,
( )
, Web Optimizer.
7.3.11. .htaccess
gzip- . .htaccess ( httpd.cond).
Web Optimizer .htaccess (,
), mod_gzip, mod_deflate mod_filter
, mod_rewrite mod_mime , mod_headers mod_setenvif
, mod_expires .
.htaccess
( , ), .
. Web
Optimizer .htpasswd.
HTTP Basic Authorization
( Web Optimizer ,
).
( HTTP Basic Authorization)
Web Optimizer,

.
269

(
) .
7.3.13. /index.php
Web Optimizer CMS ( CMS 42 index.php). ,
.
7.4. Web Optimizer

Web Optimizer

.
.

.
7.4.1. (-) JavaScript- CSS-(-)

- JavaScript- , .
Web Optimizer
, :
-> ->

270
7.4.2. CSS Sprites

, ( GDLib , . .) CSS Sprites (
). CSS Sprites:
CSS Sprites -> CSS Sprites ->
CSS Sprites Auto Sprites
(http://sprites.in/), CSS- ( ).
7.4.3. IE 6
IE 6:
CSS Sprites -> IE 6 ( )
CSS Sprites ->
, IE 6
( ). data:URI:
Data:URI -> data:URI ->
CSS-:
-> CSS- ->
7.4.4.
Web Optimizer
( ) htpasswd.
:
.htaccess ->
htpasswd ->
271
, Web Optimizer ( , ).
7.4.5.
Web Optimizer ,
PHP.
,
Web
Optimizer
( index.php):
<?php
require(///Web/Optimizer/
web.optimizer.php);
?>
:
<?php
$web_optimizer->finish();
?>
(
) Web Optimizer 5-10 , , . , , Web Optimizer, PHP- ( .php - ,
).
7.4.6.
Web Optimizer .
Web Optimizer, HTML . , Web
Optimizer dev.site.ru. , , wget:
wget -d -r -c http://dev.site.ru/
272
,
.
7.4.7. HTML
, Web Optimizer HTML .
-> HTML 1 ->
-> HTML- ->
, (
) JavaScript-
( ). , <script>, <textarea>, <pre> (
), .
7.4.8. smush.it
smush.it Yahoo! Google
.
CSS Sprites:
<?php
require('////css.sprites.php');
$smushit = new css_sprites();
$smushit->smushit('////');
?>
( ) . , , .
7.5. Web Optimizer

Web Optimizer (http://www.weboptimizer.ru/) Joomla! (http://joomla.org/, 1.0, 1.5)
273

(
),
.
,
, .
, Web
Optimizer -
HTML-. 0.5.2 , <title lang=wo> ( , , Web Optimizer ).
HTML- ,

head (cache/1234a6789b.css cache/1234c6789d.js, 1234c6789d
).
Web Optimizer , Web Optimizer , ,
Web Optimizer
.
CMS, /index.php:
/index.php ->
.
7.5.2.
HTML-.
Web Optimizer, , .
274
,
CMS, , Web Optimizer:
gzip HTML
7.5.3.
( CSS Sprites) 0.5+, , .
, , .
.
- . ,
.
, Web Optimizer, ,
. ( )
(CSS, JavaScript, HTML) (,
, CSS
Sprites).
7.5.4.
,
CSS
Sprites:
CSS Sprites CSS
Sprites
, , data:URI:
Data:URI data:URI

275
CSS- CSS Tidy, (

).
, <head>:

CSS-
CSS-:
CSS-
, <head>

:

( ), , jigsaw.w3.org/css-validator/ .
7.5.5.
Web Optimizer , . ,
( ), CSS Sprites:
CSS Sprites CSS Sprites

, CSS Sprites :
CSS Sprites CSS Sprites
276
7.5.6.
,
. , , ,
JavaScript
Web Optimizer , , .
JavaScript-:
JavaScript-
( ) :

, , (
-
, -,
).
7.5.7.

, ( )
. ,
, ,
Web Optimizer Web Optimizer :
.htaccess
htpasswd

Web Optimizer (, cache, -
277
-) :
.htaccess
htpasswd
7.5.8.
, :
1. DNS. DNS-, IP- ( ,
).
2. .
Apache ServerAlias, :
3. , .
(, site.ru/images/my.png)
(i1.site.ru/images/my.png).
- .
4. Web Optimizer:

:
,
, i1 i2
Web Optimizer , .
278
,
.
7.5.9.
Web Optimizer , , . (
- ):

279
8.
8.1. ASP .NET: 100 A YSlow
Viktar Karpach YSlow and
ASP.NET: 100 points A grade is possible (http://www.karpach.com/ yslow-andasp-net-100-points-a-grade.htm). , ASP .NET. Yahoo!, .
. 8.1. YSlow.
: www.karpach.com
280
8.1.1. HTTP-
-,
. ( )
MS Build:
<ItemGroup>
<TextFiles Include="*.css" Exclude="global.css"/>
</ItemGroup>
<Exec Command="echo y| type %(TextFiles.Identity) >>
global.css"/>
CSS- JS-.
: WebResource.axd? AJAX Control Toolkit
ToolkitScriptManager,
WebResource.axd. gzip-
( ).
CSS Sprites.
. ,
. , , , vbackground.png, hbackground.png.
background-position: -OffsetPixels 0 background-position: 0 -OffsetPixels .
8.1.2. CDN (Content Delivery Networks)
(. CDN, Content Delivery Network)
.
Google ( ). , , Google App Engine CDN.
msbuild
CDN. (
../images/ http://karpach.appspot.com/cdn/images/):
<Import Project=".\References\MSBuild.Community.Tasks.targets" />
<Target Name="Release">
281
<FileUpdate Files="$(OutputPath)styles\basic.css"
Regex="\.\.\/images/([^\)]*)" ReplacementText=
"http://karpach.appspot.com/cdn/images/$1" />
</Target>
CDN ,
. . ,
, , ? -,
7 , ,
. .
, ,
Yahoo! -.
. , trough_2.0_062308.gif. . - CSS Sprites,
(

CSS Sprites;
4).
, ,
.
( SVN).
, . ,
(, basic.css),
(, basic_14102262.css), 14102262
. url rewrite,
basic_14102262.css basic.css. basic_14102261.css
basic_14102262.css,
.
Google Apps rewrite URL.
app.yaml :
- url: /cdn/styles/basic_\d*\.css
static_files: cdn/styles/basic.css
upload: cdn/styles/basic\.css
CDN Google .
282
8.1.3. Expires
, CDN, .
HttpModule:
private readonly static string[] CACHED_FILE_TYPES = new
string[] { ".jpg", ".gif", ".png",".css" };
public void Init(HttpApplication context)
{
context.AcquireRequestState += new
EventHandler(context_AcquireRequestState);
}
void context_AcquireRequestState(object sender, EventArgs e)
{
HttpContext context = HttpContext.Current;
if (context != null && context.Response != null)
{
string fileExtension = Path.GetExtension
(context.Request.PhysicalPath).ToLower();
if (context.Response.Cache != null &&
Array.BinarySearch<string>(CACHED_FILE_TYPES, fileExtension)
>= 0)
{
HttpCachePolicy cache = context.Response.Cache;
TimeSpan duration = TimeSpan.FromDays(365);
cache.SetCacheability(HttpCacheability.Public);
cache.SetExpires(DateTime.Now.Add(duration));
cache.SetValidUntilExpires(true);
cache.SetNoServerCaching();
cache.SetMaxAge(duration);
}
}
}
, , CDN.
8.1.4. CSS-
. . -
283
Header.Controls
.
8.1.5. JavaScript-
. , jQuery , , . ,
,
, - .
,
Library.js

function DoSomething()
{
}
:
<script type='text/javascript'>
if (typeof (DoSomething) == 'undefined')
{
alert('Library is not loaded yet');
}
</script>
, . , ,
, . JavaScript .
8.1.6. DNS-
(, JavaScript) .
284
, W3.
W3 Schools,
. , 1 DNS-
.
8.1.7. JavaScript
JS- MS Build (

). YUI compressor.
MS Build.
<Target Name="Compress">
<Message Text="Create temp files ..." />
<Copy SourceFiles=".\$(ProjectName)\Javascript\ColorPicker.js"
DestinationFiles=".\$(ProjectName)\Javascript\ColorPicker.js.full
"/>
<Copy SourceFiles=".\$(ProjectName)\Styles\ColorPicker.css"
DestinationFiles=".\$(ProjectName)\Styles\ColorPicker.css.full"/>
<Exec Command="java -jar yuicompressor-2.4.2.jar type js
.\$(ProjectName)\Javascript\ColorPicker.js.full
>.\$(ProjectName)\Javascript\ColorPicker.js"/>
<Exec Command="java -jar yuicompressor-2.4.2.jar type css
.\$(ProjectName)\Styles\ColorPicker.css.full
>.\$(ProjectName)\Styles\ColorPicker.css"/>
</Target>
8.1.8.
. , .
8.1.9. ETag
CDN .
, ASP .NET ETag:
Response.Cache.SetETag
285
8.2. Drupal
,
(aka ), -
-:
-
Aquanther (http://www.aquanther.ru/),
(http://www.moipodruzhki.ru/),
( Windows)
HomAff (
home affairs).
CMS Drupal
Drupal (http://drupal.ru/node/26290), .
( Aquanther)
CMS Drupal.
CMS Drupal, , CMS.
8.2.1.
Drupal CMS,
: Drupal
, . Drupal,
, , . .
-
Drupal Drupal
. ,
4 :
Drupal;
Drupal ;
Drupal;
.
286
8.2.2. Drupal
1. ,
, .
, . Statistics. , , Google Analytics.
Drupal 6,
. (Views, Panel . .) Drupal 6 .
Drupal 5 Drupal 6
(, Sphinx), -.
Drupal 6.
CCK (Content Construction Kit) . , , , :

;

CCK, .
,
10 ,
. , .
2. ,
.. 10 , 10 . .
3. Hierarchical Select
(http://drupal.org/project/hierarchical_select),
. ,
, 10 (
287
).
,
( ).
, CCK.
2 CCK: , .
.
,
:
10 CCK, ;
CCK ( ,
).
4. Drupal. , , ,
PHP.
, , (, ) .
(http://www.example.ru/
admin/settings/performance).
:
;
;
CSS-;
JavaScript-.
.

(, ) .
( ) , , Drupal.
,
,
.
288
. 8.2. Drupal
289

. ,
, . , . ..
, ,
.

,
gzip.
zlib, PHP.
. . -
( Drupal, id
1) .
CSS- JavaScript-.
. CSS- JavaScript- ( CSS
( : ,
) JavaScript).
.
8.2.3. Drupal
1. Authenticated User Page Caching (Authcache),
http://drupal.org/project/authcache. , , () , , Drupal.
(, ).
Authcache
.
(memcahed, APC, . .).
( -) AJAX,
. JavaScript,
.
1 .
290
:
;
/sites/all/modules;
ajax_authcache.php
( index.php);
settings.php ( /sites/default)
( // )
<?php:
$conf['cache_inc'] =
'./sites/all/modules/authcache/api/authcache.inc';
$conf['authcache'] = array(
'default' => array(
// - apc, memcache, db, file,
// eacc or xcache
'engine' => 'db',
// memcached (host:port, ,
// 'localhost:11211')
'server' => array(),
// memcached, shared single
'shared' => TRUE,
// ( )
'prefix' => '',
//
//
'path' => 'files/filecache',
// ()
'static' => FALSE,
),
);
Authcache. , (engine => db),
,
. http://drupal.org/project/cacherouter ( ).
Authcache
(http://www.example.ru/admin/build/modules).
Authcache
(http://www.example.ru/admin/settings/performance/authcache):
291
, ;
(
Invalidate all user sessions) ;
( );
(Save & clear cached
pages) .
. 8.3. Authcache
292
, , ,
(. ., , , ).
:
$user_name
;
$user_link ,
;
$is_page_authcache TRUE, .
/sites/all/modules/authcache/modules/authcache_example, ,
( ).
2. ( ), Cache
Router. Authcache Drupal.
http://drupal.org/project/authcache.
/sites/all/modules. Cache Router (http://www.example.ru/admin/build/modules). settings.php ( /sites/default)
<?php:
$conf['cache_inc'] = './sites/all/modules/cacherouter/cacherouter.inc';
$conf['cacherouter'] = array(
'default' => array(
'engine' => 'db',
'server' => array(),
'shared' => TRUE,
'prefix' => '',
'path' => 'sites/default/files/filecache',
'static' => FALSE,
'fast_cache' => TRUE,
),
);
, ,
, CSS JavaScript . :
293
c CSS Gzip http://drupal.org/project/

css_gzip;
c JavaScript Aggregator http://drupal.org/
project/javascript_aggregator;
/sites/all/modules;

(http://www.example.ru/admin/build/modules);
CSS JavaScript
(http://www.example.ru/admin/settings/
performance), GZip CSS GZip JavaScript;
.htaccess,
( README.txt, CSS Gzip), <IfModule
mod_rewrite.c> </IfModule> :
### START CSS GZIP ###
# Requires mod_mime to be enabled.
<IfModule mod_mime.c>
# Send any files ending in .gz with x-gzip encoding
# in the header.
AddEncoding x-gzip .gz
</IfModule>
# Gzip compressed css files are of the type 'text/css'.
<FilesMatch "\.css\.gz$">
ForceType text/css
</FilesMatch>
<IfModule mod_rewrite.c>
RewriteEngine on
# Serve gzip compressed css files
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [L,QSA,T=text/css]
</IfModule>
### End CSS GZIP ###
.
CSS JavaScript, :
drupal_add_css( CSS
);
294
drupal_add_js( JavaScript );
, ( CSS
JavaScript-) CSS JavaScript-, .
8.2.4. Drupal
Drupal , Drupal.
1. .
Drupal , , , . 55 ,
24 .
/sites/default settings.php
ini_set('session.gc_maxlifetime',
200000);
ini_set('session.gc_maxlifetime', 86400); // 24 ( )

24 ,
ini_set('session.cache_expire',
200000);
ini_set('session.cache_expire',
1440); // 24 ( )
cookie , 24 :
ini_set('session.cookie_lifetime', 86400); // 24 ( )
cookie 0, cookie - .
295
2. , .
(http://www.example.ru/admin/settings/logging/
dblog), , .
, , , 100 .
, (http://www.example.ru/admin/reports/dblog).
3. ( cron),
,
. Poormanscron.
http://drupal.org/project/poormanscron. /sites/all/modules, (http://www.example.ru/admin/build/modules). Cron
Poormanscron (http://www.example.ru/admin/settings/poormanscron)
360 ( 6 ).
4. Drupal Throttle,
, , .
(http://www.example.ru/admin/build/modules) , , ,
Throttle . Throttle
( (http://www.example.ru/admin/build/block). Throttle
(http://www.example.ru/admin/settings/throttle),
. 20%, 5
1 .
8.2.5.
:
296
Windows,
Lunux,
FreeBSD,
(.
. eAccelerator Windows Lunux ).
. PHP-
Ubuntu 8.04, PHP- .
1. eAccelerator. PHP-,

.
SSH root. php5-dev:
sudo apt-get install php5-dev
sudo apt-get install make
eAccelerator:
sudo cd /tmp/
sudo wget http://bart.eaccelerator.net/source/0.9.5.3/eaccelerator-0.9.5.3.tar.bz2
sudo tar xvjf eaccelerator-0.9.5.3.tar.bz2
sudo cd eaccelerator-0.9.5.3
sudo phpize
sudo ./configure enable-eaccelerator=shared
sudo make
sudo make install
php.ini /etc/php5/apache2,
[PHP] :
; eAccelerator configuration
; Note that eAccelerator may also be installed as a PHP extension or as a zend_extension
; If you are using a thread safe build of PHP you must use
; zend_extension_ts instead of zend_extension
;extension
= "/usr/lib/php5/20060613+lfs/eaccelerator.so"
zend_extension
eaccelerator.shm_size
= "16"
297
eaccelerator.cache_dir
= "/var/cache/eaccelerator"
eaccelerator.enable
= "1"
eaccelerator.optimizer
= "1"
eaccelerator.check_mtime
= "1"
eaccelerator.debug
= "0"
eaccelerator.filter
= ""
eaccelerator.shm_max
= "0"
eaccelerator.shm_ttl
= "0"
eaccelerator.shm_prune_period
= "0"
eaccelerator.shm_only
= "0"
eaccelerator.compress
= "1"
eaccelerator.compress_level
= "9"
eaccelerator.allowed_admin_path = "/var/www/eaccelerator"
Zend Optimizer / ionCube Loader :
; eAccelerator configuration
; Note that eAccelerator may also be installed as a PHP extension or as a zend_extension
; If you are using a thread safe build of PHP you must use
; zend_extension_ts instead of zend_extension
;extension
zend_extension
eaccelerator.shm_size
= "16"
eaccelerator.cache_dir
= "/var/cache/eaccelerator"
eaccelerator.enable
= "1"
eaccelerator.optimizer
= "1"
eaccelerator.check_mtime
= "1"
eaccelerator.debug
= "0"
eaccelerator.filter
= ""
eaccelerator.shm_max
= "0"
eaccelerator.shm_ttl
= "0"
eaccelerator.shm_prune_period
= "0"
eaccelerator.shm_only
= "0"
eaccelerator.compress
= "1"
eaccelerator.compress_level
= "9"
eaccelerator.allowed_admin_path = "/var/www/eaccelerator"
; ionCube Loader configuration
zend_extension=/usr/local/lib/ioncube/ioncube_loader_lin_5.2.so
298
; Zend Optimizer configuration

zend_extension=/usr/local/lib/Zend/ZendOptimizer.so
zend_optimizer.optimization_level=15
- eAccelerator,
sudo mkdir -p /var/cache/eaccelerator
sudo chmod 0777 /var/cache/eaccelerator
Apache:
sudo /etc/init.d/apache2 restart
2. Web- nginx - Apache ,
Apache, (CSS, JavaScript, . .)
nginx. - Apache -
nginx.
3. Apache mod_expires,
Drupal HTTP- Expires, (, CSS, JavaScript . .) -
. Drupal mod_expires Apache .htaccess
:
# mod_expires.
<IfModule mod_expires.c>
# .
ExpiresActive On
# (A).
ExpiresDefault A1209600
# .
ExpiresByType text/html A1
</IfModule>
4. .htaccess - Apache
httpd.conf. .htaccess
-, AllowOverride
None:
299
<Directory/>
AllowOverride
</Directory>
, .htaccess,
, .htaccess
httpd.conf .htaccess.
5. :
- (, AWstats);
(,
Munin);
(, Vnstat).
6. MySQL 64 . my.cnf /etc/mysql ( Ubuntu 8.04).
# query_cache_limit
# query_cache_size
= 1M
= 16M
query_cache_limit
query_cache_size
= 1M
= 64M
MySQL
/etc/init.d/mysql
restart
, , .
.
7. : , . , ,
settings.php ( /sites/default) (, Amazon C2).
300
8.2.6.
Drupal
System information (http://drupal.org/project/systeminfo). http://www.example.ru/admin/reports/systeminfo.

YSlow Firefox,
.
8.3. Wordpress
Wordpress (http://www.wordpress.org/) . -
Wordpress, , .
,
: , . .
8.3.1.
, , ( , ,
) . ,
Wordpress, :
;
(PHP);
;
.
:
8.3.2.
, , . , -
301
. 8.4. Wordpress, : www.arnebrachhold.de
( ), .
MySQL : my.cnf ( my.ini) ( 20
, : ):
query-cache-type=1
query-cache-size=20M
(
2050%) Optimize DB
(http://yoast.com/wordpress/optimize-db/), MySQL . , DB Cache Reloaded (http://wordpress.org/extend/plugins/db-cachereloaded/).
8.3.3.
, PHP-, , . , -
302
, APC (http://pecl.php.net/package/APC)
eAccelerator (http://eaccelerator.net/), ( ) . ,
,
. PHP-
( ) , . ( ) ( ).
8.3.4.

. Wordpress ( ) wp-config.php ( , wp-content/cache , ):
define('ENABLE_CACHE', true );
define('CACHE_EXPIRATION_TIME', 900);

WP-Super-Cache (http://ocaoimh.ie/wp-supercache/ , WP-Cache, http://mnm.uib.es/gallir/wpcache-2/) Hyper Cache (http://www.satollo.com/english/wordpress/
hyper-cache),
-.

Wordpress ( ). Wordpress, IIS,
WP-Super-Cache IIS Output Caching.
; .
, ( ) .
303
. 8.5. Wordpress IIS,

: blogs.iis.net
8.3.5.
Wordpress , . , , . .
( , Yahoo!, 95% ) :
Wordpress.
(WordPress
(gzip), ).
CSS Compress (http://dev.wp-plugins.org/wiki/css-compress) Wordpress,
CSS-.
304
PHP Speedy (http://aciddrop.com/php-speedy/) CSS- JS-,

. (
). ,
.
Web Optimizer (http://code.google.com/p/web-optimizator/) -,
. , ,
CSS Sprites (
IE)
.htaccess- ( PHP- ). Web Optimizer
JavaScript
.
,
() . ,
Wordpress,
. .
8.4. Joomla! 1.5

, Joomla!
(http://www.joomla.org/), CMS,
. Joomla! () , , : -.
, : - , , .
100-500%
. , .
305
8.4.1.
, . Joomla!, 0,312 ( curl, webo.in, http://webo.in/my/action/timings/).
, , .
Joomla! 1.5
. , . - , .

Joomla! 1.5
30% ( 0,107 ).
, :
, .

Web Optimizer: HTML- ,
. , , . ()
, Joomla! .
Web Optimizer (http://code.google.com/p/weboptimizator/) ,
(
0,006 3% ). HTML- Web Optimizer, 0,08
( 4 ).
, Content Static (http://extensions.joomla.org/extensions/
site-management/cache/5104/details)
.
306
,
, (, , ) .
CMS. System-Cache ( ) ( ).
, , Joomla Performance Booster
( h t t p : / / w w w. j o o m l a t wo r k . c o m / pro d u c t s / c o m p o n e n t s / j o o m l a performance.html) 50%
( ) , System-Cache, .

: , . Joomla!
, ( )
. ,
, , ( ) ,
(, 1 10 ).
.
Query Cache (http://extensions.joomla.org/extensions/sitemanagement/cache/3180/details)
, (APC, Memcache .)
.
8.4.2.

( ) Firefox YSlow.

Joomla! 1.5 65 100.
. ,
, 30-40.
307
:
Joomla! gzip. , -, PHP, -, HTML-. ,
: 67.
CssJsCompress
(http://extensions.joomla.org/
extensions/site-management/cache/7350/details),
CSS- JS-. , : 72 YSlow.
Joomla! gzip . CSS/JS Cache
(http://extensions.joomla.org/extensions/site-management/cache/7801/
details) .
Joomla Perfomance Booster
Joomla Performance Booster (http://www.joomlatwork.com/products/
components/joomla-performance.html) (39 )
Joomla! 1.5. ( JavaScript )
73 ( , JavaScript YSlow 75).
,
.
Web Optimizer (
),
Joomla! .
Smart Optimizer
Smart Optimizer (http://farhadi.ir/works/
smartoptimizer, PHP-)
Minify (http://code.google.com/p/minify/,
Minify4Joomla, http://extensions.joomla.org/extensions/
site-management/cache/7183/details, ).
,
,
. : 85.
Joomla! gzip .
308
Web Optimizer
Web Optimizer (http://www.web-optimizer.ru/, PHP ), ,
: Joomla! 94 ( 65 ). ,
.
8.4.3.
Joomla! 1.5 , Web
Optimizer. PHP Speedy (http://code.google.com/p/phpspeedy/), , Joomla! 1.0.
Joomla! ( + ).
, Joomla! Drupal
(http://www.drupal.org/), .
8.5. Joostina
, ,
-, Joostina CMS (http://www.joostina.ru/). : , , .
Joostina :
,
, .
CMS Joomla! 1.0.x, .
, Joomla!.
, -.
309
CMS Joostina 3 :
;
;
,
.
Joostina 1.3.0.
8.5.1.

,
.
- ,
: http://www.example.ru/administrator.
,
,
.
RSS (syndicate)
Joostina, CMS,
RSS- , .
RSS-,
HTML-
:
<link rel="alternate" type="application/rss+xml"
title="Joostina v 1.3.0 b"
href="http://www.example.ru/index2.php?option=com_rss&feed=0
&no_html=1" />
,
. ,
, .

.
.
, . -
310
.
, . .
system
PHP-, . system . SEF Javascript.

. system, ,
.
content,
mainbody
system,
. content , , {mosimage},
. . , . , , .

content , , , {mosimage}. ,
{mosimage}. , ,
.

, .
.
,
.

,

311
: . ,
, .

,
, cookie . , . , , . .

Joostina , .
SQL- . , , .

. mysql , .
, , li.ru Google Analytics.

. SQL- , . ,
.
GZIP-
.
gzip- ,
312
. , ;
gzip .

, . , , .
/
content, . , ,
.

OPTIMIZE TABLE .
mysql.
CSS- JS-
JS- CSS- . . .
revisit:
:
<meta name="revisit" content="10 days" />
, . , .
8.5.2.

Joostina ,
. -
313
,
. .

,
. Joostina apc, eaccelerator, xcache memcache. 3
-, php. .

, , .
, .

. , ,
.
:
.

, .
. ,
. , . JavaScript,
.
(/dev/shm)
/cache
.
, ,
/dev/shm. , PHP-
.
314

,
.
,
.
. ,
.
8.5.3.

, , . .

.

Joostina , .
. .
8.5.4.

. Joostina , . , . Joostina
3- :
,
,
.

.
. ,
.
315

: . ,

.

, , . , , .
:
.
,
.

. . , ,
, .
.
. ,
, . content, , . . , bot_mosimage {mosimage} .
,
. , , : .
,

.
8.6. Ruby on Rails

, - . -
316
, ,
- Ruby on Rails.
, - JavaScript- CSS-. , - .
, , .
AssetPackager (http://synthesis.sbecker.net/pages/asset_packager).
script/plugin install git://github.com/sbecker/asset_packager.git

config/asset_packages.yml:
javascripts:
- base:
- prototype
- effects
- controls
- dragdrop
- application
- secondary:
- foo
- bar
stylesheets:
- base:
- screen
- header
- secondary:
- foo
- bar
rake-:
rake asset:packager:build_all
JavaScript
<%= javascript_include_merged :base %>
317
<%= javascript_include_merged 'prototype', 'effects', 'controls',

'dragdrop', 'application' %>
:
<%= stylesheet_link_merged :base %>
<%= stylesheet_link_merged 'screen', 'header' %>

, :
<script type="text/javascript"
src="/javascripts/prototype.js"></script> <script
type="text/javascript" src="/javascripts/effects.js"></script>
src="/javascripts/controls.js"></script>
src="/javascripts/dragdrop.js"></script>
src="/javascripts/application.js"></script>
<link href="/stylesheets/screen.css" type="text/css" />
<link href="/stylesheets/header.css" type="text/css" />
:
src="/javascripts/base_packaged.js?123456789"></script>
<link href="/stylesheets/base_packaged.css?123456789"
type="text/css" />
, , . Ruby-on-Rails ,
config/environments/production.rb :
config.action_controller.asset_host = "http://assets.example.ru"
image_tag, javascript_include_tag . . .
318
8.7. jQuery
, (aka CTAPbIu_MABP),
Java JavaScript,

(http://my.kyivstar.ua/).
JavaScript, , jQuery,
(http://mabp.kiev.ua/).
jQuery, , JavaScript-. DOM-, AJAX- . , Google Microsoft.
,
.
, , . , ,
DOM-,
, AJAX , , , .
8.7.1. Selectors
$, :
, . , , .

id, .
$("#id")
$("tag")
$(".class")
319
:
.
document.getElementById("id");
, id ,
, id,
. IE 7- id , name.
:
document.getElementsByTagName("tag");
, .
, ,
getElementsByTagName(*) IE .
, ,
document.getElementsByClassName("class");
(
quirksmode.org)
.
: , , , ,
.
var nodes = document.getElementsByTagName("*"), result = [];
for (var i=0; i<nodes.length; i++){
if(" " + (nodes[i].className ||
nodes[i].getAttribute("class")) +
" ").indexOf("class") > -1)
result.push(nodes[i]);
}
, .
320
querySelectorAll
. . FireFox 3.0, Safari 3.2, Opera 9.5,
IE8, querySelector querySelectorAll.
, ,
CSS3-. , , , , querySelectorAll.
$("#id .class tag")

querySelectorAll, CSS3.
: jQuery ,
CSS3, , , :visible.
$("#id .class tag:visible")
querySelectorAll, Sizzle, , , ,
.
$(document).find("#id").find(".class").find("tag").filter(":visible")
DOM: , , , .
$("#id .class tag").filter(":visible")
querySelectorAll , Sizzle
:visible.
- : CSS3 -,
:nth-of-type/:nth-child/:parent/:not/:checked , jQuery ,
querySelectorAll, , querySelectorAll
, .
321
- :nth-of-type
, .
document.querySelectorAll("div:nth-of-type(even):
nth-of-type(odd)")
// Safari/FireFox:0 IE/Opera:N/A
$("div:nth-of-type(even):nth-of-type(odd)");
// Safari/FireFox:0 IE/Opera:All
$("div:even:odd"); // All: 1,5,9
0, querySelectorAll ( ),
, Sizzle ( :). 1, 5, 9 . . , ,
: DOM- , ,
.
jQuery -, CSS3
Sizzle :visible/:animated/:input/:header.
, .
, , :visible/:hidden 1.2.6: , , DOM-, display visible (http://mabp.kiev.ua/2009/02/07/accelerates-selectors-in-jquery/).
$("div").filter(":visible")
-, , ,
:radio, ,
querySelectorAll; CSS3- input[type=radio] .

, , , A, B C.
:
$(".a,.b,.c")

$(".a").add(".b").add(".c")
.
322
, querySelectorAll,
, , .
,
, , my, :
$("[class^=my]")
add,
querySelectorAll (http://mabp.kiev.ua/2009/02/21/testingproductivity-jquery-selectors/).

tvidesign.co.uk Improve
your jQuery 25 excellent tips , , :
$(#listItem + i, $(.myList))
: , , ,
, :
$($(".myList")).find("#listItem")
document.
$($(".myList",document)).find("#listItem")

$($(document).find(".myList")).find("#listItem")
,
$(document).find(".myList").find("#listItem")
:
( DOM- ) ,
id?
323

. id .
$(".class",$("#id"))
jQuery ,
$(".class","#id")

$("#id").find(".class")
, :
$(document.getElementById("id")).find(".class")
, , . : , getElementById
querySelectorAll?
$("div",document.querySelectorAll("#id"))
,
$("div",[document.getElementById("id")])
, , - id
-, Sizzle, :
$(":visible","input[type=checkbox]")
-,
$(":checkbox")

324
$("input[type=checkbox]")
querySelectorAll .
C
.
, , , . ,
$("#id > div")
, .
, find:
$("#id").find("> div")
find ,
, children,
.
$("#id").children("div")
,
, find, closest, wrap, wrapInner,
replaceWith, clone. , wrapAll
(http://mabp.kiev.ua/2009/03/29/jquery-profiling/).
8.7.2.

jQuery , ,
, . .
: ,
li. , , ,
(, ) :
$("#id").siblings().add("#id")
325
, , :
$("#id").siblings().andSelf()
,
$("#id").parent().children()
siblings .
.
, :
var elt = $("#id");
elt.children().css({/**/})
elt.click();
:
$("#id").children().css({/**/}).end().click()

, . , , :
for(var i=0;i<1000;i++)
$("ul").append("<li>"+i+"</li>")
, .
,
:
var elts = $("ul");
for(var i=0;i<1000;i++)
elts.append("<li>"+i+"</li>")
! , append, DOM-
326
. ,
DOM-.
var str = "";
for(var i=0;i<1000;i++)
str += "<li>"+i+"</li>"
$("ul").html(str);
, DOM- jQuery
(http://mabp.kiev.ua/2009/03/29/jquery-profiling/). . html-,
jQuery, jQuery.
, , . html text :
jQuery(DOMElement).empty().append(text)
empty :
jQuery(DOMElement).children().remove()
remove ,
.
,
, - . jQuery 1.4.

, , , . - , , , . , : html-, jQuery . : :
$("<div></div>")
$("<div/>")
327
5 . , , :
, , , text , ,
.
$("<div>text</div>")
, :
$("<div/>").text("text")
c , attr/css/addClass (http://mabp.kiev.ua/2009
/03/29/jquery-profiling/), -
$("<div style='background:red;'/>")
$("<div/>").css({background:'red'});
, .
8.7.3.

, . . ,
:
$(window).bind("resize load",null,function(){
$("#id").css({width:document.clientWidth})
});
, IE8
, resize,
load.
:
$(window).unbind("resize load");
328
1.2.6, , , ,
.

:
var ul = $("<ul/>");
for(var i=0,j=1000;i<j;i++)
$("<li>"+i+"</li>").click(function(e){
alert(this.innerHTML);
}).appendTo(ul);
ul.appendTo("body");
1000 .
, :
var str = "";
for(var i=0,j=1000;i<j;i++)
str += "<li>"+i+"</li>";
$("<ul/>")
.append(str)
.click(function(e){
alert(e.target.innerHTML);
})
.appendTo("body");
8.8.
, . ,
. .
329
, PERSPEKTIVA IMPEREAL (http://www.vaclavak.ru/).

500 ,
( 150 ) . , , ,
.
8.8.1. :
webo.in, Firebug NET Panel (http://www.getfirebug.com/).
? Firebug . Firebug
.
.
. , ( ), ETag Last-Modified, ,
, .
(http://webo.in/my/action/load/)
, , . , (
- , ).

, . (http://webo.in/my/action/timings/)
, - .
8.8.2. :
:
gzip-. (

). Apache (httpd.conf .htaccess):
330
AddOutputFilterByType
BrowserMatch
BrowserMatch
BrowserMatch
BrowserMatch
DEFLATE
DEFLATE
DEFLATE
DEFLATE
DEFLATE
text/html
text/xml
image/x-icon
text/css
application/x-javascript
^Mozilla/4 gzip-only-text/html
^Mozilla/4\.0[678] no-gzip
Konqueror no-gzip
\bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

<FilesMatch .*\.(css|js|php|phtml|shtml|html|xml)$>
Header append Cache-Control private
</FilesMatch>
ExpiresActive On
ExpiresDefault "access plus 1 month"
<FilesMatch .*\.(shtml|html|phtml|php)$>
ExpiresActive Off
</FilesMatch>
,
, . Vary User-Agent Cache-Control private
- ( ,
,
).
, (HTML) .
, (http://webo.in/my/action/packet/),
, , .
8.8.3. :
/
. CSS Sprites.
331
4 . , CSS
Sprites , ( http://sprites.in/). , , .
GIF- PNG-.
. www.vaclavak.ru GIF. 180 .
(
), .

350 , , .
.
8.8.4. :
( . 8.6.
www.vaclavak.ru, : webo.in
332
),
. : , (
title) ( ;
,
).
: ( ) 16 ,
4 58% .
8.8.5. :
:
-, JavaScript
.
JavaScript, .
Google Analytics OnDOMReady ( ), window.onload.
. Google Analytics ( ,
. 8.7.
www.vaclavak.ru, : webo.in
333
: , ).
, . ( ) . (99% ) JavaScript
.

JavaScript-, document.write. iframe,
, .
, .
: 7,3 ( 100% ), 4
82% .
8.8.6.
( http://webo.in/) -
. . 8.8. www.vaclavak.ru
334
7 ( , ).
webo.in (
, http://webo.in/my/action/history/):
, , ,
( , ) , -, .
335

- . , , , .
- , , - .
.
, , , - -, . ,
,
, .
- ,
. ,
, .
,
,
.
:
http://speedupyourwebsite.ru/about/
-

.
.
.
.
25.12.2009. 60x90 1/16.
. . .
. . . 21. 2000 .
.
- , www.intuit.ru
, ., 8, .3.
E-mail: admin@intuit.ru, http://www.intuit.ru
.
, , . 3
: (499) 157-1902, (499) 157-5272
E-mail: lbz@aha.ru, http://www.lbz.ru

ReactiveWebsites v1 4

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

ReactiveWebsites v1 4

Загружено:

Авторское право:

Доступные форматы

-

3.1. GIF (Graphics Interchange Format)

8.1. ASP .NET: 100 A YSlow

data:URI ( ). (http://www.getincss.ru/) , (http://mearion.

. Google, Amazon, Flickr, Netflix, ,

Firebug DOM- CSS- , , JavaScript.

Web Inspector, Opera

. 1.6. HTTPWatch Firefox

. 1.7. YSlow Firefox

HTTP/1.1 HTTP- , Accept-Encoding:

<link type="text/css" rel="stylesheet" href="screen.css"

, , position: absolute position: fixed;

PHP, gzcompress , , gzip bzip2 , ,

2.2.2. Internet Explorer

2.3. - Apache, nginx lighttpd

# nginx, ngx_http_gzip_module ngx_http_gzip_static_module

compress.filetype = ("text/plain", "text/html", "text/xml",

return self::$supported = true;

$safe = array('text/html', 'image/x-icon',

53 17, 32% ( : gzip 15,5 ,

. 2.1. Prototype ( 1.6.0.2),

3.1. GIF (Graphics Interchange Format)

258 (17%) 7,63 (0%)

275 (11%) 6,19 (19%)

188 (40%) * 17,78 (19%)

250 (19%) 7,63 (0%)

Real GIF Optimizer 3.0.5 250 (19%) 7,63 (0%)

Ultra GIF Optimizer 1.02 250 (19%) 7,63 (0%)

A Smaller GIF 1.22

, SuperGIF ( BoxTop Software,

3.2. JPEG (Joint Photographic Experts Group)

Adobe Photoshop CS2

, Photoshop 55%, 105,5 .

jpegtran Independent JPEG Group, .

3.3. PNG (Portable Network Graphics)

, Adobe Photoshop ( CS4) , GIMP gAMA, .

4,38 4,55 (13%)

4,07 (22%) 3,07 484,87

, PNGoutwin, PNGout ( optiPNG ),

. 3.12. Color quantizer,

3.4. SVG (Scalable Vector Graphics)

Macromedia, Autodesk, Hewlett-Packard Visio Corporation, PGML

. 3.18. Macromedia FreeHand MX

. 3.19. Adobe Illustrator

GIMP Adobe Photoshop,

(http://smush.it) punyPNG (http://punypng.com), . , GIF

41% (112 K) 14% (37 K)

- API. Yahoo! API ,

CSS Tidy (http://csstidy.sourceforge.net/)

, JSMin IE. (, Web Optimizer).

4.2. CSS Sprites

foreach ($rule as $key => $value) {

!($bg == 'background-attachment' &&

4.3. CSS Sprites data:URI, Microsoft

data:URI CSS-. IE. : IE 8 data:URI. mhtml-.

header("Expires: Mon, 01 Jul 2019 00:00:00");

Header append Cache-Control "no-store, no-cache,

echo '<link rel="stylesheet" href="/css/main.css?". $mtime .

4.1. XHR, F5?

XHR <head> XHR <head> DOM

import/) Simplifying CSS Selectors (http://www.stevesouders.com/blog/

5.2.4. <link> @import

. 5.3. @import <link> IE. : getincss.ru