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

2008

, , ?
,
? ,
,
?
, .


25.11.2008


...................................................................................................................................................... 4
webo.in............................................................................................................ 4
......................................................................................................................................... 5
1. ? ........................................................................................... 7
1.1. ............................................................................................................ 7
1.2. ........................................................................... 8
1.3. .............................................................................................................10
1.4. : .....................................................11
1.5. ......................................................................................13
2. .................................................................................................................17
2.1. HTML ...........................................................................17
2.2. CSS JavaScript .....................................................................................................24
2.3. CSS .............................................................................................................................27
2.4. JavaScript: ?.........................................................................................................31
2.5. PNG GIF................................................................................................................................37
2.6. favicon.ico ?..........................................................................................40
2.7. cookie ...................................................................................................................................43
3. ...............................................................................................................................45
3.1. Expires, Cache-Control ..............................................................................................45
3.2. IE: pre-check, post-check ..........................................................................48
3.3. Last-Modified ETag ........................................................................................................................50
3.4. iPhone ...................................................................................................................52
4. .....................................................................................................55
4.1. HTML- CSS- ...............................................................................................55
4.2. JavaScript- ...................................................................................................58
4.3. CSS Sprites .........................................................................................................................63
4.4. data:URI .....................................................................68
4.5. CSS Sprites data:URI .................................................................................................................75
4.6. .........................................................................................80
5. ........................................................................................................84
5.1. ..............................................................84
5.2. Content Delivery Network Domain Name System ........................................................................89
5.3. ................................................................................................91
5.4. , 404- .....................................................................98

5.5. HTTP- ........................................................................................................100


5.6. ...........................................................................................................104
6. CSS .......................................................................................................................110
6.1. CSS expressions....................................................................................................110
6.2. , id class? ..........................................................................................................114
6.3. DOM- ............................................................................................116
6.4. reflow! .........................................................................................................121
7. JavaScript ............................................................................................................128
7.1. window.onload .........................................................................................128
7.2. JavaScript ...........................................................................................134
7.3. JavaScript ...................................................................................141
7.4. ........................................................................................................148
7.5. JavaScript-....................................................................158
7.6. DOM ...............................................................................................................................160
7.7. JavaScript.............................................................................................................163
7.8. , ..........................................165
8. ...............................................................................................................................169
8.1. ..........................................................................................169
8.2. ..............................................................................................185
8.3. ............................................................................................188
8.4. .............................................................................................................................192
..............................................................................................................................................207
......................................................................................................................207

webo.in
- -
, , HTML-
- ,
.
10 .

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

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

, ,
. ,
, . ,
,
.

Web Optimizator
,
-, online-
, ClientSide'2007 (
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://qzma.com/ ), ( http://kuklaora.blogspot.com/ ), ( http://ivannikitin.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/ ).
.

1. ?

1.1.
- HTML- .
( ),
, , , .

.1. ,
Web Optimizator 2008

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


, 3 :


6 (
).

.
, .
,
, .
.
, CSS Sprites data:URI .
.
,
.
.
CSS-,

. CSS- .
JavaScript. JavaScript,
-.
.

, , ,
- .
- ( 23) .

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

.

1.2.

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

, 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 7080,
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%.


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

,
.
, .

-, ,
, .

1.3.

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

10

(
) .
-, , .


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



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

1.4. :

:
.

11

. ,
.


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

URL ( RewriteRule GET).
-, ETag LastModified, ,
, .
, - 304
, .
, ( ) ,
.
.


,
, ,
.
, .

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


, gzip- 95
98% .
( proxy- ),
34 .

12

HTML- gzip
. ,
,
.
.

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

1.5.
, ,
, .
, , . , ,
, , , ,
.
, -,
.

1:
,
. , .
(gzip)
(CSS). CSS- JavaScript-
(
; ).
CSS-, head ,
. ,
( , keepalive TCP/IP ,
).
, - (
).

13

HTML.
JavaScript ( ,
).
JavaScript ( ), , . !

2:

( ).
. .
.
.

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

3:
,
. ,
, .
.
,
JavaScript. ,
; ,
, ( ,
, ).
HTML-,
JavaScript ( ,
,
JavaScript).
Ajax-;
, HTML-
, JavaScript-. ,
, ,
- (
).

14

, JavaScript- (
, , JavaScript-;
)
body ( -).

:
1.
2.
3.
4.
5.

DOM-, ( );
, ;
JavaScipt;
;
.

JavaScript,
.
DOM- JavaScript.
, .
CSS- (
CSS- )
- , .
,
CSS- CSS Sprites.
.
-
static.site.net/jas/componentName1.css;componentName2.css
static.site.net/jas/componentName1.js;componentName2.js.
.
1. /jas/ ( , ,
)
,
.
2. , ,

(, 255 Ext3)
.

4:

,
, .
(
1020% ), ,
.

15


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

16

2.

2.1. HTML
(gzip- , deflate-)
. - , 10 .

