You are on page 1of 266

-

-

www.intuit.ru

, 2009

.

www.lbz.ru

004.455.1:004.738.12
32.973.202
36

36

..
. -: / .. .: - ; .
, 2009. 264 .: ., . ( ).
ISBN 978-5-9963-0024-2 (.)
, , ?
,
, ? ,
, ? , .

004.455.1:004.738.12
32.973.202

-
, ,
-
.
:
.
(499) 157-1902, (499) 157-5272,
e-mail: Lbz@aha.ru, http://www.Lbz.ru

ISBN 978-5-9963-0024-2 (.)

, 2009
.
, 2009


webo.in
-
- ,
HTML- -
, .
10 . ( -)
.
.
. -
- 10 . , . , -, .
,
.

-
-, .
2008 Web
Optimizator (http://webo.in/), , .
, ,
. , ,
. , ,
.

Web Optimizator
, -,
online- , ClientSide2007 (http://client2007.ru/),
.
online-
Web Site Optimization (http://www.websiteoptimization.com/), OctaGate
SiteTimer (http://www.octagate.com/service/SiteTimer/) Pingdom Tools
(http://tools.pingdom.com/fpt/),
.

. , .
-, , ,
- .
Web Optimizator (http://webo.in/).


, . - ,
, , , . .
-,

CSS- , .
-, Yahoo!
( 1, http://webo.in/articles/habrahabr/15-yahoo-best-practices/),
-.
JavaScript
- (
JavaScript CSS)
(http://kpumuk.info/), (http://covex.in.nnov.ru/), (http://jsx.ru/),
(http://lusever.ru/), (http://dpp.su/),
(http://pepelsbey.net/)
(http://arty.name/).
.
(http://bolknote.ru/),
data:URI- Internet Explorer,

CSS Sprites.
(http://abrdev.com/),
.
, Web Standards Group (http://web-standards.ru/). ,
, ,
.

( http://anton.lobovkin.ru/ ), (http://q-zma.com/), (http://kuklaora.blogspot.com/),


(http://ivan-nikitin.spaces.live.com/),
(http://alexey-bass.blogspot.com/), (http://blogs.gotdotnet.ru/
personal/XaocCPS/), (http://zencd.livejournal.com/),
(http://kurapov.name/), (http://lynn.ru/),
(http://bkonst.livejournal.com/), Timur Vafin
(http://timurv.ru/), (http://alfa.1nsk.ru/),
(http://core.freewheel.ru/), (http://ilive.in.ua/enej/),
(http://www.mzz.ru/) - ,
, .
, Web
Optimizator (http://webo.in/)
(http://habrahabr.ru/blogs/client_side_optimization/).
.


9
9
11
13
15
17

21
21
30
34
39
46
50
54

56
56
61
63
66

69
69
73
80
87
97
104

108
108
115
117

1. ?
1.1.
1.2.
1.3.
1.4. :
1.5.
2.
2.1. HTML
2.2. CSS JavaScript
2.3. CSS
2.4. JavaScript: ?
2.5. PNG GIF
2.6. favicon.ico ?
2.7. cookie
3.
3.1. Expires, Cache-Control
3.2. IE: pre-check, post-check
3.3. Last-Modified ETag
3.4. iPhone
4.
4.1. HTML- CSS-
4.2. JavaScript-
4.3. CSS Sprites
4.4. data:URI
4.5. CSS Sprites data:URI
4.6.
5.
5.1.
5.2. Content Delivery Network Domain Name System
5.3.

126
129
134

140
140
146
149
155

163
163
172
182
191
205
207
212
215

220
220
237
240
247

5.4. , 404-
5.5. HTTP-
5.6.
6. CSS-
6.1. CSS expressions
6.2. : id class?
6.3. DOM-
6.4. reflow!
7. JavaScript
7.1. window.onload
7.2. JavaScript
7.3. JavaScript
7.4.
7.5. JavaScript-
7.6. DOM
7.7. JavaScript
7.8. ,

8.
8.1.
8.2.
8.3.
8.4.

263

263

1. ?
1.1.
- HTML-
. ( ),
, , , .
. 1.1.
, Web Optimizator 2008

10

, 5%
. ,
- 5 ,
. .
, ,
15%, .
, (HTML, CSS, JavaScript) . , . .

, 3 :
.
.
.

6 (
).
. , .
,
, .
. , CSS Sprites data:URI
. .
,
.
.

11

CSS-, . CSS- .
JavaScript.
JavaScript,
-. .
, , , -
. - ( 2-3) .
.
- (gzip deflate).
, CSS Sprites data:URI, . ( )
.

1.2.
, 810
. ,
-
.
2007 , 33%
4 , 43% 6 .
,
, 510
.

12


, 2004 , ,
( )
5 8 . ( ), , , 38 . 23 ( - , , ).
, , 95%
8 . , ( ) , 10 .


. , Google (http://www.google.com/) 10 0,4 0,9 30 20% ( , 2006 ). Google Maps
(http://maps.google.com/) 100 70-80 , 10% 25% ( 2006 ).
2007 Amazon : 100 Amazon.com
1%. Microsoft Live Search
(http://www.live.com/) ,
1 1%
1,5%. 2
2,5%
4,4%.

, , ,
. ,

13

,
, ,
. , , .
,
: (,
23 ) ( ) ( ,
) .
( )
, ,
. , , , - .

, .
, . -, ,
,
.

1.3.
. 1.2.

14

- .
1. .

. , , , , JavaScript.
2. ( ) -. ( 1), (
) ( , )
.
3. .
, ,
.
4. - . ( )

. ,
- .

( ) . -, ,
.

-
:
. ,
-
.

, , .
.

15



. : HTML-, CSS-/JavaScript-
, .
( ,
- , )
, . , ( ,
), .
,
JavaScript- - .
: , ( ), (, , ).
, -. , .

1.4. :
:
. . , .

, , Cache-Control ( max-age, pre-check,
post-check), ,

. -

16


URL ( RewriteRule GET-).
-, ETag Last-Modified, , ,
. , - 304 , .
, ( ) , .
.

, , , .
, .

. , ( 80%
), CSS Sprites, Image Map
data:URI .

HTML- 8-10 .
.

, gzip-
9598% . ( proxy- ), 3-4 .
HTML- gzip .
, , .
.

17

?
, .
: - , .
,
.
-, .
, . -,
.

1.5.
,
, ,
. , ,
. - ,
,
, ,
.
, -, .
1:
,
. . (gzip)
(CSS). CSS- JavaScript- (
; ).
CSS-, head , .
, ( , keep-alive -

18

TCP/IP-, ). , - (
).
HTML. JavaScript ( , ). JavaScript ( -) . !
2:
( ).
. .
. .

,
.
. ( ),
.
.
CSS Sprites , ( ).
data:URI ,
.
.
3:
, .
, ,
. .
,
JavaScript. -

19

, ; , ,
( ,
).
HTML-,
JavaScript (
, , JavaScript).
AJAX-; , HTML- , JavaScript-. , , , - (
).
,
JavaScript- ( , , JavaScript-; )
body ( -).
:
1. DOM-, ( );
2. , ;
3. JavaScipt;
4. ;
5. .
JavaScript,
.
DOM- JavaScript-. , . CSS- ( CSS-
) - ,
. , CSS-
CSS Sprites.

20

. -
static.site.net/jas/componentName1.css;componentName2.css
static.site.net/jas/componentName1.js;componentName2.js.
:
1. /jas/ ( , , ) , .
2. , ,
(,
255 Ext3)
.
4:
, , . (
1020% ), .

, ,
JavaScript-,

(, ).
, JavaScript- -
.

21

2.
2.1. HTML
(gzip-, deflate-) . - , 10 .
.
- gzip (GNU zip)
. , zip. gzip RFC1952 (http://tools.ietf.org/html/rfc1952),
4.2 1996 .
-
gzip.
mod_gzip
HTTP/1.1, - , , AcceptEncoding HTTP-:
Accept-Encoding: gzip, deflate

22

- , , . Content-Encoding
, .
Content-Encoding: gzip
5 , . : gzip-
?
mod_gzip/mod_deflate ? ?

-
. :
gzip = / + +

, ( 500 128 ),
- ( ). , , . .
, ,
, ( , ), :
gzip = FS + LI + K*size
FS , LI , gzip, K .

23


, 2 :
: size gzip.
: size FS.
2 , ? () , 2 (
) . : .
HTML- ( ). 500, 1000 ... 128000 .
,

Linux (cat, gzip), .

. 2.1. gzip-

24

. ,

, .
. 10000 .
, .
. 2.2. gzip-

, ,
, (, ). (. 2.3).

:
, , gzip ?
: -, -
, .
. , ,

.

25

. 2.3. gzip-

-, . - (, 0W, squid, nginx, thttpd) ,


, . ,
.
: gzip ?
, . , ,
,
(, , ) .
, Dual Xeon 2,8 .
, CPU
1 . : ,
,
, 1 . ( ), .
, ( )
(100 / 1500 /) (280 1 ). ,

26

gzip 1000
1500 / ( ).
. 2.4.
100 1500 280 1000

gzip-
, gzip
, .
, , ,
.
, 10000 . gzip
. ,
. .
.
, ( ).
( % ) .

27

. 2.5. gzip

. 2.6. gzip-


, . HTML-
4 ,

28

gzip (
).
() , , ,
, .
, , ( gzip-), , .
gzip- HTML- , . (
), .
Apache 1.3
,
.
Apache 1.3, 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_minimum_file_size 1000
#
mod_gzip_maximum_file_size 500000

29

# ,
#
mod_gzip_maximum_inmem_size 60000
# ,
# gzip-
mod_gzip_min_http
1000
#
mod_gzip_item_exclude reqheader User-agent: Mozilla/4.0[678]
# .html
mod_gzip_item_include
file
\.html$
# .css/.js ( )
mod_gzip_item_exclude
file
\.js$
mod_gzip_item_exclude
file
\.css$
#
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
# Vary
# , -
mod_gzip_send_vary
On
</IfModule>
Apache 2
Apache 2 .

30

# Content-Type .gz
AddEncoding gzip .gz
# HTML- XML-
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
# ( )
AddOutputFilterByType DEFLATE image/x-icon
# (
# ,
# 7 1)
DeflateCompressionLevel 9
#
DeflateWindowSize 15
#
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Vary
# , -
Header append Vary User-Agent
#
# -
<FilesMatch .*\.(html|phtml|php|shtml)$>
Header append Cache-Control private
</FilesMatch>

.

2.2. CSS JavaScript


, CSS- JavaScript- .

31

, -,
:
, gzipencoded;

gzip- (, Apache);
( .htaccess), Content-Type.
, , , , .
.


(httpd.conf .htaccess, ),
. , JavaScript- jquery.js . jquery.js.gz ( 7-zip , Windows). , jquery.js.gz.
, .
, :
gzip jquery.js -c n -9 > jquery.js.gz
c (
jquery.js.gz), -n ( ), -9 .
, .
Safari
, . Safari .gz:
. ? .
,
(-

32

, nogzip). (jquery ):
cp $src/jquery.js $dst/jquery.nogzip.js
gzip $dst/jquery.nogzip.js -9 n -c > $dst/jquery.js
$src , , $dst
. ,
.
Apache
Konqueror , (CSS JavaScript), (
),
. ( , ) .
<IfModule mod_rewrite.c>
RewriteEngine On
# Konqueror
RewriteCond %{HTTP:Accept-encoding} !gzip [OR]
RewriteCond %{HTTP_USER_AGENT} Konqueror
RewriteRule ^(.*)\.(css|js)$ $1.nogzip.$2 [QSA,L]
</IfModule>

mod_rewrite. ,
(
). Apache , . .
RewriteEngine .
. , Vary Cache-control ,
, ,
User-Agent ( , ).

33

<IfModule mod_headers.c>
Header append Vary User-Agent
# css/js- Content-Encoding
<FilesMatch .*\.(js|css)$>
Header set Content-Encoding: gzip
Header set Cache-control: private
</FilesMatch>
# Content-Encoding ,
<FilesMatch .*\.nogzip\.(js|css)$>
Header unset Content-Encoding
</FilesMatch>
</IfModule>
, , Content-Encoding,
. .

, :
,
. ,
(, , , ).
, (
mod_headers; ,
) :
1. ( ) Apache .htaccess.
2. ( 7-zip gzip)
( , .css
.js). , anyname.css,
anyname.css.gz;
anyname.css . gzip :
gzip -c -9 -n anyname.css > anyname.css.gz
mv anyname.css anyname.nogzip.css
mv anyname.css.gz anyname.css

34

3.
nogzip.css nogzip.js,
. , anyname.css anyname.nogzip.css, . gzip
.
nginx
, , : ngx_http_gzip_static_module,
.gz
( Apache 1.3). , , ( ).
, ,
, ( ngx_http_gzip_module) . nginx Apache
.
, . CSS- JavaScript-
.

2.3. CSS
CSS- ,
. , , .
5
CSS-; , . .

CSSMin (http://code.google.com/p/cssmin/). CSS- ( ) .

35

Minify (http://code.google.com/p/minify/). , CSS-, JS-. ,


,

. ,
.
YUI (http://developer.yahoo.com/yui/compressor/). YUI-compressor ( 2.2.5). , , .
CSS Minifier (http://www.artofscaling.com/css-minifier/).
(
CSS Tidy), , , .
.
CSS Tidy (http://csstidy.sourceforge.net/).
CSS- . ,
,
CSS-, , www.codebeautifier.com.
.

. ( Minifier ; , ), . ( : CSS Tidy ,
).

? ( ) ( ).
.
.
:
,
.
( ) gzip. ( ). , Minifier.

36

. 2.7.
CSS- gzip

, ,
.
. 2.8. CSS-
gzip

37


.
. 2.9. CSS-
( )

, CSS Tidy (, ,
6% ).

-, gzip ( 81%),
.
-, ( ,
CSS) ( 83%) , (. . ).
-, .
, gzip (, - ),
. ( 1 )
( -

38

- ),
HTML-. , - - 3-4% .
-, , , , . Minifier CSS Tidy.
, , CSS- ( 79%)
(
82%). , CSS
Tidy Minifier ( ) , .

JavaScript, CSS .
, ( ), . ,
( 1 URL ).
Perl :
#!/usr/bin/perl
my $data = ;
open F, $ARGV[0] or die : $!;
$data .= $_ while <F>;
close F;
$data
$data
$data
$data
$data

=~
=~
=~
=~
=~

s!\/\*(.*?)\*\/!!g;
s!\s+! !g;
s!\} !}\n!g;
s!\n$!!;
s! \{ ! {!g;

$data =~ s!; \}!}!g;


print $data;

#
#
#
#
#
#
#
#

39

CSS- ,
, :
perl compress.pl site.source.css > site.compress.css
50% (
; ),
, gzip
.

2.4. JavaScript: ?
JavaScript-

JavaScript-. , , :
-
JavaScript-?
,
?
, ?
, .
.

5
JavaScript-, ( ,
, , ,
production-).
1. JSMin (http://www.crockford.com/javascript/jsmin.html). ,
, ,
JavaScript.

40

2. JavaScript::Minifier (http://search.cpan.org/~pmichaux/JavaScriptMinifier-1.04/lib/JavaScript/Minifier.pm).
, JSMin, .
3. Dojo ShrinkSafe aka Rhino (http://dojotoolkit.org/docs/shrinksafe).
Rhino, Dojo. JAR-.
4. Dean Edwards Packer (http://dean.edwards.name/packer/).
Dean Edwards. ,
PHP4/5.
5. YUI Compressor (http://developer.yahoo.com/yui/compressor/).
Yahoo.
2.2.5. JAR-.

JavaScript- ( ,
) .
, .
- ,
.

(, ).
, ,
-
( , ). .

, . ? ( ) ( ). . .
. Packer .
, , .

41

. 2.10.
JavaScript- gzip

. 2.11. JavaScript gzip


( )
.

42

. 2.12. JavaScript ( )

, YUI Compressor
.

-,
JSMin JavaScript::Minifier , . ( , , , ), (3-5 0,3-0,5
Packer PHP).
-, , 1 70%, . , . ( 20 )
(.gz), JSMin.
-, ,
, Packer,
(,
1 ). 50%-
.

43

-, (
gzip- , ) YUI Compressor ( 6%- gzip).
?
, JavaScript-
,
. JS-
JSLint (http://jslint.com/),
.
JavaScript-
2008 PDWiki JavaScript. , JavaScript- (,

).
, . , -, :
.
JavaScript
JavaScript- , , . ,
. jQuery
: , ( YUI Compressor)
( Packer). ,
: , , , .
: ( eval
replace) JavaScript . -

44

. , ,
,
.

jQuery.
2.1. jQuery,

519.7214

591.6636

645.4818

, :
_ = __ + __
, , , .
, . gzip- , YUI Compressor CSS- JavaScript-.
.
JavaScript-

JavaScript- . ,
. , jQuery

(200400 ).

45


.
2.2. (
, )

jquery-1.2.1

732.1935

dojo-1.0.1

911.3255

prototype-1.6.0

923.7074

yahoo-utilities-2.4.0

927.4604

protoculous-1.0.2

1136.5497

, , ,
, , Yahoo
, 50%
. , , . , .
2.3. ( , )

yahoo-utilities-2.4.0

122.7867

Jquery-1.2.1

131.1841

prototype-1.6.0

142.7332

dojo-1.0.1

171.2600

protoculous-1.0.2

276.1929

46

, ( 10-30
Dojo/Scriptaculous). ,
JavaScript-.
.

.

2.5. PNG GIF


(. Portable Network
Graphics, PNG) , GIF-. PNG
. PNG 1995
Unisys LZW-, GIF.
Unisys ,
GIF PNG . GIF-
, PNG,
.

PNG deflate- 32 . Deflate
Lempel-Ziv (LZ77), zip- gzip-. Phil Katz PKZip, deflate LZ77 Huffman 10-30% , LZW,
. gzip, PNG- , 1 9. 6.
9.
, , PNG,
10-30% , GIF,
(
). -

47

,
.
PNG
PNG , , . PNG 16- . PNG .
(. Up),
PNG. PNG (8
) ,
(. none),
.
(. Adaptive) .
Greg Roelofs, PNG 24- RGB-,
. , PNG-. ,
,
.
- PNG8 (8-
), GIF-. PNG -
, , RGBA-, RGB-XOR-, GIF. , 8- 32-. PNG , GIF89a.
PNG
LZW- GIF.
PNG-
25% , GIF 50%
.
GIF- PNG-
.
PNG-.

48

8- ( ), 16- 48 .
- 16 .
- ( ).
LZW .
(Adam7).
( ).
, .
PNG
Netscape PNG : 4.04, Internet Explorer . Macintosh IE PNG 5.0 (
-). MSIE Win32 Unix PNG ( ) 4.0,
- 7.0 ( AlphaImageLoader).

PNG, 1- ,
PNG GIF.
PNG CSS-
, PNG- . ,
, PNG ( gAMA-). , Safari Mac OS 10.4
( sRBG-;
).
PNG- , -, CSS-
PNG, , ( ).
PNG: MNG PNG+
(. Multiple Network Graphics,
MNG) PNG-,

49

GIF89a. MNG- ( libmng).


Mozilla ( ) PNG- Firefox 3, .
PNG, - ; , PNG.
, MNG, PNG.
GIF89a
Flash. , SVG JavaScript- . ,
.
PNG
PNG .
,
.
,
.
, , .
, . PNG- , 20% 35% PNG-. ,
PNG-, , pngout pngcrush.

, . ,
( Linux):

50

1. GIF PNG ( , ):
convert image.gif image.png
:
gif2png -nstO image.gif image.png
2. PNG- :
pngcrush qz3 brute image.png result.png
gAMA-,
pngcrush qz3 rem gAMA brute image.png result.png
,
,
pngcrush qz3 rem gAMA -rem cHRM -rem iCCP -rem sRGB \
brute image.png result.png
3. JPEG- ( ):
jpegtran -copy none -optimize -perfect image.jpg > result.jpg
Windows PNG- TweakPNG (http://entropymine.com/jason/tweakpng/).
jpegtran jpeg, http://sourceforge.net/projects/gnuwin32/ .

2030%
.

2.6. favicon.ico ?
Yahoo! ( 2) favicon.ico. -

51

. .
www.mysite.ru/favicon.ico.
:
,
404-,
cookie,
CDN,
.
(<=1 ).
.
Expires.
favicon.ico 5-10% .
favicon.ico, -, - , -, , . , ,
, ,
. , , .
.ico , .

favicon.ico .ico ( , ,
MIME- ; ; Wikipedia, (http://en.wikipedia.org/wiki/
ICO_%28icon_image_file_format%29). ,
( JPEG).
, BMP,
.
( , , , :
http://www.daubnet.com/formats/ICO.html ), : (, GIF)
( PNG). ? .

52

, :
BitCount
Compression

2 bytes
4 bytes

bits per pixel = 1, 4, 8


Type of Compression = 0



Firefox 3, base64- .ico. ( 4 ) 318
( 894 ; 3 ). 2
Safari,
, , , .
, - , 576 .
, , -,
2 , . -, (32x32, 48x48) . . . 16 37.
( ).

,
favicon.ico
( 16x16 ). 3232 4848
4 9 .
2.4. favicon.ico 16x16

( )

198

318

1406

24

894

32

1150

53


, 62 , .
PNG ?
Wikipedia , .ico .png
, .
head Internet
Explorer, . , PNG-
, ICO, , ,
IE.
?

(PNG, GIF) favicon.ico,
gzip- ? . . 300
( 3 ).
, favicon.ico
, . , image/x-icon .
data:URI ?
favicon.ico data:URI ( ),
(,
- HTML-, ).
, . ,
.

54

Yahoo! , favicon.ico .
, - ,
CSS- ,
( ).
(
10 , 16x16 ?)
. .

2.7. cookie


cookie.
Cookie HTTP-, , ( , : Cookie Set-Cookie
). HTTP- 5001000 , cookie
( 4 ).
cookie . , .
,

. cookie .
, cookie
( ).

55

cookie , ,
: cookie , .
.
cookie
,
cookie ,
, cookie .
(
, cookie *.domain.ru)
( ). -: .

56

3.
3.1. Expires, Cache-Control
. - , , , .
(
) ( ) ,
, . , -: -
.
URL.
, ,
. - , (, common.v1.css common.v2.css). , ,
.

57

HTTP Expires
Expires HTTP 1.0.
HTTP- (, HTML- ) , . .
. , ,
.
, ( Internet Explorer 4.0) - GET- , , .
,
, . :
, ,
. , Expires , , , .

, . , ,
, , . , ? .
Cache-Control, Expires
HTTP 1.0 1.1. ,
,
:
Date: Tue, 17 Apr 2008 18:39:57 GMT
Cache-Control: max-age=315360000
Expires: Fri, 14 Apr 2018 18:39:57 GMT
Last-Modified: Mon, 16 Apr 2008 23:39:48 GMT

58


RFC-2616 HTTP- . , .
.
Expires .
, ,
( ),
, :
Expires: Mon, 13 Oct 2019 00:00:00 GMT
Cache-Control , .
:
Cache-Control: no-store, no-cache, must-revalidate
, , , :
Cache-Control: max-age=31536000
(60 * 60 *24 *
365 ).
Pragma: no-cache HTTP/1.0.
. , ,

. , wget HTTP/1.1 (-
Content-Encoding: chunked).

Apache
( ). :

59

# , mod_headers
# Cache-Control
<IfModule mod_headers.c>
Header append Cache-Control no-store, no-cache,
must-revalidate
Header append Pragma no-cache
</IfModule>
# mod_expires
# Expires
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault now
</IfModule>


.
. , .
# 1 , mod_expires
# Apache max-age
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault access plus 1 year
</IfModule>
, .
,
?

( ), - , - : . ?

60

, ,
, . .
URL, .
. -,
GET- , ,
http://webo.in/a.css?v23

http://webo.in/a.css?20081010
( ,
), .
-,
http://webo.in/a.v23.css

, GET-. ( ) (, Apache),
. (
CSS- JavaScript-):
RewriteRule ^(.*)\.(v[0-9]+)?\.(css|js)$ $1.$2 [QSA,L]
, a.v23.css a.css.
, . GET- .

, GET-. : , ? ,
. , , .
- ,

61

, . , X-Forwarded-For .

3.2. IE: pre-check, post-check


- . , . , HTTP- , Internet Explorer 5 2 HTTP- Cache-Control: pre-check
post-check. , ,
IE.
, Internet Explorer ,
.
, .

post-check pre-check Cache-Control


:
post-check
, .
, , .
pre-check
,

.

, , Cache-Control (-

62

. 3.1. pre-check post-check

HTTP-), IE
:
post-check,
.
, post-check pre-check,
. HTTP , . ,
. :
, ,
.
, pre-check,
HTTP, . , . ,
Cache-Control .
, ( F5)
,

63

If-Modified-Since.
.

Internet Explorer, 1 (pre-check=3600)
. , 15 ,
Internet Explorer , , , .
Cache-Control: post-check=900,pre-check=3600

IE
, Internet Explorer.
, .

3.3. Last-Modified ETag


,
.
Last-Modified
Cache-Control,
,
,
. , ,
, , (, ). Last-Modified If-Modified-Since.
? Last-Modified,
.

64

, IfModified-Since . , , -
304 .
,
, , , .
ETag
ETag (. Entity Tags ) , -, , ,
, ,
. LastModified ,
. ETag ,
HTTP- ETag:
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2008 03:03:59 GMT
ETag: 10c24bc-4ab-457e1c1f
Content-Length: 19145
, ,
If-None-Match ETag . ETag , - 304,
, , 19145 :
GET /b.png HTTP/1.1
Host: i.webo.in
If-Modified-Since: Tue, 12 Dec 2008 03:03:59 GMT
If-None-Match: 10c24bc-4ab-457e1c1f
HTTP/1.1 304 Not Modified
ETag Apache , ,
:
FileETag MTime Size
ETag
.

65

ETag Last-Modified
ETag , ,
. ETag ,

( ()
) , . Apache, IIS ETag , .
Apache 1.3 2 ETag inode-size-timestamp.
, , , .
IIS 5.0 6.0 ETag: Filetimestamp:ChangeNumber.
ChangeNumber IIS
IIS, , , -.
ETag, Apache IIS , . ETag , 304 , ETag .
200 .
,
. Apache IIS,
ETag , , , , , -
, .
Expires ,
GET-, .
,
ETag, . Last-Modified
, ETag
. Apache,
FileETag none
.

66

3.4. iPhone
MacWorld2008 Steve Jobs , Apple
4 iPhone, 20 iPhone
. Net Applications , iPhone 0,12% 2007 ,
, , , Windows. iPhone Apple
, .
- , iPhone-
Safari . iPhone
, .
,
.
Yahoo! iPhone.
:
;
;
gzip- ;
iPhone.
Apple iPhone,
iPod Touch .

, 25 , iPhone . -,
iPhone, 25 ,
.
,
, 25 ,
, . , 25 . .

67

www.apple.com , 10 .
( ).
, iPhone , .
, . ,
, .
, (
) 475-500 .

,
. 25 , . Safari
iPhone , .
, , .
,
. 25 , .

, iPhone iPod Touch , , , . sleep
, . , , . ,
, ?
, iPhone
. , Safari
iPhone
, .

iPhone.

68


. 25 .
iPhone HTTP- . ,
. , CSS Sprites data:URI .

69

4.
4.1. HTML- CSS-
. , 40% .
, ,
. , data:URI, , .
cookie , . 400- 1000 ,
cookie.
cookie ,
(, ,
yandex.net) ,
cookie .
, ,
. , JavaScript- , CSS-. , -

70

. GIF- ( ), CSS-
( ) () .
HTML- (
, , ). , .
CSS-
- , , , .
, , . -
.
, . HTML- , , . . . .
CSS
, Internet
Explorer. , ,
. Firefox , , ,
, .
HTML 4 ,
head : <a>, <link> <head>,
. ( Firefox
Opera ). CSS head- .

71


. .
CSS-
:
CSS,
-. : CSS- , :
<link type=text/css rel=stylesheet href=screen.css
media=screen />
<link type=text/css rel=stylesheet href=print.css
media=print />
, .
,
( Opera:
,
: preferences (ctrl-f12) -> advanced
-> browsing -> loading -> ->
-> -> ),
, ,
. , , ,
. , (Safari, , : ,
; ).

: CSS-
@media. ,
:

72

@media print {

}
. , . , CMS ( , Drupal).
CSS- ,
,
( 5
). HTML- ( , , ).

,
, ( Internet
Explorer, -
Firefox, Opera Safari). , HTML , Internet Explorer ( - ).
:
<link type=text/css rel=stylesheet href=main.css
media=screen />
<!--[if lt IE 7]><link type=text/css rel=stylesheet
href=ie6.css media=screen /><![endif]-->
main.css, IE6
ie6.css. Internet Explorer ,
, .
( IE), CSS- CSS. , IE7,
:

73

*+html body {
margin: 0 auto;
}
IE6:
* html body {
margin: 0 auto;
}
IE5.5- ( , ,
IE6, ):
* html body {
margin: 0;
marg\in: 0 auto;
}
CSS-
. (, ,
CSS- HTML- , ; ).

4.2. JavaScript-
JavaScript- ,
. :
, . ,
.
, : , .
.
.
.

74



. JSON , AJAX , DOM ,
. . . -
, .
. ( DOM, JSON AJAX .)
- , .
, . AJAX? ? , - ?
, , .

, , . , :
dom.js
array.map.js
array.js
sprinf.js
calendar.js
date.js
mycoolcombobox.js
dom.js
array.map.js
array.js
sprinf.js
animated.pane.js
pane.js
dom.js
array.map.js
array.js
sprinf.js
animation.js
transition.js
... ...

75

.
dom.js animated.pane.js.
:

array.js
array.map.js
sprinf.js
dom.js
array.js
array.map.js
sprinf.js
dom.js
pane.js
transition.js
animation.js
animated.pane.js

... :

array.js
array.map.js
sprinf.js
dom.js
pane.js
transition.js
animation.js
animated.pane.js

.

, ,
( ):
// #REQUIRE: array.map.js
// #REQUIRE: sprintf.js
....

.
, ,

76


.
?
, ,
. .
-
JavaScript-,
,
.
,
JavaScript-, .
? . ,
, ,
.
HTTP-
HTTP-
:
1. T1 ;
2. , , ;
3. T2, , ,
L R,
.
,
HTML- : , CSS- JavaScript. , CSS JavaSscript- ( , 99% ).
:

HTML
A: T1
A: L + R(A)

77

B: T1
B: L + R(B)
C: T1
C: L + R(C)
3(T1+L) + R(A+B+C).
, :

HTML
A+B+C: T1
A+B+C: L + R(A + B + C)
2(T1 + L).
20 19(T1 + L). /
256 / ~2030 , 950
. ,
300 , 6-7 .
, ,
. ?

P1, P2 P3,
. P1 A, B C,
P2 A, D, P3 A, , E F. ,
:
P1 A, B C.
P2 D.
P3 E F.
JavaScript- , :
P1 (A+B+C+D+E+F).
P2 .
P3 .

, .
/ 23 .
, , :

78

P1 (A+B+C).
P2 (A+C+D).
P3 (A++E+F).
, , . ,
.

, .
, (, ,
) . ,
A B, :
P1 (A + B) C.
P2 D.
P3 (E + F).
: ,
? ?. : 2-3 . ; , , .
PHP
JavaScript- CSS- ,
(
). , ,
,
, gz- , md5-
.
:

79

function cache_js(){
$arrNewJS=array();
$strHash=;
$strGzipContent=;
$intLastModified=0;
//
foreach ((array)$this->scripts as $file){
if (substr($file,0,5)==http:) continue;
if ($file[0]==/) $strFilename=sys_root.$file;
else $strFilename=sys_root.
app/front/view/.$file;
$strHash.=$file;
//
$strGzipContent.=file_get_contents($strFilename);
$intLastModified=$intLastModified
<filemtime($strFilename) ?
filemtime($strFilename) :
$intLastModified;
}
$strGzipHash=md5($strHash);
$strGzipFile=sys_root.app/front/view/js/bin/.$strGzipHash..gz;
//, gz-
if (file_exists($strGzipFile) && $intLastModified>filemtime($strGzipFile) || !file_exists($strGzipFile)){
if (!file_exists($strGzipFile))
touch($strGzipFile);
// php zlib
//
$gz = gzopen($strGzipFile,w9);
gzputs ($gz, $strGzipContent);
gzclose($gz);
}
//
$arrNewJS[]=js/bin/.$strGzipHash..gz;
$this->scripts=$arrNewJS;
}

80

CSS , . YUI Compressor, ( , , , , ) .


PHP Speedy
,

.
: , - CSS- JavaScript-?
, CMS, ?
PHP
Speedy (http://aciddrop.com/php-speedy/) -, , .
, . CSS- JavaScript-, ,
( Minify, http://code.google.com/p/minify/,
), gzip-.
. , ,

, , .
Wordpress ,
. : ,
.
, Wordpress .

4.3. CSS Sprites


,
. -

81

CSS Sprites ( CSS Image Maps).


. ,
.
,
, CSS-
background-position .
( 99,9%) -,

, CSS- ,
JavaScript- (. .
), - . .
rollover-

( ). -
onmouseover/onmouseout .
( , ) . , .
CSS (
HTML- , , ).
: .
. 4.1. rollover-.
: www.websiteoptimization.com

CSS- :
a.sprited {
background: yellow url(http://site.ru/img/button.png)
0 0 no-repeat;
width: 100px;
height: 20px;

82

}
a.sprited:hover {
background-position: -100px 0;
background-color: red;
}
,
( ). , .
( ,
).
rollover-
,
. ,
:
. 4.2. rollover-.
: www.spegele.com

IE
IE , , . , . ,
,
, :

83

<a href=/><span></span></a>
a {
background: yellow url(http://site.ru/img/button.png) 0 0
no-repeat;
display: block;
height: 20px;
width: 100px;
}
a span {
background: red url(http://site.ru/img/button.png) -100px 0
no-repeat;
display: block;
height: 20px;
width: 100px;
}
a:hover span {
background: transparent;
}
, .
IE
backgroundImageCache ( try , ):
try {
document.execCommand(BackgroundImageCache, false, true);
} catch (e) {}
,
.
CSS Image map
, - .
,
, , .
,

84

. Image
Map.
. 4.3. CSS Image Map. : www.acronis.com


CSS Sprites
. .
:
,
, , . , ,
. . ,
CSS Sprites.
,
, ( - ). , .

-. , -

85

. :
. 4.4. --. : webo.in

-
www.csssprites.com. , .
www.printf.ru/spritr/. , , .
spritegen.website-performance.org. ,
CSS-, .

, . 5 (
).
1. .
2. ,
(repeat).
3. , (repeat-x).
4. , (repeat-y).
5. , (norepeat).
? : - ,
- , . 1020 : ,

86

(
).
, ( ) ( ,
,
). (
), .
?
, . ,
.
(
),
. , (
) .
, (
).
. 4.5.
. : webo.in

( ,
, ) 4 () .
4- .
. , JavaScript,
? .

87

, .

4.4. data:URI
data:URI -. RFC 2397, URI ( ). , .
HTTP-
.

Opera 7.2+, Firefox, Safari, Netscape Mozilla
data:URI, Internet Explorer 57 . Internet
Explorer 8 . Internet Explorer ( ).
data:URI
data:URI , . :
data:[< >][;base64],<>
mime-
(, image/gif), base64- . ( ,
, ):
<img src=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALC
AIAAAD5gJpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP
JJREFUKM9tjz1OwlEQxH8P/hV2NIZY0NhYeA0TbkLLPTyFV6DgLhYWFIaOmEhM3sz
btXhEPmSy2Z3d2Y9sORySEyKih87iCg4GYDIByEwoQGbPCowzR3mG3e576Jsz85zk

88

LZRSIqIsFrlc5n5PBK1la0Rka2lfeDun07JafQ2bTTw/l+0WOy3klFLKWq/9fA4wA
DZS/g10ufdVpeqxYheIAehHq9Li1PrvgpQQw5rxk15/6mfYWR1yVIUc0pFUNync7v
yw5m14gbHfQx+3l3di4Vba4z0MASOZ2Swl3LCQitQ/w8amtW4B5QBxZlymVxLwCz+
JZR4AeSrEAAAAAElFTkSuQmCC width=16 height=14 alt=
/>
:
. 4.6. , data:URI.
webo.in

CSS
, HTML-,
. ( : HTML-
, HTML,
). CSS- ,
, :
ul {
list-style: none;
}
ul li {
margin: 0 0 1px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
AAABAAAAALCAIAAAD5gJpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbW
FnZVJlYWR5ccllPAAAAPJJREFUKM9tjz1OwlEQxH8P/hV2NIZY0NhYeA
0TbkLLPTyFV6DgLhYWFIaOmEhM3szbtXhEPmSy2Z3d2Y9sORySEyKih8
7iCg4GYDIByEwoQGbPCowzR3mG3e576Jsz85zkLZRSIqIsFrlc5n5PBK
1la0Rka2lfeDun07JafQ2bTTw/l+0WOy3klFLKWq/9fA4wADZS/g10uf
dVpeqxYheIAehHq9Li1PrvgpQQw5rxk15/6mfYWR1yVIUc0pFUNync7v
yw5m14gbHfQx+3l3di4Vba4z0MASOZ2Swl3LCQitQ/w8amtW4B5QBxZl
ymVxLwCz+JZR4AeSrEAAAAAElFTkSuQmCC) 0 0 no-repeat;)
height: 14px;
text-indent: 10px;
}

89

data:URI
. -,
base64- CSS-
, . IE 7 .
PHP:
<?php echo base64_encode(file_get_contents
(../images/flag.png)) ?>
base64.
. , CSS-,
, 5 (
). ,
CSS-, .
Internet Explorer
IE data:URI.
(,
, IE),
IE
. JavaScript IE,
JavaScript-. ,
mhtml-.
PHP- base64-
( , , , , , IE URL , base64):
ul {
list-style: none;
}
ul li {
margin: 0 0 1px;
background: url(data:image/gif;base64,<?php

90

echo base64_encode(file_get_contents
(../images/flag.png))
?>) top left no-repeat;
height: 14px;
text-indent: 10px;
}
CSS-, base64
CSS-.
IE . CSS- PHP-, , :
<!--[if gte IE 5]>
<style type=text/css src=ie.css>
<!--[endif]-->
<!--[if !IE]-->
<style type=text/css src=main.css>
<!--<![endif]-->
ie.css , :
ul li {
margin: 0 0 1px;
background: url(/images/flag.png) 0 0 no-repeat;
}
...

data:URI
CSS Sprites ( ) data:URI HTTP-. :
HTTP-, ,
.
: ( HTTP/1.1, Firefox, Opera Safari

91

, ,
; ) ( ) .
HTTPS- .
( data:URI) Internet Explorer 5-7. base64- , . base64-
39-45% , gzip-
5-10%.
base64- ( ).
. URL 1024
, RFC.
, .
, Opera Firefox data:URI 50 ( IE8 32 ). .
:
IE 7 .
(, ).
. .
, base64-,
33% ( 10% ).
( CSS) . HTML-.

IE CSS-, .
:
ul {
list-style: none;

92

}
ul li {
margin: 0 0 1px;
background: url(data:image/gif;base64,<?php
echo base64_encode(file_get_contents
(../images/flag.png ))
?>) top left no-repeat;
height: 14px;
text-indent: 10px;
}
* html ul li {
background-image: url(/images/flag.png);
}
*+html ul li {
background-image: url(/images/flag.png);
}
,
base64, ( , , ; ,
CSS-, -
HTML, ).
HTML-
,
base64, (, IE) . , :
<!-[if !IE]>->
<img src=data:image/png;base64,... alt=
title=/>
<!-<![endif]->
<!-[if IE]>
<img src=chart.png alt= title=/>
<![endif]->
, IE
(
) .

93

data:URI
IE ( 7 ) data:URI,
base64- ( HTML CSS/JavaScript). mhtml (, , IE), , base64-
.
, Microsoft!
IE
mhtml-. CSS- (
main.css):
/*
Content-Type: multipart/related; boundary=_
_
Content-Location: 1
Content-Transfer-Encoding: base64
iVBOR..
*/
CSS- :
ul li {
background-image:url(mhtml:http://site.ru/main.css?20080531!1);
}
mhtml ( IE, ), URL CSS ( ), URL
GET- . : URL , HTML-,
CSS, IE CSS- : ,

94

.
(!) ,
Content-Location. .

, data:URI, W3C
, IE. , IE, mhtml 70% .
, base64- .
: ,
. CSS- IE ( ), CSS- ( , CSS-). CSS- :
/*
Content-Type: multipart/related; boundary=_
_
Content-Location: 1
Content-Transfer-Encoding: base64
iVBOR..
*/
ul li {
background: #fff url(data:image/png;base64,iVBOR...) 0 0 norepeat;
}
* html ul li {
background-image: url(mhtml:http://site.ru/main.css?20081010!1);
}
*+html ul li {
background-image: url(mhtml:http://site.ru/main.css?20081010!1);
}

base64- ( 99,9%) . 2 CSS- ? -

95

IE6 , IE7. .
?
,
:
CSS- ( , base64- )?
: . .
gzip-. ,
, .
,
.
base64-. , .
, , CSS- IE ( ).

CSS- (
mhtml- ). CSS- CSS 2.1, ,
, .
CSS. HTML ( ).
HTML- , , , .

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

96

gzip CSS-
base64-.
base64-
.
. IE8 (
data:URI ).
(base64)
2008 , Super Mario Brothers. , , ,
( , , . .). , ,
.
, - , , - ,
.
. , , , . data:URI, MIDI- Mario
base64-.
:
aSounds = [
// Mario. Mike Martel.
data:audio/mid;base64,TVRoZAAAAAYAAQAEAMBNVH...,
// . John N. Engelmann.
data:audio/mid;base64,TVRoZAAAAAYAAQADAHhNVH...
],
data:URI :
. 1 : . <embed/>, MIDI-.

:

97

playMusic = function(iSoundID, bLoop) {


if (!bMusic)
return;
var oEmbed = dc(embed);
oEmbed.src = aSounds[iSoundID];
oEmbed.id = sound_ + iSoundID;
if (bLoop)
oEmbed.setAttribute(loop, true);
oEmbed.setAttribute(autostart, true);
oEmbed.style.position = absolute;
oEmbed.style.left = -1000;
appChild(document.body, oEmbed);
},
embed, data:URI. MIDI-,
(,

WAV).
data:URI ,
Internet Explorer. Internet Explorer
(
IE , embed ).

4.5. CSS Sprites data:URI



: CSS
Sprites data:URI.

,
CSS Sprites? , , . -

98

, , ( ), ,
.
(, ) CSS-.
(, ) .
, Google? . , .
. 4.7. CSS Sprites Google.
: www.google.com

IE PNG- ( AlpaImageLoader). , (
). IE- crop (

).

, CSS Sprites
,
. , , : 1 ,

99

,
.
(12 ), , , . , 4-8 ( ,
) ,
.
.

, ()
, , , .
-, .
, 20-30%.
-, , ,
( ), , , img, . .
-, ( ), (, ).

data:URI :
,
CSS Sprites ( ).
- base64 (+mhtml)
CSS-() , .
CSS Sprites, -
.
- data:URI.

100

? , :
, .
? , ,
, ( data:URI) , ,
.
( ), .
( 10 ) .

- ( ), .
CSS- -
data:URI CSS-
( 110-120%
CSS-). . , (
2,53 ),
, CSS ( ).
, -,
CSS- . -, , ( , -).
, ,
( , CSS-),
.
CSS Sprites, data:URI,
( ).
( () IE , ).

,
CSS- ( ,
, ), -

101

(
) JavaScript .
: CSS- .
1 2, .

? ,
( , ).

( ), CSS ( HTML).

. head
( ) CSS:
<link href=light-light.css rel=stylesheet type=text/css
media=all/>
window.onload ( ) ,
:
function combinedWindowOnload() {
load_dynamic_css(background-images.css);
...
}
,
-,
( ), .
?
: , JavaScript? : -

102

<noscript> . : <noscript> <head>,


<link> <body>.
( , ), .
, (:
HTML- CSS-):
<script type=text/javascript>
/* */
if (document.getElementsByTagName) {
/* */
document.write(\x3clink href=light-light.css
rel=stylesheet type=text/css
media=all/>);
/* HTML- */
document.write(\x3c-);
}
</script>
<link href=full.css rel=stylesheet type=text/css
media=all/>
<!-[if IE]><![endif]->
JavaScript , <link> (
). JavaScript <script> ,
<link> , .

Internet Explorer ,
( ,
onreadystatechange), IE
(. . ),
. Internet

103

Explorer ,
:
setTimeout(load_dynamic_css(background-images.css),0);
Safari . ,
, (HTML/CSS/JavaScript). ( ) ,
( ).
Safari , CSS- window.onload .
( ).
,
:
/*
.
*/
function load_dynamic_css (src){
var node = document.createElement(link);
node = document.getElementsByTagName(head)
[0].appendChild(node);
node.setAttribute(rel, stylesheet);
node.setAttribute(media, all);
node.setAttribute(type, text/css);
node.setAttribute(href, src);
}
...
/*
window onload.
IE
*/
window[/*@cc_on !@*/0 ? attachEvent : addEventListener]
(/*@cc_on on + @*/load,
function(){

104

setTimeout(load_dynamic_css(backgroundimages.css),0);
}
,false);


, ,
.
( data:URL
) CSS Sprites, . : (
, ), , .
CSS- background-position.
, data:URI ( ) CSS Sprites ( ,
, CSS Sprites
). :
( JavaScript-,
, ) base64- .

4.6.
,
, .
, - CSS
JavaScript. , . , , .

105

JavaScript CSS
CSS JavaScript
. , CSS JavaScript IE Firefox.
CSS HTML
(<!-) CSS, .
JavaScript HTML (<!-) JavaScript,
(//), , , HTML .

<!- /*
function t(){}
<!- */
<!- body { background-color: white; }
CSS , HTML , :
/*
function t(){}
*/
body { background-color: white; }
CSS CSS-, (/* ... */).
JavaScript , HTML (//), , , :
// /*
function t(){}
// */
// body { background-color: white; }
JavaScript , . ,
<script> <link> . :

106

<link type=text/css rel=stylesheet href=test.jscss />


<script type=text/javascript src=test.jscss></script>
, , ,
, .
, , Content-Type
. */*,
Firefox: -
( ).
Safari (1-5% ), ( User-Agent)
.
HTML, CSS JavaScript
, () HTML-.
: CSS( JavaScript-) , 20% ( 5 ), . .
HTML-
,
( 90%) () .
:
, , ( ).

.

Google , .
?
: JavaScript- CSS-
?

107

, . . CSS.
JavaScript- CSS-, HTML,
HTML-. HTTP-, HTML. , , , HTML , HTTP- ( ).
, JavaScript- CSS- HTML-. , .

,
, , .
.

. ,
( ) ,
(http://www.yandex.ru/), (http://www.rambler.ru/) Google (http://www.google.ru/). , ( ) ,
HTML-, .
,
, HTTP : JavaScript CSS
,
( -).
.

108

5.
5.1.
(. keep-alive)
HTTP 1.1:
( HTTP 1.0 , ,
). ,
, (5-10 ).
HTTP 1.1 -
. ,
.

- 50 ,
-. , HTTP 1.1, 2
. HTTP-, , 3 23 , ,
50% 14%.

109

4, ( 80% 86% 20
23+ ) , . , , 5086% .
10 , , 80%
, . ,

( 12 ) keep-alive
.
HTTP/1.1
, , .
. - -
, , .
HTTP, 1999 , ,
.
.
,
HTTP 1.0 4. , (
, IE8 6 -
). ( , , ,
):

110

.
.
, IE 7
HTTP 1.1. HTTP 1.0 , ,
,
HTTP 1.1 ( ).

,
, .
,
(
,
- ,
),
.

, .
,
,
, , , .
, ,
( , ,
) .
,
?

, 2 . .
,
, IP-. ,
images1.yoursite.ru images2.yoursite.ru
.

111

(, ) ,
.
.
. 5.1. .
: www.ajaxperformance.com

, musicstore.ajaxperformance.com 2 ( IE;
): C0 C2.

112

HTTP 1.1, , - . ( ,
) ,
( ).
, , , . :
images1.yoursite.ru
images2.yoursite.ru
images3.yoursite.ru
.
, ,
, CNAME-
DNS- images1.yoursite.ru, images2.yoursite.ru
images3.yoursite.ru, .
,
, ,
-. , . md5- . CRC32,
JavaScript.
.
,
6 (. 5.2).

40%. ,
,
.

113

. 5.2. . : www.ajaxperformance.com


AJAX-. ,
Google Maps (http://maps.google.com/) , mt0.google.com mt3.google.com.
Virtual Earth (http://local.live.com/) .
,
.
,
, ,
, , .
, , (, , CSS- JavaScript-,

DNS-) ,
, static.example.com, HTML-, , . static.example.com
IP- . ,
, .

114


- 50 (
, webo.in, : 4050),
. , CSS Sprites ( data:URI)
.
, 40-60% ( ). 2 3 ,

.
,

( , , , ).
, (, nginx 0W).
, .
, . , 40 5 , 10 20 , 20 (
10 ) 4 40 8.

.
, , 4 50
4 , .
: ,
,
50 , .
, ( HTML) , CSS- JavaScript- (
CSS-, , JavaScript
).

115

5.2. Content Delivery Network Domain Name System


(. CDN)
- .
.
- . ping ,
.
- CDN,
, ,
Akamai Technologies, Mirror Image Internet CDNetwork. - CDN
, , CDN -.
Akamai - . -
. ,
$8000 320 . ,
25%, $2000. . !
CDN
CDN -,
.
, ,
. ,
(. hop) .
CDN ( ) , -, , . , , .
?

116

-
. ,

.
8090% : , CSS, , Flash . . , . , CDN.
Yahoo! Google
Yahoo! YUI (Yahoo! User Interface) ,
.
:
1. gzip- ( 60% 90%);
2. ;
3. ,
.
.
Google JavaScript ( , , Google, ( 404),
AJAX API Google Maps).
(-, -) , JavaScript CSS.
.
DNS-
DNS IP-,
. www.yahoo.com
, DNS, ,
IP- . DNS- . 20120 , ( -

117

).
DNS-, ..
.
DNS- . -, . DNS ( Windows
DNS Client Service). ,
. DNS-
, DNS-.
Internet Explorer DNS-
30 , DnsCacheTimeout.
Firefox DNS- 1 , network.dnsCacheExpiration.
( , ),
DNS- . , , , CSS-, Flash- . . DNS-.

.
24 ( ) .
DNS-
.

5.3.
- () ,
. ,
:
;
;

- .

118

Round-Robin DNS
, DNS. DNS . , www.loadbalancedwebsite.ru,
IP- 64.13.192.120 64.13.192.121 . DNS , DNS:
www.loadbalancedwebsite.ru 64.13.192.120
www.loadbalancedwebsite.ru 64.13.192.121
DNS
www.loadbalancedwebsite.ru, , , . , . ,
, , :
DNS , .
, , IP- ,
. ,
.


, . , F5-BIG-IP Linux
Virtual Server Project.
-.
. , , .
:
1. ,
.
DNS.

119

2. ,
. ,
.

-, , , DNS. , ,
. , ,
. DNS , ? , .
, ,
s1.loadbalancedsite.ru,
s2.loadbalancedsite.ru .

. , , , .
-, (Javascript
Flash) , ,
. (. 5.3).
, -? - . -, PHP,
. MVC (--), , (HTML), , .
, .
, CSS

120

. 5.3.

Sprites,
CSS/JavaScript .
AJAX- Flash- (
). -
.

- :
1. : JavaScript () SWF ( Flash-).
2. : , CSS ( ), -, - HTML-.
3. : .
HTML-
, , : . , ,
S3 Amazon Web Services. , ,
.

, . - servers.xml,
. ( AJAX Flash)

121

, . ,
:
1. www.loadbalancedwebsite.ru/servers.xml,
, , :
<servers>
<server>s1.myloadbalancedwebsite.com</server>
<server>s2.myloadbalancedwebsite.com</server>
<server>s3.myloadbalancedwebsite.com</server>
<server>s4.myloadbalancedwebsite.com</server>
</servers>
2.
.
.
3.
; , 2.

AJAX : - ( XSS-). .
- Flash . , s1.loadbalancedwebsite.ru, , s1.loadbalancedwebsite.ru. .
, www.loadbalancedwebsite.ru
(, s1.loadbalancedwebsite.ru).
Flash- crossdomain.xml, *.loadbalancedwebsite.ru:
<cross-domain-policy>
<allow-access-from domain=*.myloadbalancedwebsite.com/>
</cross-domain-policy>

122

AJAX , , .
, .
- ,
, .
, XMLHttpRequest? XHR
.
:
( www.loadbalancedwebsite.ru s1.loadbalancedsite.ru),
AJAX- iframe .
iframe , , iframe,
.
AJAX?
(
) , .
.
htt://a.site.ru, htt://b.site.ru htt://site.ru
document.domain, ( ) site.ru:
// a.site.ru
...
document.domain=site.ru
...
// , XmlHttpRequest site.ru
req.open(post, http://site.ru/result.php)
.

, ,
, , ,
, .

123

1. -.
, , , ( ) .
2. .
,
. , .
3. .

http://www.loadbalancedwebsite.ru/, . .
:
?
, ( ,
-), . ,
servers.xml.
,
. , , ,
. .
- ,
- .
, , -
- , . - servers.xml , DNS.
Cloud Computing
Simple Storage Service (S3) Elastic Computing Cloud (EC2)
Amazon Web Services (http://aws.amazon.com/).

124

S3 , EC2 S3. . EC2 . 10 72 .


EC2, : EC2 , . , , , , .
EC2 ,
. - EC2,
DNS
. , , , , DNS .

EC2.
EC2 -, S3 . EC2 (. . ),
.
servers.xml
, S3 . S3 ( S3
; )
-
, . , EC2 cron, ,
servers/{AWS IP-} S3.

125

, http://s3.amazonaws.com/application/?action
s=loadlist :
<ListBucketResult>
<Name>voxlite</Name>
<Prefix>servers</Prefix>
<Marker/>
<MaxKeys>1000</MaxKeys>
<IsTruncated>false</IsTruncated>
<Contents>
<Key>servers/216.255.255.1</Key>
<LastModified>2007-0718T02:01:25.000Z</LastModified>
<ETag>d41d8cd98f00b204e9800998ecf8427e</ETag>
<Size>0</Size>
<StorageClass>STANDARD</StorageClass>
</Contents>
<Contents>
<Key>servers/216.255.255.2</Key>
<LastModified>2007-0720T16:32:22.000Z</LastModified>
<ETag>d41d8cd98f00b204e9800998ecf8427e</ETag>
<Size>0</Size>
<StorageClass>STANDARD</StorageClass>
</Contents>
</ListBucketResult>
EC2- , IP- 216.255.255.1 216.255.255.2 .
,
1. http://s3.amazonaws.com/application/
?actions=loadlist .
2. ,
servers/{IP- EC2-}.
3. , , , , AWS IP .
,
.

126

, cron,
EC2, . (AJAX Flash)
, AWS- ,
servers.xml.
EC2 , :
. EC2 ,
. - , EC2. ,
.
S3 EC2 , -.

5.4. , 404-
- ,

.

HTTP 301, 302 307.


HTTP- - 301:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
, Location. , , , . ( 301, 302) , Expires CacheControl.

127

-
refresh JavaScript (location.href), ,
, -
HTTP 301 302 .
. JavaScript
, HTML .
JavaScript , , .
, ,
,
. , HTML-,
.
, (
- ), (/) , . ,
http://webo.in/articles, 301,
http://webo.in/articles/ ( ). Apache Alias
mod_rewrite, DirectorySlash, Apache handlers.
. - ( ) ,
: , .
. ,

. mod_alias mod_rewrite , URI
. , DNS- CNAME ( ) Alias
mod_rewrite.

. , .

128

JavaScript ( JavaScript-). ,
,
.
,
HTTP- .
Internet Explorer (
IE 7, ). Internet
Explorer , . ,
HTTP-, .
HTTP- . ,
, .


.
script:
<script type=text/javascript src=menu_1.0.17.js></script>
PHP insertScript:
<?php insertScript(menu.js) ?>
, , , ,
HTTP- Expires .
404-
, ,
- 404 (File Not Found). , ,
, .
: ,
. -

129

, 404-
- , ,
. ,
, .
404 HTML-,
( 404-).
, 500 . 10 HTML-,
( ). .
, .

5.5. HTTP-

, HTTP , JavaScript- .
AJAX-
, . HTTP- -, , , .
.
IE, Firefox Safari HTTP- (. HTTP pipelining). Opera , . , , . Connection: keep-alive,
,
. GET , .
. -, , ,
ping ( ).

130

HTTP-, TCP
, .
IE ( 50-70% )
, HTTP/1.1, 8 . 4 .
IP- :
.
DSL- - , 1,5 / 128 6 / 512 . .
5:1 20:1. , ,
, 520 .
500 ,
, , , ,
2,510 . ,
, .

, . ,
HTTP- 500 HTTP- 500 .
, , TCP- , , ,
, .
, , , ,
TCP, . . ,
, ,
.
, --

131

1,5 / 384 ,
100 .
ADSL- , . .
.
. 5.4. HTTP-
. : www.die.net


:
( )
, ,
; , . -

132


100 .
8 , 4 .
.

( Firefox network.http.pipelining about:config),
,
,
.
, ,
- 4 . 1
keep-alive (0%).
. 5.5.
. : www.die.net

133

?
, , 10 ,
, , ,
, 4 .
, .
, . Ethernet- 100 20
.

, . , 500 , , .
1,5 / 384 100 ? , 4 .
. 5.6. .
: www.die.net

134

, . , (,
cookie), -,
40% . , cookie
. : cookie
, cookie.

.

. ,
,
- .

5.6.
, ,
, :
HTML-, ?
, ( , ).
,
.


. . 5.7, 80% (, ,
).
, ( ) CSS-.

135

. 5.7. () WebHiTech.ru


( ), , ( ). (, ), ,
. , .
:
,
gzip- HTML-. , .
, . WebHiTech (http://webhitech.ru/) (
, ).
(head) , window.onload (, , , ) , . , .
:
( ). : 8%, 8% (. . ).
( CSS Tidy) HTML- (

136

). , . , .
: --
data:URI HTML/CSS-, ( gzip-, ,
) 15%,
4% (
304-).
: 20%.
CSS-, , HTML, (
).
:

(5-10) , document.body.innerHTML. . . HTML-
(, ) , , .
, , XHR-
innerHTML . 2-5 ,
.
XHR-
iframe, . , .
2-3 , .
: , . ,
- ,
- . , 90- .
, iframe
(,
- ).
JavaScript, -

137

. ,
.
:
, ,
, ,
JSON-, - .
: , - 304,
.
(, ).
5%,
( ) 20%,
21%. 50%
,
( 20%).
. ,
HTML.


. 100 /,
: 23.
:
,
? , ?
, . , (

). ,
( 304- ,
).
?
. ( ) , head

138

5.1.

()

()

.
( html gzip)

63

117

HTML/CSS

58

108

- .
data:URI

49

104

HTML- 6

49

233

4.5

HTML- 4 iframe

49

05

3, JPEG-
( )

(new Image()).src head-

49

98

, . .
(
10 ), </body>,
window.onload (
).

.
.

. 50-100 3-4
. 1020,
.

139

:
10
( ),

. DNS- . 3 20
, . . 4 (
Yahoo!, 4 , ).
, HTML-
( CSS, JavaScript data:URI), , .
.
, 70% ,
70% 30% HTML-.
,
. .
3-4 ( DNS- ), : , ,
.
, ( , ,
).
.

, ( , ) 15-20%
( gzip- HTML, 10% ).
, ,
, JavaScript (
). , ( JavaScript-
), .
.

140

6. CSS-
6.1. CSS expressions
CSS-
. ( ),
-, .
.
,
. CSS- JavaScript.
.
CSS-
CSS- (. CSS expressions)
Internet Explorer 5.0, JavaScript-
CSS-. ,
, .
#myDiv {
position: absolute;
width: 100px;

141

CSS-

height: 100px;
left: expression((document.body.offsetWidth > 110 ?
document.body.offsetWidth 110 : 110) + px);
top: expression(document.body.offsetHeight - 110 + px);
background: red;
}
, .
,
, . ,
.
.
CSS , CSS - , CSS-. ,
CSS- , .
CSS- , ,
.

CSS- CSS-
,
, . , ,
( ) document.body.offsetWidth. , , ,
. , , JavaScript.
, , - .
CSS-:

142

#myDiv {
border: 10px solid Red;
width: expression(ieBox ? 100px : 80px);
}
, ieBox , true, IE , 80px.
,
. ,
.

: . , , IE6 , :
#myDiv {
border: 10px solid Red;
width: 80px;
}
, , ? ,
. , .
function constExpression(x) {
return x;
}
, CSS- :
#myDiv {
border: 10px solid Red;
width: expression(constExpression(ieBox ? 100px : 80px));
}

-, cssexpr.js
( )
constExpression.

143

CSS-

<script type=text/javascript src=cssexpr.js></script>


constExpression (<style>),
(<link>), @import.
, style .

,
, .
document.styleSheets.
function simplifyCSSExpression() {
try {
var ss = document.styleSheets;
var i = ss.length
while (i > 0) {
simplifyCSSBlock(ss[i]);
}
}
catch (exc) {
alert( css.
+ ,
+ , , );
throw exc;
}
}

(@import), .
, , cssText expression(constExpression).
function simplifyCSSBlock(ss) {
// import
var i = ss.imports.length;
while (i > 0)
simplifyCSSBlock(ss.imports[i]);

144

// cssText constExpression,
if (ss.cssText.indexOf(expression(constExpression() == -1)
return;
var rs = ss.rules;
var rl = rs.length;
while (rl > 0)
simplifyCSSRule(rs[j]);
}
cssText , simplifyCSSRuleHelper, .
function simplifyCSSRule(r) {
var str = r.style.cssText;
var str2 = str;
var lastStr;
// ,
do {
lastStr = str2;
str2 = simplifyCSSRuleHelper(lastStr);
} while (str2 != lastStr)
if (str2 != str)
r.style.cssText = str2;
}

, .
function simplifyCSSRuleHelper(str) {
var i = str.indexOf(expression(constExpression();
if (i == -1)
return str;
var i2 = str.indexOf()), i);
var hd = str.substring(0, i);
var tl = str.substring(i2 + 2);
var exp = str.substring(i + 27, i2);
var val = eval(exp)
return hd + val + tl;
}

145

CSS-

, simplifyCSSExpression .
if (/msie/i.test(navigator.userAgent) && window.attachEvent !=
null) {
window.attachEvent(onload, function () {
simplifyCSSExpression();
});
}
? ,
currentStyle (
) runtimeStyle ( ),
( ,
?). . :
#myDiv {
border: 10px solid Red;
width: expression(runtimeStyle.width = (ieBox ? 100px : 80px));
}
, alt title
:
img {
behavior: expression( (alt&&!title) ? title = : ,
runtimeStyle.behavior = none
)
}
:
.button1 { opacity: .1 }
.button2 { opacity: .2 }
.button3 { opacity: .3 }
.button4 { opacity: .4 }
.button1, .button2, .button3, .button4
{ filter: expression( runtimeStyle.filter =
alpha(opacity=+currentStyle.opacity*100+) ) }

146

,
.
,
.
, position: static
. , .
, , onresize. :
CSS- . ,
.

6.2. : id class?
, id class
(
id
).
(, ),
id class .
.
, CSS-
,
. , . JavaScript
HTML/CSS- ,
JavaScript- , .
( 300 ),
CSS-.
, HTML/CSS- (
,
).
4096 CSS ( ), HTML- -

147

CSS-

, (
).
(div p, CSS1) (div>p, CSS2).

, -, , - HTML/CSS- (,
, ).
:
CSS- , HTML, , . , ( )
CSS- , , (, ,
- - , , , ).
, iframe AJAX-. , , CSS-
,
.
( , ), .

, . ,
. , . .

,
(float:left; width:20px; height:20px, ).

148

CSS-, ( , , Opera).
6.1. ,

Firefox 2

Opera 9.5 Safari 3

IE 7

IE 6

IE 5.5

p.class
.class

308
219

5887
6456

237
225

82
78

72
70

145
149

p#id
#id

349
214

7377
7427

338
220

91
83

87
84

156
159

div>p.class
div>.class

519
836

9412
12886

247
257

97
95

84
81

158
159

div>p#id
div>#id

549
858

10299
15172

247
242

105
113

92
91

172
169

div p.class
div .class

827
505

10706
15864

256
247

97
95

84
86

161
160

div p#id
div #id

772
948

11952
13306

247
255

108
108

99
95

177
173

div.div p.class
div.div .class

1001
1099

10519
18742

263
253

111
105

94
92

165
166

div.div p#id
div.div #id

1161
1247

10989
15816

266
256

117
114

95
100

181
187

, ,
#id p#id (
9%). .class p.class (10%). ( 2,5 ) CSS1- CSS2 ( div p div>p, ,

149

CSS-

). , , , , (11%).
, . IE
,
.

6.3. DOM-
, :
DOM-
id class?
3 HTML-. 10000 , id ( 50 10000: DOM-). HTML-
, id class.
DOM- id (. .
50 10000).
iframe,
.
DOM-
(, Internet Explorer, 50% 70% ) (. 6.1) ( )
. ID (10000 get)
10000 , ID clean (10000 get)
, , (. 6.2).
DOM-
, class

150

. 6.1. ( )

. 6.2. ( )

, id ( 2% 10% ).
, .class- , #id,
10%, 15%.
: Centrino Duo 1.7 0,0085 1 ( 3 CSS- 1 ).

151

CSS-

100
1 , 1000 8,5 ! , 5001000 . ,
, ,
- :
javascript:alert(document.getElementsByTagName(*).length)
, , .
- 100 (
10000) .
( JavaScript,
).
: DOM- . ,
70% (. .
).
,
, - DOM-, . 1000 id ,
( IE).
: DOM- id .
DOM-

CSS/DOM- ( ).
, DOM- ( div body), (
10 div body)
div , :
<div>
<ul>
<li></li>
<li></li>
</ul>

152

<p>
<a href=#>
<em></em>
</a>
<span></span>
</p>
<blockquote></blockquote>
<h1></h1>
</div>
:
. 6.3.
DOM-

?
, , DOM-
. ,
( ). 7001000 . (3-7 ,
, 30-50 ).
,
, .

153

CSS-


, ( 50%). ,
DOM- .
,
HTML 4.0 Transitional XHTML 1.0 Strict CSS- ( ). .
DOCTYPE
( , ).
, . .
() : head window.onload ( HTML-).
( , - Safari,
), .
XHTML Strict . ,
.
( onclick=, ) . , , ( 1
150 ).
onclick. .
( Safari ,
83 onclick).
(
CSS/HTML-) id ,
class .
.

154


(
2008): .
.
6.2.

Size (b) Gzip (b) IE6 IE7 IE8b Firefox 2 Firefox 3 Opera 9.5 Safari 3.1
1

26275

8845

56

80

76

130

127

142

33

27173

8993

60

75 320

127

118

148

27

26260

8949

61

75 320

131

116

141

23

26153

8862

55

73 306

94

102

178

28

?
, XHTML ( ), HTML.
( HTML
1012%). , 100 /
FF3 9
.
.
, (+/-50
).
, , - .
, ,
XHTML , HTML.
(26153 26275 , 8862 8845 , . . 0,5%). IE7 7 ( 6080 ). 10% . FF3 ( 20% (25 127 )).
2-3 , -

155

CSS-

; Opera , .


.

6.4. reflow!
CSS- , .
. - .
HTML- JavaScript
CSS- display. JavaScript , CSS-, . offsetHeight ( 0, ).
- , ?

display hide.
/ , , display
. ()
.
offsetHeight style.display
offsetHeight
style.display.
:
function fnOffset(el)
{
return !!el.offsetHeight;
}
function fnStyle(el)

156

{
return el.style.display==none;
}
el .
, <span>. , ,
clean. , :
var time_start=new Date().getTime();
/* ... ... */
var time_stop=new Date().getTime();
var time_taken=time_stop-time_start ;
time_taken , , .
6.3. . .
5
IE sp62 IE8b Firefox 2.0.0.12 Opera 9.22 Safari 3.04b
clean
offsetHeight
style.display

128

153

23500 10624
171

209

height vs. style 140 50

15

15

16

4453

4453

5140

56

56

34

80

80

150

, offsetHeight 50150 .
, offsetHeight, , . ?

Reflow DOM, .

157

CSS-

, . reflow:
;
DOM;
;
;
reflow, .
Reflow ( ) ,
.
DOM reflow, .
reflow, reflow. .. ,
reflow,
.
reflow -.
clean, reflow. offsetHeight,
,
reflow. , reflow
.
: Opera reflow , , , .
Opera .
, ..
.
Computed Style
? , (offsetHeight) (style.display) .
, .
- , :
Computed Style (
CSS-).

158

getStyle = function()
{
var view = document.defaultView;
if(view && view.getComputedStyle)
return function getStyle(el,property)
{
return view.getComputedStyle(el,null)
[property] ||
el.style[property];
};
return function getStyle(el,property)
{
return el.currentStyle && el.currentStyle[property] ||
el.style[property];
};
}();
.
6.4. getStyle (
)
IE sp62

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

offsetHeight

23500

4453

4453

5140

style.display

171

56

56

34

5219

5318

getStyle

-, IE Firefox ( )
( ). -, ,
offsetHeight.
, (getStyle JavaScript-), . , -

159

CSS-

hide,
.
: hide
.
:
function isHidden(el)
{
var p=el;
var b=document.body;
var re=/(^|\s)hide($|\s)/;
while(p && p!=b && !re.test(p.className))
p=p.parentNode;
return !!p && p!=b;
}
, DOM
document.body.
reflow, .
: ? . isHidden 2
(document.body / test_div), isHidden2 10
(document.body / div * 8 / test_div).
6.5. isHidden.

IE sp62

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

23500

10624

4453

5140

isHidden

231

351

70

71

isHidden2

370

792

212

118

102

30

73

92

offsetHeight

offsetHeight vs.
isHidden

160

, . , , offsetHeight 30100 .

,
DOM .
.
. reflow .
: ?

, HTML- . ,
, - , . , ,
.
: ( ) JavaScript.
:
var items = el.getElementsByTagName(li);
for (var i = 0; i < 1000; i++) {
items[i].className = selected
}
:
var items = el.getElementsByTagName(li);
for (var i = 0; i < 1000; i++) {
items[i].style.backgroundColor = #007f00;
items[i].style.color = #ff0000;
}

161

CSS-

:
6.6.

IE 6

IE 7

Firefox 1.5

Firefox 2.0

Opera 9

element.className

512

187

291

203

47

element.style.color

1709

422

725

547

282


, , . - , className , reflow. , , . :hover? , :hover
Internet Explorer 6. - .

className , .
.
, style.


- () style,
.
cssText, :
element.style.cssText = display:block;width:auto; height:100px;...;
, , reflow ( , ).

162


. HTML- , : , ,
. (, ), .
, .
, .
table CSS- table-layout fixed.
col .
col width.
:
<table style=table-layout: fixed>
<!-- 100 -->
<col width=100></col>
<!-- 200 -->
<col width=200></col>
<!-- 250 -->
<col width=250></col><col width=250></col>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
</table>

163

JavaScript

7. JavaScript
7.1. window.onload
,
10 , defer, ,
. .
window.onload
-. - , , , . ,
onload , ( ). ,
, . , , DOM ,
.
Firefox
Firefox : DOMContentLoaded.
, , Mozilla ( Opera 9 ):

164

// Firefox
if (document.addEventListener) {
document.addEventListener(DOMContentLoaded, init, false);
}
Internet Explorer?
IE <script>: defer.
IE, , DOM.
. ,
, . ,
<script> , DOM-, .
, -, onload:
<script defer src=ie_onload.js type=text/javascript>
</script>

:
init();


. defer .
, . ,
:
<!--[if IE]><script defer=defer src=ie_onload.js></script>
<![endif]-->
IE .
JavaScript- HTML-:

165

JavaScript

// Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
document.write(<script defer=\defer\
src=\ie_onload.js\><\/script>);
/*@end @*/
?
, . window.onload:
//
window.onload = init;

( , ?). onload ()
, init IE Firefox. ,
,
. , init :
function init() {
// ,
if (arguments.callee.done) return;
// ,
arguments.callee.done = true;
// -
};
READY
. , , init.

:
IE JavaScript-.
Safari (Opera 9 DOMContentLoaded).

166

Internet Explorer,
( , IE7 ):
// Internet Explorer ( )
/*@cc_on @*/
/*@if (@_win32)
document.write(<script id=\__ie_onload\ defer=\defer\
src=\javascript:void(0)\>
<\/script>);
var script = document.getElementById(__ie_onload);
script.onreadystatechange = function() {
if (this.readyState == complete) {
init(); // onload
}
};
/*@end @*/
Safari!
if (/WebKit/i.test(navigator.userAgent)) { // Safari
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init(); // onload
}
}, 10);
}

function init() {
// ,
if (arguments.callee.done) return;
// ,
arguments.callee.done = true;
// -
};

167

JavaScript

/* Mozilla/Firefox/Opera 9 */
if (document.addEventListener) {
document.addEventListener(DOMContentLoaded, init, false);
}
/* Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write(<script id=\__ie_onload\
defer=\defer\ src=\javascript:void(0)\>
<\/script>);
var script = document.getElementById(__ie_onload);
script.onreadystatechange = function() {
if (this.readyState == complete) {
init(); // onload
}
};
/*@end @*/
/* Safari */
if (/WebKit/i.test(navigator.userAgent)) { // Safari
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init(); //
// onload
}
}, 10);
}
/* */
window.onload = init;

JavaScript
JavaScript-
, : <script> ,
.

168

,
. , ,
, . document.write(), DOM-, location.href, . , ,
. , , ,
, . .
, JavaScript-. , :
. 7.1. : JavaScript-


( )
,
. - ,
. IE <= 7 Firefox 2 2 ( HTTP 1.1 ), IE8, FF3
6.
,
, -

169

JavaScript

(
). , JavaScripts . , , .
- , ,
</body>. (
- ), . ,
, - .

, : ,
DOM-. ?
<script> <head>:
var js = document.createElement(script);
js.src = myscript.js;
var head = document.getElementsByTagName(head)[0];
head.appendChild(js);
,
. ,
, (. 7.2).
, ,
.
. ,
document.write.
, element.innerHTML
.

,
, . ,

170

. 7.2. : JavaScript-

3 three.js one.js. ?

. ,
, HTTP-. ,
.
,
onload ( Firefox) onreadystatechange ( IE).

(, {filename}_loaded) true. .
, IE6- Safari3 ( Windows).
10 , ( 6 FF3, ), 10
, 3-5, . (Opera 9.5, Firefox 2, Firefox 3, Internet Explorer 8)
.
(

CSS-). -

171

JavaScript

, . ,
.
-?

, .
7.1. JavaScript-

defer
script

IE

document.write()
script

1.
IE ( defer)
2. document.write

XMLHttpRequest
,
eval()

evil() ( ,

)

XHR-
,
script

iframe

1.
2. iframe


Safari IE8 , . , , , . ,

172

, IE 7 Firefox 3 .
<script>.

7.2. JavaScript
- :
, , ,
,
.
.
,
,
.
JavaScript:
JavaScript ,
. CSS , ,
, , , - .
, ,
:
<script type=text/javascript src=scripts.js></script>

JavaScript
JavaScript, , . JavaScript -
, .
JavaScript c.

173

JavaScript

, Javascript,
, . JavaScript
JavaScript.
HTML-:
<form action=/>
<p><label for=login>:</label>
<input type=text name=login id=login/></p>
<p><label for=password>G:</label>
<input type=password name=password id=password/></p>
<p><input type=button onclick=checkform()
value=/></p>
</form>
JavaScript ( ),
. , .
, button submit submit :
<p><input type=submit value=/></p>
...
<script type=text/javascript>
document.forms[0].onsubmit = checkform;
</script>
,
JavaScript ,
, ,
. -
( )
, (, DOM-),
, .
:

174

function color(object, color) {


if(object) {
if (color) {
if (object.style) {
object.style.color = color;
}
}
}
}
, W3C DOM, :
if (document.getElementById) {
}
.

XML- ( HTML-) .
(
). , ,
.
getElementById(elementID)
, elementID
getElementsByTagName(tag)
tag
, . :
document.getElementById(nav).getElementsByTagName(a)[1];
//
,
//
ID nav
document.getElementsByTagName(div)[1].getElementsByTagName
(p)[3];
//
div
//
.

175

JavaScript

DOM-, , .
w3.org.


, ,
JavaScript. .
, , .
JavaScript- , DOM.
, ,
.
HTML, DOM-, . , innerHTML
( ).
.
( getElementesByTagName) .
(
JavaScript ).
, (
JavaScript-,
).
. ,
className
,
( , ).

, ,
JavaScript , ,
, .
.js-, , ( ).

176

(, ,
) JavaScript- HTML-, <script type=text/javascript>...</script>.
, , . JavaScript-
, .
. , ,
.
function addEvent(object, eventType, function){
if (object.addEventListener){
object.addEventListener(eventType, function,
false);
return true;
} else {
if (object.attachEvent){
var r = object.attachEvent
(\on\+eventType, function);
return r;
} else {
return false;
}
}
}
Javascript. - ,
-, .
JavaScript.

, JavaScript . , ,
, .

177

JavaScript

,
, , href.
class bundle.
, .
var MenuNavigation = {
init: function() {
var navigation = document.getElementById
(mainNav);
var links = navigation.getElementsByTagName(a);
for ( var i = 0, j = links.length; i < j; ++i ) {
if ( /bundle/i.test(links[i].className) ) {
links[i].onclick = this.onclick;
}
}
},
onclick: function() {
this.href = this.href + ?name=value;
return true;
}
}
. -,
getElementsByTagName DOM- mainNav, .
, .
. JavaScript-.

- mainNav, :
var MenuNavigation = {
init: function() {
var navigation = document.getElementById(mainNav);
navigation.onclick = this.onclick;
},
onclick: function(e) {
if ( /bundle/i.test(e.target.className) ) {

178

e.target.href = e.target.href + ?name=value;


}
return true;
}
}
,
:
,
.
.
, . .
.
-
JavaScript .
.
.
, , , , , . ,
.
Internet Explorer
. , , e.target. Internet Explorer e.srcElement. getEventTarget.
.
function getEventTarget(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (target.nodeType == 3) { // Safari
target = target.parentNode;
}
return target;
}

179

JavaScript

, (, ,
-). ,
, JavaScript-
.

, (
)? :
document.body. ,
.
var MenuNavigation = {
init: function() {
document.body.onclick = function(e) {
var target = getEventTarget(e);
if ( target && /bundle/i.test
(target.className) ) {
target.href += ?name=value;
}
return true;
};
}
var getEventTarget = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
// Safari
while ( !target.href || target.nodeType == 3 ) {
target = target.parentNode;
}();
return target;
}
}
window.onload = MenuNavigation.init;
, ,
, , -

180

: ,
, href,
, .
,
HTML-, .

. , :
node.onclick = function(){
}
,
:
if (node.addEventListener)
node.addEventListener(click, function(e){}, false);
else
node.attachEvent(onclick, function(){});
( ):
if (node.attachEvent)
node.attachEvent(onclick, function(){});
else
node.addEventListener(click, function(e){}, false);

:
var addEvent = node.attachEvent || node.addEventListener;
addEvent(/*@cc_on on+@*/click, function(){}, false);
:
node[/*@cc_on !@*/0 ? attachEvent : addEventListener]
(/*@cc_on on+@*/click, function(){}, false);

181

JavaScript


, :
node[/*@cc_on !@*/0 ? attachEvent : addEventListener]
(/*@cc_on on+@*/click, function(e){
var target = e.target || e.srcElement
//
if (!e.target) {
e.target = e.srcElement
}
// ,
(e.target || e.srcElement).tagName
// true IE, this === window
this == node;
//
if (e.stopPropagation)
e.stopPropagation()
else
e.cancelBubble
// ,
// .
e.cancelBubble = true
// ( )
if (e.preventDefault)
e.preventDefault()
else
e.returnValue = false
// attachEvent ( ) IE;
// (node.onclick)
return false;
}, false):

182

7.3. JavaScript
, .
:
. -.

, - , ?
JavaScript, .
.
20072008 ,

,
JavaScript. ( ) .
: ? , -
? , . /
. ,
, .

- ( ). , - , -,
. , .
document.write innerHTML
, , ( ),

183

JavaScript

document.write,
JavaScript- .
document.write
innerHTML.
: innerHTML script.src (
JavaScript- head , ).
,
( ).
document.write, . , , , .
:
.

., Google AdSense . Google
: iframe, . CDN , .
. , document.write DOM-, 5 ( , ).
. . innerHTML
( , JavaScript-, ).

184

: ( , ) API
innerHTML.
JavaScript-:
begun_multispan=1,begun_spans=[{span_id:ad,limit:7,
width:230}]

(begun_multispan=1), ,
. begun_spans,
span_id , , limit
, width ( ).
, .
2 ( ), .
,
( ,
, ( , ) , , ).
TopLine, Pop-Up, Pop-Under RichMedia

: TopLine, Pop-Under RichMedia. , ( , , , ). TopLine , HTML- , ,
.
TopLine ,
.
? ,

185

JavaScript

: document.write
innerHTML ( appendChild). . , .
DOM-, window.onload
.
:
. ( ) , ( ,
),
. , , .

-,
, iframe ( ), document.write
( , document.write , . .).
,
.
: ,
.
.
:
. ( )
. , ,
, , .
.
,
, ?

186


, :
1. . ,
- .
2. .
, .

(, 3
: 240x240, 240x720 120x800). ,
.
3. . ,
.
, ,
, JavaScript-
, , .
4. . , ,
, . ( ) , , ?
5. . , ,
.
. , , , ( )
(,
).
6. .
, , -

187

JavaScript

, (
) .
(. . ),
, , . ,
( , ,
,
).
, ,
. , , . , .
:
, JavaScript. ( 99% ) : URL ; URL , ; ; . .
.

(, ). (Omniture, Google
Analytics) ,
.
. ? : , URL ( GET-). URL , , , - .
? ,
. GIF- (, CSS-, ,
, )
URL .

188


JavaScript- ,
( ). Google
Analytics ,
new Image(1,1). ( ) document.write, , , .
.
( window.onload, ) ,
, DOM- (
new Image, appendChild).
LiveInternet:
document.write(<img src=http://counter.yadro.ru/hit
+tutu_elec?r+escape(document.referrer)
+((typeof(screen)==undefined)?:;s+screen.width
+*+screen.height+*
+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))
+;u+escape(document.URL)+;+Math.random()
+ width=1 height=1 alt=>)
, . :
new Image(1,1).src=http://counter.yadro.ru/hit;tutu_elec?r
+escape(document.referrer)+((typeof(screen)==undefined)?:;s
+screen.width+*+screen.height+*
+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))
+;u+escape(document.URL)+;+Math.random()
( ,
),
document.write new Image(). .
,
.

189

JavaScript

?
. ,
Google Analytics urchin.js ga.js. ,
.
, , document.write,
.
JavaScript-.
Omniture
.

JavaScript-. , :
var s_code=s.t();if(s_code)document.write(s_code)
Omniture return:
return <im+g sr+c=
+\+rs+\ width=1 height=1 border=0 alt=\\>
(, src
rs):
return new Image(1,1).src=\+rs+\
HTML-
var s_code=s.t();if(s_code)eval(s_code)
,
s_code.js document.write ( ).
:
var c=s.t();if(c)s.d.write(c);
...
s.d.write(<im+g name=\+imn+
+\ height=1 width=1 border=0 alt=\\>);

190


var c=s.t();if(c)eval(c);
...
new Image(1,1).name=imn;
, document.write eval, .
, . , ,
.

, , JavaScript- . , .
( ?) Omniture
, JavaScript- ( s_code.js)
. .

.
, (Google Analytics),
2 :
, ( ) ( Google Analytics
urchinTracker()). ,
,
www.google-analytics.com , . () JavaScript
.
, . , 10 , . , .
10 . : -

191

JavaScript

, . :
() . Goole
Analytics:
var _counter_timer = setInterval(function() {
if (urchinTracker) {
urchinTracker();
clearInterval(_counter_timer);
}
}, 10);
, ( ), , ( ).

7.4.
Internet Explorer
JScript. , -,
JavaScript-. -, IE 60% , JavaScript
.
-. , . , , .
- .
, -.
,
- JScript ,
. , ,

192

, .
,
, , . ,
. - ,
.


.
JScript, .

, , , .
4 .
1. ,
DOM- .
.
.
2. -. , , , .
3. , -
.
DOM-,
, ,

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

193

JavaScript


.
, -
. DOM-, . :
. 7.3.

- DOM. DOM- , , , , DOM-.


: DOM-.
, DOM- , ,
!
, , ,
.
, 30 ,
.

194

, HTML.
, DOM-,
.
<script type=text/javascript>
var myGlobalObject;
function SetupLeak()
{
// DOM-
myGlobalObject = document.getElementById(LeakedDiv);
// DOM
document.getElementById(LeakedDiv).expandoProperty =
myGlobalObject;
}
function BreakLeak()
{
document.getElementById(LeakedDiv).expandoProperty =
null;
}
window.onload = SetupLeak;
window.onunload = BreakLeak;
</script>
, null , . , , DOM-
. , DOM- .
- , , .

,
. -

195

JavaScript

- JScript
DOM- JScript-. DOM-, ,
DOM-.
. , ,
- . ,
, .
<script type=text/javascript>
function Encapsulator(element)
{
//
this.elementReference = element;
//
element.expandoProperty = this;
}
function SetupLeak()
{
// :
new Encapsulator(document.getElementById
(LeakedDiv));
}
function BreakLeak()
{
document.getElementById(LeakedDiv).expandoProperty =
null;
}
window.onload = SetupLeak;
window.onunload = BreakLeak;
</script>
<div id=LeakedDiv></div>

196

,
, .

.
, , .

- ,
.
,
, ,
.
,
.
, , . , , .
. 7.4.

197

JavaScript

2 , , . .
.
, , .
2, , .
, , . ,
. , ( null).
, ,
. - ,
, . :
<script type=text/javascript>
function AttachEvents(element)
{
//
// ClickEventHandler
element.attachEvent(onclick,ClickEventHandler);
function ClickEventHandler()
{
//
}
}
function SetupLeak()
{
//
AttachEvents(document.getElementById(LeakedDiv));
}

198

function BreakLeak()
{
}
window.onload = SetupLeak;
window.onunload = BreakLeak;
</script>
<div id=LeakedDiv></div>
, . ,
.
, :
detachEvent?
, onUnload . , , . ,
, , .
<script type=text/javascript>
function AttachEvents(element)
{
// ,
// -
element.expandoClick = ClickEventHandler;
//
// ClickEventHandler
element.attachEvent(onclick, element.expandoClick);
function ClickEventHandler()
{
//
}
}

199

JavaScript

function SetupLeak()
{
//
AttachEvents(document.getElementById(LeakedDiv));
}
function BreakLeak()
{
document.getElementById(LeakedDiv).detachEvent
(onclick,
document.getElementById(LeakedDiv).expandoClick);
document.getElementById(LeakedDiv).expandoClick =
null;
}
window.onload = SetupLeak;
window.onunload = BreakLeak;
</script>
<div id=LeakedDiv></div>

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

, DOM-, , , . , DOM.

, - ,
. ,

200

, ,
( ).
. , , DOM. . ,
.
,
, .
,
.
. 7.5. , DOM-

,
.
, , , , . , - . ,
(, ), -

201

JavaScript

.
, . .
,
. DOM- , , . Internet Explorer. ,
IE-. ,
DOM- ,
. , :
<script type=text/javascript>
function LeakMemory()
{
var hostElement = document.getElementById(hostElement);
// ,
//
for (i = 0; i < 5000; i++)
{
var parentDiv = document.
createElement(<div onClick=foo()>);
var childDiv = document.
createElement(<div onClick=foo()>);
//
parentDiv.appendChild(childDiv);
hostElement.appendChild(parentDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null;
childDiv = null;
}
hostElement = null;
}
function CleanMemory()

202

{
var hostElement = document.getElementById(hostElement);
//
for(i = 0; i < 5000; i++)
{
var parentDiv = document.
createElement(<div onClick=foo()>);
var childDiv = document.
createElement( <div onClick=foo()>);
// .
hostElement.appendChild(parentDiv);
parentDiv.appendChild(childDiv);
hostElement.removeChild(parentDiv);
parentDiv.removeChild(childDiv);
parentDiv = null;
childDiv = null;
}
hostElement = null;
}
</script>
<button onclick=LeakMemory()>
</button>
<button onclick=CleanMemory()> </button>
<div id=hostElement></div>
,
, IE.
, DOM-
. , DOM-,
, , , .
, ( -

203

JavaScript

, DOM- ). , , , .
DOM-, .
, , .
, , . , , , . , ,
DOM-, : .
, , , - .
, .
-
API
, . - , , .
, , . - .
, DOM,
.
, ,
- - , . , , ,
.

204

<script type=text/javascript>
function LeakMemory()
{
// ,
for(i = 0; i < 5000; i++)
{
hostElement.text = function foo() { };
}
}
</script>
<button onclick=LeakMemory()> </button>
<script id=hostElement>function foo() { }</script>
,
, .
, . . ,
, , ,
. , -. , .

- , , ,
, . , - . , ,
.
, , -

205

JavaScript

.
, . ,
,
.

7.5. JavaScript-
- ,
JavaScript-. , , 300
( , ).
.
- JavaScript- ( Mozilla - ,
Internet Explorer). ,
, ,
.

Google Gears (http://gears.google.com/)
. Gears ( , Gears WorkerPool API API ).
, setTimeout,
,
. , setTimeout
0, . :

206

function doSomething (callbackFn [, additional arguments]) {


//
(function () {
// ...
if ( ) {
//
callbackFn();
} else {
//
setTimeout(arguments.callee, 0);
}
})();
}

,
, . :
function doSomething (progressFn [, ]) {
//
(function () {
// ...
if ( ) {
//
progressFn(, );
//
setTimeout(arguments.callee, 0);
}
})();
}

1. ( - ),
,
.
2. , , (

207

JavaScript

), .
3. ,
(, 10 ), , . , ( )
, ,
.
4. setTimeout! , eval
, , , .
5.
,
, JavaScript-,
, .

, ,
( ,
). , , , .
- XHR-, . JavaScript ,
.

7.6. DOM
DOM- JavaScript
. . JavaScript , ,
DOM-.
, .

208

DOM DocumentFragment:
DocumentFragment DOM-. DOM1 ( Internet Explorer 6- ).
, ,
Node
DocumentFragment;
DocumentFragment .
, DOM-, , ( , ). . ,
DocumentFragment cloneNode.
DOM-.
, , DOM- ( 12
8 div).
var elems = [
document.createElement(hr),
text( document.createElement(b),
document.createTextNode( ),
text( document.createElement(a),
document.createTextNode( | ),
text( document.createElement(a),
document.createTextNode( | ),
text( document.createElement(a),
];

Links: ),
Link A ),
Link B ),
Link C )

function text(node, txt){


node.appendChild( document.createTextNode(txt) );
return node;
}

, ,
, :

209

JavaScript

( , ).
var div = document.getElementsByTagName(div);
for ( var i = 0; i < div.length; i++ ) {
for ( var e = 0; e < elems.length; e++ ) {
div[i].appendChild( elems[e].cloneNode(true) );
}
}
DocumentFragment
DocumentFragment , . (
createDocumentFragment).
,
: appendChild
cloneNode !
var div = document.getElementsByTagName(div);
var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) {
fragment.appendChild( elems[e] );
}
for ( var i = 0; i < div.length; i++ ) {
div[i].appendChild( fragment.cloneNode(true) );
}

(. 7.2).
?
.
, ( , )? :

210

7.2. DOM- ( )

Fragment

Firefox 3.0.1

90

47

Safari 3.1.2

156

44

Opera 9.51

208

95

IE 6

401

140

IE 7

230

61

IE 8b1

120

40

var div = document.getElementsByTagName(div);


var child = document.createElement(div);
var parent = div[0].parentNode;
for ( var e = 0; e < elems.length; e++ ) {
child.appendChild( elems[e].cloneNode(true) );
}
for ( var i = 0; i < div.length; i++ ) {
// IE
if (IE) {
parent.replaceChild(child.cloneNode(true),div[i]);
//
} else {
div[i] = child.cloneNode(true);
}
}
( DocumentFragemnt).
(, IE , IE
- ).

211

JavaScript

innerHTML

- , HTML DOM-. :
var i, j, el, table, tbody, row, cell;
el = document.createElement(div);
document.body.appendChild(el);
table = document.createElement(table);
el.appendChild(table);
tbody = document.createElement(tbody);
table.appendChild(tbody);
for (i = 0; i < 1000; i++) {
row = document.createElement(tr);
for (j = 0; j < 5; j++) {
cell = document.createElement(td);
row.appendChild(cell);
}
tbody.appendChild(row);
}
, , HTML-
, innerHTML .
, join . , .
var i, j, el, idx, html;
idx = 0;
html = [];
html[idx++] = <table>;
for (i = 0; i < 1000; i++) {
html[idx++] = <tr>;
for (j = 0; j < 5; j++) {
html[idx++] = <td></td>;
}
html[idx++] = </tr>;

212

}
html[idx++] = </table>;
el = document.createElement(div);
document.body.appendChild(el);
el.innerHTML = html.join();

7.7. JavaScript
JavaScript - ( ). , .

DOM-
. , HTML, .
h1 , .
, :
function Iterate(aEntries) {
for (var i=0; i < document.getElementsByTagName(h1).length;
i++) {
aEntries[aEntries.length] =
document.getElementsByTagName(h1)[i].innerText;
}
}
?
document.getElementsByTagName(h1) .
:
;
innerText
.
. , DOM-

213

JavaScript

, ,
. :
function Iterate2(aEntries) {
var oH1 = document.getElementsByTagName(h1);
var iLength = oH1.length;
for (var i=0; i < iLength; i++) {
aEntries[aEntries.length] = oH1(i).innerText;
}
}
, DOM- ,
. N DOM- -
.

, . , ,
,
.
with,
( , . .).
:
var arr = ...;
var globalVar = 0;
(function () {
var i;
for (i = 0; i < arr.length; i++) {
globalVar++;
}
})();
:

214

var arr = ...;


var globalVar = 0;
(function () {
var i, l, localVar;
l = arr.length;
localVar = globalVar;
for (i = 0; i < l; i++) {
localVar++;
}
globalVar = localVar;
})();
.

() , . : . , :
for (i=0; i < 10000; i++) a.b.c.d(v);
,
var f=a.b.c.d;
for (i=0; i < 10000; i++) f(v);

var f=a.b.c;
for (i=0; i < 10000; i++) f.d(v);

, IE Firefox . , (
)

215

JavaScript

JavaScript-, -.
, ( DOM) , CPU, ( -), .

7.8. ,

JavaScript- .

, JavaScript. , .
<!-- -->
<p id=test1></p>
<p id=test2></p>
<p id=test3></p>
<p id=test4></p>
<p id=test5></p>
<p id=test6></p>
<script type=text/javascript>
// DOM-
var items = document.getElementsByTagName(*);
// DOM-
var length = items.length;
//
var time = new Date().getTime();
// , ,
// 10000
for (var j=0; j<10000; j++) {
for (var i=0; i<items.length; i++) {

216

var item = items[i];


}
}
//
document.getElementById(test1).innerHTML =
: + (new Date().getTime() - time);
time = new Date().getTime();
//
for (var j=0; j<10000; j++) {
for (var i=0; i<length; i++) {
var item = items[i];
}
}
document.getElementById(test2).innerHTML =
( ): + (new Date().getTime()
- time);
time = new Date().getTime();
// for-in
for (var j=0; j<10000; j++) {
for (var i in items) {
var item = items[i];
}
}
document.getElementById(test3).innerHTML =
for-in: + (new Date().getTime() - time);
time = new Date().getTime();
//
for (var j=0; j<10000; j++) {
for (var i = length - 1; i >= 0; i) {

217

JavaScript

var item = items[i];


}
}
document.getElementById(test4).innerHTML =
: + (new Date().getTime() - time);
time = new Date().getTime();
// do-while
for (var j=0; j<10000; j++) {
var i = 0;
do {
var item = items[i];
i++;
} while (i < length)
}
document.getElementById(test5).innerHTML =
do-while: + (new Date().getTime() - time);

time = new Date().getTime();


// while ( )
for (var j=0; j<10000; j++) {
var i = length - 1;
while (i) {
var item = items[i];
}
}
document.getElementById(test6).innerHTML =
while: + (new Date().getTime() - time);
</script>
(. 7.3).
while
23 . - 1000 ,
.

218

7.3. ( )

for-in do-while
while

Firefox 3.0.3

714

657

835

280

297

217

Safari 3.1.2

141

140

157

125

125

93

Opera 9.61

188

125

765

94

94

78

IE 6

1281

1219

1094

468

500

360

IE 7

1391

1297

1250

515

532

406

IE 8b2

954

906

922

406

422

328

Chrome 0.2

288

246

332

117

114

95


JavaScript ,
:
// 1.
var RegExp = /script/gi;
//
items[i].nodeName.search(RegExp);
// 2. ,
//
items[i].nodeName.match(RegExp);
// 3.
items[i].nodeName.match(/script/gi);
// 4.
// , (=)
//

219

JavaScript

items[i].nodeName.match(/script/i);
// 5.
/script/i.exec(items[i].nodeName);
// 6. ,
//
/script/i.test(items[i].nodeName);
, .

( 10000 DOM-). :
7.4. ( )

search

match exec

test

Firefox 3.0.3

2120

2041

1295

1273

1225

1348

Safari 3.1.2

453

469

344

359

360

359

Opera 9.61

2141

2063

406

344

312

313

IE 6

2594

2516

1875

1859

1953

1906

IE 7

2562

2469

1859

1844

2000

1860

IE 8b2

2140

2032

1453

1453

1547

1469

Chrome 0.2

856

870

416

397

385

392

, , .
match, exec test.

220

8.
8.1.
,
.
, .


. , , (
), ,
.
(<img
src=...>, <link rel=stylesheet href=...>, <script src=...>
. .), .
, ,
( HTML- ,
).
URL (, ), .
JavaScript- :

221

<html>
<head>
<title>...</title>
<script type=text/javascript>
<!-var began_loading = new Date().getTime();
window.onload = function(){
new Image().src = /timer.gif?u= + self.location + &t= +
((new Date().getTime() - began_loading) / 1000);
};
// -->
</script>
<!- JS-
CSS-, ,
// -->
</head>
<body>
<!-
// -->
</body>
</html>
:
127.0.0.1 - - [28/Oct/2006:13:47:45 -0700]
GET /timer.gif?u=http://example.com/page.html&t=0.971
HTTP/1.1 200 49 ...
, , http://example.com/page.html 0,971
. , 57842 , 57842 * 8 /
0,971 = 476556 (45 ).
. 1,5 , .

222

, ,
.
.
Apache Benchmark JMeter
ab Apache ( Linux
Apache) . , , .

ab c10 n1000 http://www.website.ru/
-
www.website.ru.
1000 ( n1000) 10 ( c10).
, (
1000 ). ,
5-10 , , .
, . , :
Time per request:
40.599 [ms]
Connection Times (ms)
min
mean[+/-sd]
Connect:
18
40
12.5
Processing:
0
0
0.3
Waiting:
0
0
0.3
Total:
18
41
12.4

median
38
0
0
38

max
61
1
1
61

41 ,
. .

223

: ,
( ab Apache).

- ( CGI) CPU, .
Apache JMeter, , HTTP.
ab, ,
, . , JMeter , SMTP, POP JDBC. , :
, , .

, eAccelerator/xCache/ZendOptimizer
PHP, mod_perl perl, mod_python python .,
,
. ,
, ,
CPU.
,
.

- , .
, ,
- ( ).
memcached . Memcached , .
.

224

Web Developer Toolbar Firefox


( , Web Developer ->
Information -> View Document Size). , :
. 8.1. Web Developer Toolbar

,
. ,
. Firefox.
Firebug NET Panel Firefox
,
Firefox Firebug ( NET Panel).
, Firefox,
. , HTTP- ( , ) . , Firebug , DNS-, .
, : - Firebug 1.4a1,
. , :

225

,
, . .
. 8.2. Firebug Net Panel 1.4a1

,
, (
): DOMContentLoaded
load. , load , , , ,
.
:
. 8.3. Firebug Net Panel

webo.in
( c c.css?20081010).
2 ( new Image().src, ). (
200 ), -

226

. Firefox
3 : d.css?20081010, g.js?20080920 j.js?20080924.
g.js ( Google Analytics)
__utm.gif . , HTML-
DOM- ,
. Firefox ( ) b.png ( d.css, ).
,
.
window.onload, (
, ).
:
,
.
100 200 . ( ) 500 .
Yslow Firebug Firefox
Firebug ( Firefox) YSlow. , ,
.
. -
. , ,
.
( 100) (. 8.4).
Web Inspector Safari
Firebug Net Panel, Web Inspector
, .
: , () ,
(. 8.5).

227

. 8.4. YSlow

HttpWatch
HttpWatch (http://www.httpwatch.com/)
IE, Firefox. HTTP-
, (. 8.6).
.
Fiddler
Fiddler (http://www.fiddlertool.com/fiddler/) IE (, , ) (. 8.7).
Live HTTP Headers
Live HTTP Headers (http://livehttpheaders.mozdev.org/) HTTP- Firefox .
Firefox,
(
) (. 8.8).

228

. 8.5. Web Inspector

. 8.6. HttpWatch

. 8.7. Fiddler

. 8.8. Live HTTP Headers webo.in

229

230

- Sloppy
,
.

, - -
. : ,
, ( ,
) ,
, , ADSL-128 Kbps.

Sloppy -.
: 9,6 / 512 /. , 1 , , (
).
.
. 8.9. Sloopy

231

: , , ( 9.6, 14.4, 28.8, 56, 128, 256 512 ),


, . -
, . ,
,
( ).
Sloppy , JNLP-,
Java Web Start ;
, , .
Analyze.WebSiteOptimization.com
, -
. ( Yahoo).
, data:URI mhtml-. .
. 8.10. analyze.websiteoptimization.com

232

Octagate.com/service/SiteTimer/
. , RSS- ( ). , data:URI mhtml-;
.
. 8.11. octagate.com/service/sitetimer/

Tools.Pingdom.com
,
(. 8.12).
AlertSite.com
, , ,
data:URI mhtml-.
. ,
, (. 8.13).

233

. 8.12. tools.pingdom.com

. 8.13. www.alertsite.com/cgi-bin/tsite3.pl

Site-Perf.com
,
.
, . -

234

. .
, .
. 8.14. site-perf.com

GetRPO.com
. Runtime Page Optimizator, ( IIS) .
, . (MSIE), (. 8.15).

235

. 8.15. get-rpo.com

Webo.in
Web Optimizator
, . ,
(. 8.16).
, (. 8.17).
, ,
, .

.
, , .

236

. 8.16. webo.in

. 8.17. webo.in ( )

237

Web Optimizator
(, DOM-).
JavaScript
JSLint (http://www.jslint.com/) , .
, , JavaScript. , ,
.
JsUnit (http://www.jsunit.net/)
JavaScript-.
AjaxView (http://research.microsoft.com/projects/ajaxview/) AJAX-. - JsLex (http://rockstarapps.com/pmwiki/pmwiki.php?n=JsLex.JsLex),
YUI Profiler
(http://developer.yahoo.com/yui/profiler/). ,
- .

8.2.
Firefox 3
Firefox ,
.
:
1. , about:config.
2. :
network.http.pipelining true
network.http.proxy.pipelining true
network.http.pipelining.maxrequests 8
nglayout.initialpaint.delay 0
( ).
,
( ).

238

?
HTTP 1.1, 1999 ,
TCP- -.
, , TCP ( ) .

, 9 .
1.

network.http.version 1.1, network.http.keep-alive true


Firefox HTTP 1.1,
.
2.

network.http.pipelining true, network.http.proxy.pipelining


true
Firefox , . , HTTP- . ,
- .
3.

network.http.pipelining.maxrequests 8
,
: 1 8. 8 , Firefox
.
4.

nglayout.initialpaint.delay 0
, -,
.
Opera 9
Opera ,
. opera:config, .
, :

239

1.

Max Connections Server = 16


.
.
2.

Max Connections Total = 32 64


( ).
3.

Check local Hostname


Opera , . , , IP- .
4.

Always load favicon = 0


favicon.ico ( ) . , .
(,
).
5.

Documents Expiry = 3600


Opera HTML- 5 (300 ).
1 , .
6.

Images Expiry = 86400


, ,
, 5 .
1 .
7.

Other Expiry = 86400


.
.
8.

Delayed Script Execution


Opera HTML- ( CSS-,
). JavaScript Opera
. ,

240

: , .

Opera.

. ( ):
Tools -> Preferences -> Advanced -> Browsing -> Loading > Redraw
instantly
:
-> -> -> ->
>
Interner Explorer
IE -
, . . , .
(, -> ->
regedit) :
HKEY_CURRENT_USER -> Software -> Microsoft -> Windows -> Current
version -> Internet settings
2 (DWORD)
MaxConnectionsPer1_0Server MaxConnectionsPer1_0Server. ( -> ) 10. ,

, 16 . , 16.
IE .

8.3.
Apache 1.3
<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_minimum_file_size 1000
#
mod_gzip_maximum_file_size 500000
# ,
mod_gzip_maximum_inmem_size 60000
# ,
# gzip-
mod_gzip_min_http
1000
#
mod_gzip_item_exclude
reqheader User-agent:
Mozilla/4.0[678]
mod_gzip_item_exclude
reqheader User-agent:
Konqueror
# .html
mod_gzip_item_include
file
\.html$
# .css / .js ,
mod_gzip_item_include
file
\.js$
mod_gzip_item_include
file
\.css$
#
mod_gzip_item_include
mime
^text/html$
mod_gzip_item_include
mime
^text/plain$

241

242

mod_gzip_item_include

mime

^httpd/unix-directory$

# ( )
mod_gzip_item_exclude
mime
^image/
# Transfer-encoding: chunked gzip-,
#
mod_gzip_dechunk
Yes
# Vary
# , -
mod_gzip_send_vary
On
</IfModule>
<IfModule mod_headers.c>
# -
<FilesMatch .*\.(js|css|html|txt)$>
Header set Cache-Control: private
</FilesMatch>
</IfModule>
<IfModule mod_expires.c>
# 10
ExpiresActive On
ExpiresDefault access plus 10 years
# HTML-
<FilesMatch .*\.(shtml|html|phtml|php)$>
ExpiresActive Off
</FilesMatch>
</IfModule>
Apache 2
# Content-Encoding: gzip
AddEncoding
gzip .gz
# 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%.
DeflateCompressionLevel 9
DeflateWindowSize 15
# ,
# :
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch Konqueror no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# - User-Agent
#
Header append Vary User-Agent
# -
# , ,
<FilesMatch .*\.(css|js|php|phtml|shtml|html|xml)$>
Header append Cache-Control: private
</FilesMatch>
# 10
ExpiresActive On
ExpiresDefault access plus 10 years
# HTML-
<FilesMatch .*\.(shtml|html|phtml|php)$>
ExpiresActive Off
</FilesMatch>

243

244

nginx 0.7+
:
server {
# 80
listen 80;
#
server_name core.freewheel.ru:
#
root /my/path/to/core.freewheel.ru;
#
access_log /my/path/to/core-access.log combined;
error_log /my/path/to/core-access.log info;
# ,
include _servers_template;
#
location = /nginx_status {
stub_status on;
access_log off;
allow 127.0.0.1;
deny all;
}
# ,
gzip on;
# HTTP,
#
gzip_http_version 1.0;
#
gzip_comp_level 9;
#
gzip_proxied any;

245

# (, )
gzip_types
text/plain text/css application/x-javascript
text/xml application/xml application/xml+rss text/javascript
image/x-icon;
}
(_servers_template),
:
index index.php index.html;
location / {
# , XML-
location ~* ^.+\.(css|js|xml)$ {
#
#
#
#

.gz-
css- js-. Nginx
, ,

gzip_static on;
expires
1y;
}

# html
if (!-e $request_filename ) {
rewrite ^/(.*)$ /index.php ;
}
# PHP- FCGI
location ~* \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include
_fastcgi_params;
}
#
location ~* ^.+\.(bmp|gif|jpg|jpeg|ico|png|swf|tiff)$ {
expires
1y;
}

246

#
location ~* ^.+\.(bz2|dmg|gz|gzip|rar|tar|zip)$ {
expires 1y;
}
#
location ~* ^.+\.(pdf|txt)$ {
expires 1y;
}
}
nginx ,
with-http_gzip_static_module
gzip_static ,
. , 0.7+.
IIS
IIS :
IIS -
.
:
;
IIS ;
;
.
IIS:
, , ,
;
:
( , gui
);


. , , IIS; .

247

8.4.
.
, . ,
.
vkontakte.ru
(http://vkontakte.ru/) ( ) . :
. 8.18. vkontakte.ru

, , -

248

, . , . , .
: gzip. (HTML, CSS,
JavaScript) . . .
: 5% . 10-50 .
. CSS- JavaScript 2-5 , .
( 15-20 )
100 ( ). , IE
( ), , ,
.
- JavaScript-. ,
. window.onload
300 (
40% ). , ,
.
. 8.19. vkontakte.ru

249

. : max-age , Last-Modified. , vkontakte.ru , .


HTML-
:
. ,
nginx.
(5-10)
, CSS
Sprites CSS-.
. (
). ,
DNS Lookup.
, 2 .
, ,
(,
, ). ( ) .
Image Map ( CSS Sprites) . : , 5-7 ( 10-15 )
. ( )
DNS Lookup + . vkontakte.ru CDN ( ), 200300 .
. . , , , . , DNS Lookup.

250

odnoklassniki.ru
. 8.20.
odnoklassniki.ru

vkontakte.ru odnoklassniki.ru. , , . -, , IE . -, -
( ).
.
? ,
, -. 2-3 ,
( ) .
: , . , . 8.21, : ETag, Last-Modified

251

. 8.21. odnoklassniki.ru

.
.
, odnoklassniki.ru ,
vkontakte.ru. .

, .
yandex.ru
. .
, .
19 ; 49 .
, CSS- HTML
JavaScript- ( , , -
, ).
, , HTML- :
. .

252

. 8.22. www.yandex.ru

5 , .
(, )
. LastModified ( , ) ( - 304
).
. 8.23. HTML- yandex.ru

:
CSS Sprites, ( , cookie). , ,
,
( , IE) data:URI.

253

rambler.ru
. 8.24. www.rambler.ru

: ,
46.
, . HTML- ,
.
CSS Sprites ,
. , , . .png .gif . patch_script.js 185 (
HTML 20 ) .
( ) 2 (rambler.ru i.rl0.ru).
4
.
60% ,

254

. : JPEG , 20-30%.
:
.
mail.ru
Mail.ru , ,
. .
. 8.25. www.mail.ru

HTML- gzip, CSS- JavaScript (, ,


). 4 JavaScript- 3
CSS. JavaScript head .
. ,
. 8.26, Expires Last-Modified. .

255

. 8.26. mail.ru

( ), .png. .jpg- . ( ) Image Map, .


2 (r1.mail.ru
img.mail.ru). (
)
. mail.ru
.
rbc.ru
. .
, 3 CSS-
3 JavaScript-, , . , (115 HTML- ).
.gif .png .jpg
20% 514 ,
( HTML-). CSS Sprites (
).
, 3 ( pics.rbc.ru)
( 40-50%). -

256

. 8.27. www.rbc.ru

, , : 3 ,
Last-Modified, 304 ,
.
, ,
.
lenta.ru
Lenta.ru.
: , ,
.
(. 8.28).
(Cache-Control () Expires), ETag Last-Modified. . ()
( , ).

257

. 8.28. lenta.ru

. 8.29. lenta.ru


(img.lenta.ru), - ( 50%) (
). , , -

258

, CSS Sprites JavaScript.


.
kommersant.ru
.
,
, . , . :
HTML- CSS-. JavaScript - (. 8.30):
. 8.30. kommersant.ru

. . 8.31, , ETag / Last-Modified (


). ,
.

259

. 8.31. JavaScript- kommersant.ru

. .gif
.png 50 ( 800 ). CSS Sprites 3
: .
60% .
-, .
: , . .
marketgid.ru


MarketGid.
: 300 HTTP- 700 .
: HTML-, . 1 CSS- IE ( 60-70%). 2 JavaScript-.
HTML 70 ,
. , -

260

. 8.32. marketgid.ru

, .
HTML 4.01 , , ,
.
.gif- .png
CSS Sprites, : 2-4 , .jpg . -
,
Image Map 15-20 ,
.

, , ,
.
,
,
.

261

habrahabr.ru
,
-, , , . , .
. 8.33. habrahabr.ru

6 CSS- 15 JavaScript- (
head ) .
( ) :
. ,
. , .
, : favicon-. , . , ,
Image Map , , ( 10 ).

262

:

. , CSS Sprites.
.

JavaScript
-.

263


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

.

.

:
http://webo.in/contacts/


-

.
.
.
.
25.01.2009. 60x90 1/16.
. . .
. . . 16,5. 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