Вы находитесь на странице: 1из 338

-

-

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" />
<script type="text/javascript" src="script-2.js"></script>
<link rel="stylesheet" type="text/css" href="style-2.css" />
</head>

JavaScript, CSS JS
JS
.

, CSS,
.
<head>
<link rel="stylesheet" type="text/css" href="style-1.css" />
<link rel="stylesheet" type="text/css" href="style-2.css" />
<script type="text/javascript" src="script-1.js"></script>
<script type="text/javascript" src="script-2.js"></script>
</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-
mod_gzip_item_include
mime
^text/html$
mod_gzip_item_include
mime
^text/plain$
mod_gzip_item_include
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') {
return self::$supported = false;
}
$ua = $_SERVER['HTTP_USER_AGENT'];
// ,
// ,
// MSIE < 6.0SP2
if (preg_match('/MSIE [4-6](?:.(?!Opera|SV1))+/', $ua)) {
return self::$supported = false;
}
// CSS/JS,
//
if (
$type == 'notsafe' &&
preg_match('@Chrome/2|Konqueror|Firefox/
(?:[0-2]\.|3\.0)@', $ua)
) {
return self::$supported = false;
}

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 .
"' type="text/css"/>';
?>
, , .

,
. , . ,
,
, .
, .
, :
$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 .
"' type="text/css"/>';
apc_store($new_file_name, $mtime);
} else {
/* , ,
*/

150

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


"' type="text/css"/>';
}
?>
, (
, ),
( )
.
,
( ) 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- :
<style type='text/css'>
@import url('a.css');
@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 type='text/css'>
@import url('b.css');
</style>
IE ( 6, 7 8) , , . 5.2. , IE .
. 5.2. @import <link> IE. : getincss.ru

5.2.4. <link> @import


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

163

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

5.2.5. <link> @import


: 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:
@import url('b.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 ).
<style type='text/css'>
@import url('a.css');
@import url('b.css');
@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');
}],
[1, 'item2', function(){
alert('item2 is loaded');
}],
[1, 'item3', function(){
alert('item3 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":
self.response.headers['Content-Type'] =
"image/gif"
elif extension == "png":
self.response.headers['Content-Type'] =
"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;
this.db.transaction(function (t) {
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

}
this.set = function (name, value) {
this.db.transaction(function (t) {
t.executeSql('INSERT OR REPLACE INTO storage(k, v)
VALUES (?, ?)', [name, value]);
});
}
this.del = function (name) {
this.db.transaction(function (t) {
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
}
this.get = function (name) {
var out = this.storage.getItem(name);
return out && out.value ? out.value : out;
}
this.set = function (name, value) {
this.storage.setItem(name, value);
}
this.del = function (name) {
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.get = function (name) {
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.set = function (name, value) {
this._begin()
this.db.execute('INSERT OR REPLACE INTO storage(key,
value) VALUES(?, ?) ', [name, value]).close()
this._commit()
}
this.del = function (name) {
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, .
. 7.2. Web Optimizer

:
;
.


. Web Optimizer ,
:
. , ( index.php,
CMS) , .
Web Optimizer .

. 7.3. Web Optimizer

. 7.4. Web Optimizer

259

260

. 7.5. Web Optimizer:

. 7.6. Web Optimizer

261


. ,
, 2 3 .

. , . : ( .htaccess).
Web Optimizer
HTTP Basic Authorization. . , Web
Optimizer, , .
. 7.7. Web Optimizer

7.2.3. 3:
Web Optimizer
.

262

. 7.8. Web Optimizer

-, ( ),
( 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
ServerAlias i2.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.12. Web Optimizer


(
) .
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



(
),
.
,
, .
7.5.1. Web Optimizer
, 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, :
ServerAlias i1.site.ru
ServerAlias i2.site.ru
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
= "/usr/lib/php5/20060613+lfs/eaccelerator.so"
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
= "/usr/lib/php5/20060613+lfs/eaccelerator.so"
zend_extension
= "/usr/lib/php5/20060613+lfs/eaccelerator.so"
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
&amp;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>
<script type="text/javascript"
src="/javascripts/controls.js"></script>
<script type="text/javascript"
src="/javascripts/dragdrop.js"></script>
<script type="text/javascript"
src="/javascripts/application.js"></script>
<link href="/stylesheets/screen.css" type="text/css" />
<link href="/stylesheets/header.css" type="text/css" />
:
<script type="text/javascript"
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
AddOutputFilterByType
AddOutputFilterByType
AddOutputFilterByType
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