.
- gzip (GZU zip) .
,
zip. gzip RFC1952 (
http://tools.ietf.org/html/rfc1952 ), 4.2 1996 .
-
gzip.

mod_gzip
HTTP/1.1, - ,
, Accept-Encoding HTTP-:
Accept-Encoding: gzip, deflate

- ,
, .
Content-Encoding , .
Content-Encoding: gzip

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


- .
:
gzip = / + +

, (
500 128 ), -
( ). , ,
. .
, , ,
(

17

, ),
:
gzip = FS + LI + K*size

FS , LI
, gzip, K

.


, 2
:

: size gzip
: size FS

2, , ?
() ,
2 ( )
.
:
.
HTML- (
). 500, 1000 ... 128000
.
,
Linux (cat, gzip),
- .


. ,
, .
. 10000
.

18

. 3. gzip-
,
:

. 4. gzip-
, , ,
,
(, ). ,
:

19

. 5. gzip-


: ,
, gzip-
?
: -, -
, .
. ,
,
.
-, . (, 0W, squid, nginx, thttpd)
, ,
. , .

: gzip ?
,
. , , ,
(, , )
. ,
Dual Xeon 2,8 .
,
CPU 1 . :
, ,
, , , 1 . ,

20

( ),
.
, (
) (100 / 1500 /)
(280 1 ). , gzip 1000 Mhz
1500 / ( ).

. 6. 100 1500
280 1000

gzip-
, gzip ,
.
,
,
, .
, 10000 .
gzip .
, .
.
. ,
( ):

21

. 7. gzip
( % )
:

. 8. gzip-


, . HTML-, ,
4 ,
gzip ( ).
() , , ,
, .

22

, , (
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
# ,
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$
# ( )

23

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 .
# 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 . , ,
.

, gzip-encoded.

24

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:
. ?
.
,
(,
nogzip).
(jquery ):
cp $src/jquery.js $dst/jquery.nogzip.js
gzip $dst/jquery.nogzip.js -9 n -c > $dst/jquery.js

$src , , $dst
. ,
.

Apache

25

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

26

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

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

27

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.

28

. 9. CSS-
gzip
, , .

. 10. CSS-
gzip

.

29

. 11. CSS-
,
, CSS Tidy , ,
(, , 6%
).

-, gzip ( 81%),
.
-, ( ,
CSS)
( 83%) ,
(.. ).
-, . ,
gzip (, -
), . ,
( 1 ) (
- ),
HTML-.
, -
- 34% .
-, , , ,
.
Minifier CSS Tidy.
, ,
CSS- ( , 79%)

30

( , 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
$data

=~
=~
=~
=~
=~
=~

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

print $data;

CSS- , , ,
:
perl compress.pl site.source.css > site.compress.css


50% ( ;
),
, gzip .

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

- JavaScript-?
,
?
,
?

31

, . , ,
.


5 JavaScript, ( ,
, , ,
production-).
1. JSMin ( http://www.crockford.com/javascript/jsmin.html ).
, ,
, , JavaScript.
2. JavaScript::Minifier ( http://search.cpan.org/~pmichaux/JavaScript-Minifier1.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
.

32

. 12. JavaScript-
gzip
, , .

. 13. JavaScript-
gzip

( ) .

33

. 14. JavaScript-
,
, YUI Compressor , ,
.


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

34

, JavaScript- ,
. JS-
JSLint ( http://jslint.com/ ),

.

JavaScript-
2008 PDWiki
JavaScript. ,
JavaScript- (,
).

, .
, -,
:
.

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

519.7214

591.6636

645.4818

1. jQuery,

, :

35

_ = __ + __

, ,
, ,
.
, .
gzip- ,
YUI Compressor CSS- JavaScript-.
, ,
.

JavaScript-

JavaScript- . ,
.
, jQuery (200
400 ).
.

jquery-1.2.1
dojo-1.0.1
prototype-1.6.0
yahoo-utilities-2.4.0
protoculous-1.0.2


732.1935
911.3255
923.7074
927.4604
1136.5497

2. ( ,
)
, ,, ,
, , Yahoo ,
50% .
, ,
. ,
.

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

3. ( ,
)

36

,
( 1030 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 1030% , LZW
. , gzip, PNG ,
1 9. 6.
9.
, , PNG, 1030%
, GIF,
( ).
,
.

PNG
PNG ,
, .
PNG 16-
. PNG
.
(. Up),
PNG. PNG (8 )
, (.
none), .
(. Adaptive) .

37

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

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-
.
, ,

38

PNG ( gAMA ).
, Safari Mac OS 10.4 (
sRBG ,
).
PNG- , -,
CSS- PNG, ,
(, ).

PNG: MNG "PNG+"


(. Multiple Network Graphics, MNG)
PNG-, GIF89a. , MNG-
(
libmng).
Mozilla ( ) PNG-
Firefox 3, .
PNG,
- , ,
PNG. , MNG,
PNG.
GIF89a Flash.
, SVG, JavaScript . ,

.

PNG
PNG .
,
. ,
.
, ,
.
, ,
.
PNG- ,
20% 35% PNG. ,
PNG-, ,
, pngout pngcrush.


,
. ,

39


( Linux).
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/ .
20
30% .

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

40

www.mysite.ru/favicon.ico

:
o
o 404-
o cookie
o CDN
o
(<=1 )

Expires
favicon.ico 5 10%

favicon.ico,

-, -
, -, , .
, ,

, ,
. ,
, . .ico ,
.


.ico ( , ,
MIME- ,
, Wikipedia,
http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29 ). ,
( JPEG). ,
, , BMP, .
favicon.ico

( ,
, , : http://www.daubnet.com/formats/ICO.html ),
, :
(, GIF) (
PNG). ? .
, :
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. (
).

41

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

2
4
8
24

( )
198
318
1406
894

32

1150

4. favicon.ico 16x16

, 62 , .

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

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

favicon.ico data:URI (
),
(, - HTML-,
).
,
.

42

,
.

Yahoo! ,
favicon.ico .
, , , -
, CSS- ,

( ).
( 10 ,
16x16 ?)
. .

2.7. cookie

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

,

, .
, cookie
.
, cookie
(
).
cookie ,
, :
cookie , , .
.

cookie

43

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

). -:
.

44

3.

3.1. Expires, Cache-Control



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

URL. ,
, . -
,
(, common.v1.css common.v2.css).
, ,
.

HTTP Expires
Expires HTTP 1.0. HTTP-
(, HTML- ) ,
.
.

.
,
, .
,
( Internet Explorer 4.0) - GET-
, ,
. ,
, .
:
, ,
. , Expires
, ,
, .
,
.

45

, ,
, ,
. ,
? .
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


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 (- ContentEncoding: chunked).


Apache (
).
:

46

# , 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>

, ,
. ,
?


(,
), - ,
- : .
?
, , ,
. . URL,
.
. -, GET- , ,

http://webo.in/a.css?v23


http://webo.in/a.css?20081010

( , ),
.
-,

47

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-.
: -
, "?"
, . , ,
.
- ,
, .
, , 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

48

,
. ,
,
.

pre-check

,
.

. 15. pre-check post-check


, ,
Cache-Control (
HTTP-), IE
.

post-check,
.
,
post-check pre-check, .
HTTP- ,
. ,
. :
, , ,
.
, pre-check,
HTTP-,
. ,
. ,
Cache-Control, , .

49

, ( F5) ,
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,
. ,
If-Modified-Since . ,
, - 304
.
, ,
,
, .
ETag
(. Entity Tags ) ,
-, , , ,
ETag

50

, .
Last-Modified ,
. 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 .

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
.

51

, .
Apache IIS, ETag
,
, , ,
, - ,
. Expires ,
GET-, .
, ETag,
. Last-Modified
, ETag
. Apache,
FileETag none

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 . -,

52

iPhone,
25 , .
, ,
25 , ,
. ,
25 .
.
www.apple.com , 10
.
( ). ,
iPhone , .
, .
, ,
.
,
( ) 475500 .


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


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


iPhone.
.

53

25
.
iPhone

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

54

4.

4.1. HTML- CSS-


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

. GIF ( ),
CSS- (
) () .
HTML-
( , ,
,
). , .

CSS-
- ,
, ,
. ,
, .
-
. ,
, .
HTML- , ,
.. .
.

55

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

.
.

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. ,

56

@media print {

}

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

HTML- ( , , ).


,
, (
, , Internet Explorer, , -
Firefox, Opera Safari).
, HTML , Interner 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. Interner


Explorer ,
, .
( IE),
CSS- CSS-. ,
IE7, :
*+html body {
margin: 0 auto;
}

IE6:
* html body {
margin: 0 auto;
}

IE5.5- ( ,
, IE6,
):
* html body {

57

margin: 0;
marg\in: 0 auto;
}

CSS-
.
(, , CSS-
HTML- , ,
, ).

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

.


. JSON
, AJAX , DOM , .
.
.
- , .

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


, ,
. , :
dom.js
array.map.js
array.js
sprinf.js

58

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

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

59

. ,
,
.

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

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


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

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

HTML
A+B+C: T1

60

A+B+C: L + R(A + B + C)

2(T1 + L).
20 19(T1 + L).
/ 256 / ~20
30 , 950 . ,
300 ,
67 .
, , .
?


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 .
, ,
:

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

,
, . ,
.


, .
,
(, , ) .
, A B,
:

61

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

: , ?
?. : 23
.
;
, ,
.

PHP
JavaScript- CSS-
,
(
). ,
, ,
, gz-
, md5- .
:
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';

62

$this->scripts=$arrNewJS;
}

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


,
.
CSS Sprites ( CSS Image Maps).
. ,
.
, ,
CSS- background-position
. ( 99,9%)
-,

, CSS- , JavaScript-

63

(.. ), -
. .

rollover-

, ( ).

onmouseover/onmouseout .

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

. 16. rollover-. :
www.websiteoptimization.com
CSS- :
a.sprited {
background: yellow url(http://site.ru/img/button.png) 0 0 no-repeat;
width: 100px;
height: 20px;
}
a.sprited:hover {
background-position: -100px 0;
background-color: red;
}

,
( ).
,
. (
, ).

rollover-
,
. , :

64

. 17. rollover-. :
www.spegele.com

IE
IE
,
, .
, .
, ,
,
:
<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


,
-
. ,
, , .
,
. Image Map.

65

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


CSS Sprites
.
.

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

-.
, , .
:

. 19. --. : webo.in

-
www.csssprites.com. ,
.

66

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


, . 5 (,
).
1.
2.
3.
4.
5.


, (repeat)
, (repeat-x)
, (repeat-y)
, (no-repeat)

? :
- ,
- ,
. 1020 :
, (
).
, ( )
( ,
, ).
(
), .
?
, .
,
.
( ),
. , (
) .
, (
).

. 20. .
: webo.in

67


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

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,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuA
AAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUKM9tjz1OwlEQxH8P/h
V2NIZY0NhYeA0TbkLLPTyFV6DgLhYWFIaOmEhM3szbtXhEPmSy2Z3d2Y9sORySEyKih87iCg4GYDI
ByEwoQGbPCowzR3mG3e576Jsz85zkLZRSIqIsFrlc5n5PBK1la0Rka2lfeDun07JafQ2bTTw/l+0W
Oy3klFLKWq/9fA4wADZS/g10ufdVpeqxYheIAehHq9Li1PrvgpQQw5rxk15/6mfYWR1yVIUc0pFUN
ync7vyw5m14gbHfQx+3l3di4Vba4z0MASOZ2Swl3LCQitQ/w8amtW4B5QBxZlymVxLwCz+JZR4AeS
rEAAAAAElFTkSuQmCC" width="16" height="14" alt=" "/>

68

. 21. , 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,iVBORw0KGgoAAAANSUhEUgAAABAAAAALC
AIAAAD5gJpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUKM9tjz
1OwlEQxH8P/hV2NIZY0NhYeA0TbkLLPTyFV6DgLhYWFIaOmEhM3szbtXhEPmSy2Z3d2Y9sORySEyK
ih87iCg4GYDIByEwoQGbPCowzR3mG3e576Jsz85zkLZRSIqIsFrlc5n5PBK1la0Rka2lfeDun07Ja
fQ2bTTw/l+0WOy3klFLKWq/9fA4wADZS/g10ufdVpeqxYheIAehHq9Li1PrvgpQQw5rxk15/6mfYW
R1yVIUc0pFUNync7vyw5m14gbHfQx+3l3di4Vba4z0MASOZ2Swl3LCQitQ/w8amtW4B5QBxZlymVx
LwCz+JZR4AeSrEAAAAAElFTkSuQmCC) 0 0 no-repeat;)
height: 14px;
text-indent: 10px;
}

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

69

PHP- base64- (
, , , ,
IE URL ,
base64):
ul {
list-style: none;
}
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;
}

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
, ,
; )
( )
.
HTTPS-
.

70

( data:URI) Internet Explorer


57. base64- ,
. base64- 3945% ,
gzip- 510%.
base64-
( ).
.
URL 1024 ,
RFC. ,
, . , Opera Firefox
data:URI 50 ( IE8 32 ).
.
:

IE 7 .

(, ).
. .
, base64-, 33%
( 10% ).
( CSS) .
HTML-.



IE CSS-, .
, :
ul {
list-style: none;
}
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, ).

71

HTML-
, base64,
(, IE) . , :
<!--[if !IE]>-->
<img src="data:image/png;base64,..." alt="" title=""/>
<!--<![endif]-->
<!--[if IE]>
<img src="chart.png" alt="" title=""/>
<![endif]-->


, IE
( ) .

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- :
, . (!)
, Content-Location. .

72


, data:URI, W3C
, IE. , IE, mhtml
70% . , ,
base64- .
: ,
. CSS- IE
( ), CSS- ( ,
1 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 no-repeat;
}
* 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-
? IE6 ,
IE7. .

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

73


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

CSS data:URI.
IE mhtml,
.
CSS- CSS.
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..."
],

:
. 1 :
data:URI

74

.
<embed/>, midi-.
:
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? ,
, .
, ,
( ), ,
.
(,
)
CSS-.
(,
) .
, , Google?

75

.
.

. 22. CSS Sprites Google. : www.google.com


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


).


, CSS Sprites , ,
.
, ,
: 1
, ,
.
(12 ), , ,
. , , , 48
( , )
, .
.


, ()
, ,
, , . -,
. , ,
, 2030%.
-, ,
,
( ), , ,
img, .
.

76

-, ( ),
(,
).


data:URI
.

, CSS
Sprites ( ).
- base64 (+mhtml) CSS-()
, .
CSS Sprites, , -

.
-
data:URI.

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

CSS- -
data:URI CSS-
(, 110120% CSS-).
. ,
( 2,53
), ,
CSS- ( ).
, -, CSS-
. -,
, (
, -).
, ,
( , CSS-),
. CSS Sprites,
data:URI, (
).

77

( ()
IE , ,
).


,
CSS- ( , ,
),
( ) 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? : <noscript>
. : <noscript>
<head>, <link> <body>. (
,

78

),
.
,
(:
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 Explorer ,
:
setTimeout('load_dynamic_css("background-images.css")',0);

Safari
. ,
,
(HTML/CSS/JavaScript).
( ) ,
( ).
Safari , CSS-
window.onload
.
( ).
, :
/*
.
*/

79

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(){
setTimeout('load_dynamic_css("background-images.css")',0);
}
,false);

,
,

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

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

JavaScript CSS

80

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> .
:
<link type="text/css" rel="stylesheet" href="test.jscss" />
<script type="text/javascript" src="test.jscss"></script>

, , ,
, .
, Content-Type .
*/*, Firefox:
- ( ).
Safari (15% ), ,
( User-Agent)
.

81

HTML, CSS JavaScript


,
() HTML-.
: CSS- ( JavaScript-)
, 20% ( 5 ),
.
.
HTML-
, ( 90%)
() . :
,
, (
).


.
Google
, .

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

82

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

( -).
.

83

5.

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


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

( 80% 86% 20 23+ , )
, .
, ,
5086% .
10 ,
, 80% ,
. ,
( 12 )
keep-alive .

HTTP/1.1
,
,
.


. - -
, ,

.

84

HTTP, 1999 , ,
.

.
, HTTP 1.0
4.
,
( , IE8 6 -
).
( , ,
, ):

, IE 7

HTTP 1.1. HTTP 1.0 ,
,
, HTTP 1.1 ( ).


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


,
2 .

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

85

(, ),
, ,
.
.

. 23. . :
www.ajaxperformance.com
, musicstore.ajaxperformance.com
2 ( IE,
, , ): C0 C2.
HTTP 1.1,
, -
.
( , )
, ( ).
, ,
, . :
images1.yoursite.ru
images2.yoursite.ru

86

images3.yoursite.ru

, ,
, CNAME- DNS-
images1.yoursite.ru, images2.yoursite.ru images3.yoursite.ru,
.
, ,
, .
, .
md5-
. CRC32,
JavaScript.
.
, 6
.

. 24. . : www.ajaxperformance.com


40%.
, ,
.

87

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-
. , ,
, ,
.


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

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

88

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

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

89


-
. ,
, ,
.
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 , (
). DNS-,
.. .
DNS- .
-,
. DNS ( Windows
DNS Client Service). ,
. DNS- ,
DNS-.
Internet Explorer, , DNS- 30 ,
DnsCacheTimeout. Firefox DNS- 1
, network.dnsCacheExpiration.

90

( , ), DNS .
, , , CSS-, Flash- ..
DNS-.

.
24 ( )
.
DNS-
.

5.3.
-
() , .
,
:

;
;
.

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- , .
,
.

91


, .
, , F5BIG-IP Linux Virtual Server Project.
-.
.

, , .
:
1. ,
.
DNS.
2. ,
.
, .



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

.
, , ,
.
-, (Javascript Flash) ,
,
.
.

92

. 25.
, -? -

. -, PHP,
. MVC (-), , (HTML),
, .
, .
, CSS Sprites,
CSS/JavaScript
.
AJAX- Flash- (
). -
.
-
.
1. : JavaScript () SWF ( Flash-).
2. : , CSS ( ), -, - HTML.
3. : .
HTML-
, , :
.

93

, , S3 Amazon Web Services. ,


,
.
,
. -
servers.xml, .
( AJAX Flash) , .
, :
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>

AJAX
, , .

94

, - .
-
, , .
, 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')


, , -
, , ,
, .
1. -.
, , ,
( )
.
2. .
,
. ,
.
3. .
http://www.loadbalancedwebsite.ru/,
.
.

95

:
? ,
(
, -),

. ,
servers.xml.
,
. , ,
,
. .
- , -
. ,
, - - ,
. -
servers.xml ,
DNS.

Cloud Computing
Simple Storage
Service (S3) Elastic Computing Cloud (EC2) Amazon Web Services (
http://aws.amazon.com/ ).
S3
-, EC2 S3.

. EC2
. 10 72
. EC2, :
EC2 , . ,
, ,
,
.
EC2
, .
- EC2,
DNS .
, , ,
, DNS
.




EC2. EC2
, S3 .

96

EC2 (..
),
.
servers.xml
, S3 .
S3 ( S3 ;
) - ,
, . ,
EC2 cron ,
,
servers/{AWS IP } S3.
, http://s3.amazonaws.com/application/?actions=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-07-18T02:01:25.000Z</LastModified>
<ETag>"d41d8cd98f00b204e9800998ecf8427e"</ETag>
<Size>0</Size>
<StorageClass>STANDARD</StorageClass>
</Contents>
<Contents>
<Key>servers/216.255.255.2</Key>
<LastModified>2007-07-20T16: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 .
, .
, cron, EC2,
.
(AJAX Flash) ,
AWS
, servers.xml.

97

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
Cache-Control.
- 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.

98


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


.
, .
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-

99

,
, - 404 (File Not Found).
, , ,
.
: ,
. ,
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 (
).
HTTP-, TCP
, , , .
, IE ( 5070% )
,
HTTP/1.1, 8 . 4

100

. IP- :
.
DSL- -
, 1,5 /128
6 / 512 ..
, , 5:1 20:1.
, ,
, 520 .
500 , , ,
, , 2,510 . ,

, .



,
. , HTTP- 500
HTTP- 500
. ,
, TCP-
, , ,
, .
, ,
, , TCP, ..
,
, ,
, .
,
- 1,5 / 384
, 100 .
ADSL-
, .

.
.

101

. 26. HTTP-
. : www.die.net

( ) ,
,
, ,
.
100 .
8
,
4 . .
(
Firefox network.http.pipelining about:config),
,
, ,
.

, ,
-
4

102

.
1 keep-alive (0%).

. 27.
. : www.die.net
?

, , 10 , ,
, , , ,
4
.
, .
, . ethernet 100 20
.


,
. ,
500 , , .
1,5 / 384
100 ? ,
4 .

103

. 28. . :
www.die.net
,
. ,
(, cookie), -,
40% . , cookie
. : cookie , ,
,
cookie.

.

. ,
,
- .

5.6.
, ,
, :
HTML-,
?

104

,
(
,
).
,
.

. 29. () WebHiTech.ru

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

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

105

) ,
. , .

:
(
). :
8%, 8% (..
).
( CSS
Tidy) HTML- ( ).
, .
, .

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

:
(5
10) ,
document.body.innerHTML. .. HTML- (,
) ,
,
.
, , XHR- innerHTML
. ,
25 , .
XHR- iframe,
. , .
23 , .
:
, .
, -
, - .
, 90- .

106

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

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


.
100 /, : 23.

. ( html
gzip)
HTML/CSS
- .

1
2
3

data:URI

4
4.5
5

()
63

117

58

108

49

104

HTML- 6
49

49
HTML- 4 iframe
#3, JPEG- (
)
49
(new Image()).src head

5.

107

()

233
205
98

, ?
, ? ,
.
, (
). ,
( 304- ,
).
? .
( ) , <head> ,
. .
( 10 ),
</body>,
window.onload (
). , , ,
.
.
.
50100 , 34
.
1020,
.

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

108

, ( ,
) 1520% (
gzip- HTML, 10% ).
, ,

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

109

6. CSS

6.1. CSS expressions


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

CSS-
CSS- (. CSS expressions) Internet Explorer 5.0,
JavaScript- CSS-. ,
,
.
#myDiv {
position: absolute;
width: 100px;
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- , ,
.

110

CSS- CSS- ,
,
. , ,
( ) document.body.offsetWidth.
, , ,
. ,
, JavaScript.
, , - .
CSS-:
#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.

111

<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]);
// 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;

112

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;
}

, 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 }

113

.button2 { opacity: .2 }
.button3 { opacity: .3 }
.button4 { opacity: .4 }
.button1, .button2, .button3, .button4
{ filter: expression( runtimeStyle.filter =
'alpha(opacity='+currentStyle.opacity*100+')' ) }

,
.
,
. ,
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- ,
( ).
(div p, CSS1)
(div>p, CSS2).


, -,
, -

114

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

,
.
, . ,

. .

,
(float:left;
width:20px; height:20px, ).
CSS-,
( , ,
Opera).
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

9412
12886

247
257

97
95

84
81

158
159

div>p.class 519
div>.class 836
div>p#id
div>#id

549
858

10299
15172

247
242

105 92
113 91

172
169

div p.class

827

10706

256

97

161

115

84

div .class

Firefox 2 Opera 9.5 Safari 3 IE 7 IE 6 IE 5.5


15864
505
247
95 86 160

div p#id
div #id

772
948

11952
13306

247
255

108 99
108 95

177
173

div.div p.class 1001


div.div .class 1099

10519
18742

263
253

111 94
105 92

165
166

div.div p#id 1161


div.div #id 1247

10989
15816

266
256

117 95 181
114 100 187

6. ,

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

6.3. DOM-
, : DOM id class?
3 HTML-. 10000
, id (
50 10000, DOM-). HTML-
, id class.
DOM- id (..
50 10000). iframe,
.

DOM-

116

(,
Internet Explorer, 50% 70%
) :

. 30. ,
( )
. ID (10000
get) 10000 , ID clean (10000
get) , ,
:

. 31. ,

117

DOM-
, , ,
class , id ( , 2%
10% ). , .class-
, #id, 10%,
15%.
: Centrino Duo 1.7 0,0085 1
( , 3 CSS- 1 ).
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>
<p>
<a href="#">
<em></em>

118

</a>
<span></span>
</p>
<blockquote></blockquote>
<h1></h1>
</div>

. 32. DOM

?
, , DOM- .
, ( ).
7001000 .
(37 , , 3050 ).
,
, .
,
, ( 50%).
, DOM-
.
,
HTML 4.0 Transitional XHTML 1.0 Strict
CSS- (
). .

DOCTYPE

119

(
,
). ,
.
.
() :
head
window.onload ( HTML). ( , - Safari,
),
.
XHTML Strict
. , , ,
. ( onclick="",
) . , , ( 1
150 ).
onclick.
. ( Safari
, 83 onclick).
( CSS/HTML-)
id , class
. .


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

2 27173

8993

60

75

320

127

118

148

27

3 26260

8949

61

75

320

131

116

141

23

4 26153

8862

55

73

306

94

102

178

28

7.

?
, XHTML ( ,
, ), HTML. (

120

HTML 1012%).
, 100 / FF3
9 .
.
, (+/-50
). ,
,
- .
, , XHTML
, HTML. , ,
(26153 26275 , 8862 8845 ,
.. 0,5%). IE7 7
( 6080 ). , , 10% . FF3
( 20% (25 127 )).
23 ,
; 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;
}

121

function fnStyle(el)
{
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 , , .
IE sp62

IE8b

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

clean

128

153

15

15

16

offsetHeight

23500

10624

4453

4453

5140

style.display

171

209

56

56

34

height vs. style

140

50

80

80

150

8. .
. 5
, offsetHeight 50150 .
, offsetHeight,
, . ?


Reflow DOM,
.
, .
reflow:

;
DOM;
;
;
reflow,
.

122

Reflow (
) , .
DOM reflow,
. , reflow,
reflow. ..
, reflow,
.
reflow .
clean,
reflow. , offsetHeight, ,
reflow. ,
reflow .
: Opera reflow , , ,
. Opera
. , ..
.

Computed Style
? ,
(offsetHeight) (style.display) . ,
. - ,
: Computed Style
( CSS ).
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];
};
}();

.
IE sp62

123

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

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

9. getStyle.
-, IE Firefox ( )
( ). -,
, offsetHeight.
,
(getStyle JavaScript-),
.
, 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).
IE sp62

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

offsetHeight

23500

10624

4453

5140

isHidden

231

351

70

71

124

IE sp62

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

isHidden2

370

792

212

118

offsetHeight vs.
isHidden

102

30

73

92

10. isHidden.
, .
, ,
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';
}

125


element.className
element.style.color

IE 6
512
1709

IE 7
187
422

Firefox 1.5
291
725

Firefox 2.0
203
547

Opera 9
47
282

11.


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

className , .
.

, style.


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

,
,
reflow ( ,
).


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

126

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>

127

7. JavaScript

7.1. window.onload
, 10 ,
defer, ,
. .
window.onload -.
- , , ,
, .
, onload ,
( ). ,
,
. ,
, DOM ,
.

Firefox
Firefox : DOMContentLoaded.
, , Mozilla- (
Opera 9 ):
// 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 . ,

128

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

IE . JavaScript HTML-:
// 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).

Internet Explorer, (
, IE7
):

129

// 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;
// -
};
/* 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);

130

init(); // onload
}
}, 10);
}
/* */
window.onload = init;

JavaScript
JavaScript-
, :
<script> ,
.
, .
, , ,
. document.write(),
DOM-, location.href, .
, ,
. , ,
, ,
.

.
,
JavaScript-.
, :

. 33. : JavaScript-


( )
, . -
, . IE <= 7

131

Firefox 2 2 ( HTTP 1.1


), IE8, FF3 6.
, ,
(
). ,
JavaScripts .
, , .
-
,
, </body>. , ,
( - ),
. ,
, - .


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

,
. ,
, :

. 34. : JavaScript-
, ,
. .
,

132

document.write. ,
element.innerHTML .

, ,
. , 3
three.js one.js.
?
.
, ,
HTTP-.
,
.
,
onload ( Firefox)
onreadystatechange ( IE).
(, {filename}_loaded)
true.
.
,
IE6- Safari3 ( Windows). 10 ,
( , 6 FF3,

), 10 , 35, .
(Opera 9.5, Firefox 2, Firefox 3, Internet Explorer 8)
.

(
CSS-).
,
.
, .

-?
,
.

defer script
document.write()
script

133

IE
1.
IE ( defer)
2.
document.write


XMLHttpRequest
,
eval()
XHR-
,
script
iframe

eval() ( ,

)
,
1.
2. iframe

12. JavaScript-


Safari IE8 ,
. , ,
, .
,
, IE 7
Firefox 3 .
<script>.

7.2. JavaScript
- :
, , , ,
.

.
,
, .

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

Javascript

134

Javascript,
, . Javascript
- ,
. Javascript c.
, 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-),
, .
:
function color(object, color) {
if(object) {
if (color) {
if (object.style) {
object.style.color = color;
}
}
}
}

135

, 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 .

DOM-,
, .
w3.org.



, , Javascript.
.

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

136

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


, , Javascript
, , ,
. .js ,
, (
).
(, , )
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
.
, ,
,
.

137

, ,
,
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) ) {
e.target.href = e.target.href + '?name=value';
}
return true;
}
}

,
:

, .

. , .
.
.
- JavaScript
. .

138

.
, , ,
, ,
.
, .

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;
}


, (,
, -).
,

, 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;
}

139

}
window.onload = MenuNavigation.init;

, ,
, , :
, ,
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);


,
:
node[/*@cc_on !@*/0 ? 'attachEvent' : 'addEventListener']
(/*@cc_on 'on'+@*/'click', function(e){
var target = e.target || e.srcElement
//

140

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):

7.3. JavaScript

,
.
:
.
-.


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

141

. , ,
.

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

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



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

142

: ( ,
) 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 ,
. ,
? , :
document.write innerHTML ( appendChild). .
,
. DOM, window.onload
.
:
. ( ) ,
( ,
),
. ,
, .

143

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


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

144

6. . ,
, ,

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

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

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


JavaScript- ,
(
). Google Analytics ,
new Image(1,1). ( )
document.write,
, ,
. .
- (
window.onload, )

145

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

?
. ,
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-

146

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=\"\">');


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.googleanalytics.com , .
()
JavaScript-
.
,
. , 10 ,
. , .
10 . :
, . :
() .
Goole Analytics.

147

var _counter_timer = setInterval(function() {


if (urchinTracker) {
urchinTracker();
clearInterval(_counter_timer);
}
}, 10);

, (
), , (
).

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



.
JScript,
.
, , ,
.
4 .

148

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

, , .


.

, -
.
DOM-, .
:

. 35.

149

- DOM-.
DOM- ,
, , ,
DOM-. :
DOM-.
, DOM-
, , !
, ,
,
. ,
30 , .
, 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-
. -
, , .


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

150

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>


, ,
.
.
, ,
.

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

151

. 36.
2 ,
, .
,
.
.

, , .
2,
, .
, ,
. ,
, , .
, ( null).
,
, . , ,
.
:
<script type=text/javascript>
function AttachEvents(element)
{
// ClickEventHandler

152

element.attachEvent("onclick",ClickEventHandler);
function ClickEventHandler()
{
//
}
}
function SetupLeak()
{
//
AttachEvents(document.getElementById("LeakedDiv"));
}
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()
{
//
}
}
function SetupLeak()
{
//
AttachEvents(document.getElementById("LeakedDiv"));
}

153

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

.
, , DOM.
.
,
. ,
,
. ,
.

154

. 37. , DOM-
,
.
, ,
, , .
,
- . ,
(,
),
. , . ,
.
,
. DOM-
,
, .
Internet Explorer.
, IE-. ,
DOM- ,
. , .
<script type=text/javascript>
function LeakMemory()
{
var hostElement = document.getElementById("hostElement");

155

// ,
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()
{
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-,
, ,
, .

156

,
(
, DOM-
). ,
,
, .
DOM-,
.
,
, .
, ,
. , ,
, . ,
, DOM-, :
.
,
, , .
, .

-
API
, . -

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

157

<script id="hostElement">function foo() { }</script>

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


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

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


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

158

, setTimeout,
,
. ,
setTimeout 0,
.
:
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. , ,
( ),
.
3. ,
(, 10 ),
, . , (
) , ,
.
4. setTimeout! ,
eval , ,

159

,
.
5.
, ,
JavaScript-,
, .

, , (

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

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

DOM DocumentFragment:
DOM-.
DOM1 (
Internet Explorer 6 ).
DocumentFragment

, ,
Node
DocumentFragment; DocumentFragment
.
, DOM-,
,
( ,
). . ,
DocumentFragment cloneNode.

DOM-.
, ,
DOM- ( 12 8
div).

160

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;
}


, , ,
, , :
( ,
).
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) );
}

Firefox 3.0.1
Safari 3.1.2

161

90
156

Fragment
47
44


Opera 9.51
IE 6
IE 7
IE 8b1

208
401
230
120

Fragment
95
140
61
40

13. DOM-,

?
. ,
(,
, )?
:
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 ).
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);

162

}
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>";
}
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) .
:

163

;
innerText .

. ,
DOM- ,
, .
:
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++;
}
})();

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

164

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
.
, ,
( ) JavaScript, -.
, (, DOM-) ,
CPU, (
-),
.

7.8. ,


JavaScript- .

,
JavaScript. ,
.
<!-- -->
<p id="test1"></p>

165

<p
<p
<p
<p
<p

id="test2"></p>
id="test3"></p>
id="test4"></p>
id="test5"></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++) {
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--) {
var item = items[i];
}
}
document.getElementById('test4').innerHTML =
": " + (new Date().getTime() - time);
time = new Date().getTime();

166

// 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>

for-in
Firefox 3.0.3
714
657
835
Safari 3.1.2
141
140
157
Opera 9.61
188
125
765
IE 6
1281
1219
1094
IE 7
1391
1297
1250
IE 8b2
954
906
922
Chrome 0.2
288
246
332

do-while while
280
297
217
125
125
93
94
94
78
468
500
360
515
532
406
406
422
328
117
114
95

14. ,
while 23
. - 1000
,
.


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

167

//
items[i].nodeName.match(RegExp);
// 3.
items[i].nodeName.match(/script/gi);
// 4. ,
// (=)
items[i].nodeName.match(/script/i);
// 5.
/script/i.exec(items[i].nodeName);
// 6. ,
/script/i.test(items[i].nodeName);

, .
( 10000 DOM). :

Firefox 3.0.3
Safari 3.1.2
Opera 9.61
IE 6
IE 7
IE 8b2
Chrome 0.2

search
2120
453
2141
2594
2562
2140
856

match
2041
469
2063
2516
2469
2032
870


1295
344
406
1875
1859
1453
416

1273
359
344
1859
1844
1453
397

exec
1225
360
312
1953
2000
1547
385

test
1348
359
313
1906
1860
1469
392

15. ,

,
, .
match, exec
test.

168

8.

8.1.
,
.
,
.



. ,
, ( ), ,
.
(<img src="...">, <link
rel="stylesheet" href="...">, <script src="..."> ..),
. ,
, ( HTML-
, ).
URL (, ), .
JavaScript- :
<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 ...

169

, ,
http://example.com/page.html 0,971 .
, 57842
, 57842 * 8 / 0,971 = 476556
(45 ).
. 1,5 , ,
.
,
,
, .
.

Apache Benchmark JMeter


ab Apache ( Linux
Apache) .
, , .

ab c10 n1000 http://www.website.ru/

- www.website.ru.
1000 (
n1000) 10 ( c10).
,
(
1000 ). , 510
, , ,
.
, .
,
:
Time per request:

40.599 [ms]

Connection Times (ms)


min mean[+/-sd]
Connect:
18
40
Processing: 0
0
Waiting:
0
0
Total:
18
41

median
12.5
0.3
0.3
12.4

max
38
0
0
38

61
1
1
61

, , 41 ,
. ,
, .
:
, ( ab
Apache).

170

( CGI) CPU,

.

Apache JMeter,
, HTTP. , ,
ab,
, ,
. , JMeter
-, SMTP, POP
JDBC. ,
: ,
, .


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

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

Web Developer Toolbar Firefox



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

171

. 38. Web Developer Toolbar


, .
, . Firefox.

Firebug NET Panel Firefox


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

. 39. Firebug Net Panel 1.4a1

172

,
, ( , ):

DOMContentLoaded load. , load
, , ,
,
.
:

. 40. Firebug Net Panel


webo.in
( c c.css?20081010).
2 ( new
Image().src, ). ,
( 200 ),
. Firefox
3 : d.css?20081010, g.js?20080920 j.js?20080924.
( Google Analytics)
__utm.gif . ,
HTML- DOM-
, . Firefox (
) b.png (
d.css, ).
, .
g.js

window.onload,
( ,
). :
,
.
100
200 . (
) 500 .

Yslow Firebug Firefox

173

Firebug ( Firefox) YSlow.


, ,
.
. . ,
, .
( 100)
.

. 41. YSlow

Web Inspector Safari


Firebug Net Panel, Web Inspector
, . :
, ()
, .

174

. 42. Web Inspector

HttpWatch
HttpWatch ( http://www.httpwatch.com/ ) IE,
Firefox. HTTP-
,
.

175

. 43. Http Watch


.

Fiddler
Fiddler ( http://www.fiddlertool.com/fiddler/ ) IE
(, ,
).

. 44. Fiddler

Live HTTP Headers


Live HTTP Headers ( http://livehttpheaders.mozdev.org/ ) HTTP Firefox .
Firefox,
(
).

176

. 45. Live HTTP Headers webo.in

- Sloppy
,
, ,
:
.
,
- - .
: , ,
( , ) ,
, , ADSL-128 Kbps.
Sloppy -.
:
9,6 / 512 /. ,
1 ,
, ( ).

.
: , ,
( 9,6, 14.4, 28.8, 56, 128, 256 512 ), ,
. -,

177

, . ,
,
( ).
Sloppy , JNLP-, Java
Web Start ; , ,
.

. 46. Sloopy

Analyze.WebSiteOptimization.com
, -
. (
Yahoo). , data:URI
mhtml-. .

178

. 47. analyze.websiteoptimization.com

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

179

. 48. octagate.com/service/sitetimer/

Tools.Pingdom.com
, ,
.

. 49. tools.pingdom.com

180

AlertSite.com
, ,
, data:URI mhtml-.
. ,
, .

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

Site-Perf.com
,
. ,
.
.
.

, .

181

. 51. site-perf.com

GetRPO.com

. Runtime Page Optimizator,
( IIS)
.
, .
(MSIE),
:

182

. 52. get-rpo.com

Webo.in
Web Optimizator ,
.
, :

183

. 53. webo.in
,
:

184

. 54. webo.in ( )

, ,
,
.


. ,
, .
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

(
).

185

, (
).

?
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,
. ,
:
1. Max Connections Server = 16
.

.

186

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
.
, ,
: ,
.
Opera.
.
( ):

187

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-

188

#
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$
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

189

# (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>

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;

190

}
# ,
gzip on;
# HTTP,
gzip_http_version 1.0;
#
gzip_comp_level 9;
#
gzip_proxied any;
# (, )
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;
}
#
location ~* ^.+\.(bz2|dmg|gz|gzip|rar|tar|zip)$ {
expires 1y;
}
#
location ~* ^.+\.(pdf|txt)$ {
expires 1y;

191

}
}

nginx ,
--with-http_gzip_static_module gzip_static ,
. ,
0.7+.

IIS
IIS : IIS
.
:

;
IIS ;
;
.

IIS:

: , , ;
:
( , gui
);

.
, ,

IIS; .

8.4.

.
,
. ,
.

vkontakte.ru
( http://vkontakte.ru/ ) (
) .
:

192

. 55. vkontakte.ru
,
, , , .
, .
,
.
: gzip. (HTML, CSS, JavaScript) .
. .
:
5% .
1050 .
. CSS- JavaScript-
25 , .
(
1520 ) 100 (
). , IE
( ), , ,
.
- JavaScript-.
: ,
.

193


window.onload 300 (
40% ). , ,
.
. : max-age
, Last-Modified. ,
vkontakte.ru ,
. HTML :
. ,
nginx.

. 56. vkontakte.ru
(510) ,
CSS Sprites
CSS-. :
.
(
). ,
DNS Lookup. ,
2 .
, ,
(,
: ,
).
( )
.
Image
Map ( CSS Sprites)
. :
, 57 (
1015 ) .
( ) DNS Lookup +
. vkontakte.ru CDN (
), 200300
.

194


.. ,
, ,
.
, DNS Lookup.
odnoklassniki.ru

. 57. odnoklassniki.ru
vkontakte.ru odnoklassniki.ru.
, , . -,
, IE
. -, -
(
).
.
? ,
, -.
23 , (
) .

195

. 58. odnoklassniki.ru
: ,
. , .
58, : ETag, Last-Modified
.
.
, odnoklassniki.ru
, vkontakte.ru.
.
,
.
yandex.ru

. .

. 59. www.yandex.ru
, .
19 ,
49 .
, CSS-

196

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

. 5 , .
(, )
. , Last-Modified (
, )
( - 304
).

. 60. HTML- yandex.ru


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

197

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

198

Mail.ru , , .

.

. 62. www.mail.ru
HTML- gzip, CSS- JavaScript-
(, , ).
4 JavaScript- 3 CSS. JavaScript , ,
head . .
, . 63,
Expires Last-Modified. .

. 63. mail.ru
(,
), ,
.png. .jpg

199

. (
) Image Map, .
2 (r1.mail.ru img.mail.ru).
( )
. , mail.ru
.
rbc.ru

. .

. 64. www.rbc.ru
, 3 CSS- 3 JavaScript-,
,
. ,
(115 HTML-
).
.gif .png .jpg
20% 514 ,
(, HTML-).
CSS Sprites , ,
( ).
, 3 ( pics.rbc.ru)
( 4050%). , , :

200

3 , Last-Modified,
304 , .
, ,
.
lenta.ru
Lenta.ru.

. 65. lenta.ru
: ,
,
. :

201

. 66. lenta.ru
(Cache-Control
() Expires), , ETag Last-Modified.
. ()
( , ).
(img.lenta.ru),
- ( 50%)
( ).
, , ,
CSS Sprites JavaScript.

.
kommersant.ru

202

. 67. kommersant.ru
.
,
.
. :
HTML- CSS-. JavaScript - :

. 68. JavaScript- kommersant.ru


. . 68, ,
ETag / Last-Modified (
).
, .
. .gif .png
50 ( 800 ). CSS Sprites

203

3 :
. 60%
. , .
: , .

.
marketgid.ru

MarketGid.

. 69. marketgid.ru
, : 300 HTTP-
700 . , :
HTML-, . 1 CSS IE (
6070%). 2
JavaScript-.
HTML 70 ,
. ,
,
. HTML 4.01
, , , .

204

.gif .png CSS


Sprites, :
24 , .jpg .
-
, Image Map 1520 ,
.
,
, , .
,
,
.
habrahabr.ru
, -,
, , .
, .

. 70. habrahabr.ru
6 CSS- 15 JavaScript- ( head )
. ( )
:
. ,
. , .

205

, , favicon. ,
. , ,
, Image Map ,
, ( 10 ).
:
.
,
CSS Sprites.
: .
JavaScript
.

206


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

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

.
:
http://webo.in/contacts/

207