Разгони свой сайт

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 ( )
file
\.js$
file
\.css$
#
mime
^text/html$
mime
^text/plain$
mime
^httpd/unix-directory$
# ( )
23
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>
# 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
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
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-,
, :


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

<img src="data:image/png;base64,..." alt="" title=""/>



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

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 ( 
<col width=100></col>

<col width=200></col>

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

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,
:
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.
, .
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-, .
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-. ,
. , , -
.
,
, .
function Encapsulator(element)
{
//
this.elementReference = element;
//
element.expandoProperty = this;
}
{
// :
new Encapsulator(document.getElementById("LeakedDiv"));
}
{
document.getElementById("LeakedDiv").expandoProperty = null;
}
</script>
<div id="LeakedDiv"></div>

, ,
.
.
, ,
.
- ,
. ,
,
, .
,
.
, ,
.
, ,
.
151
. 36.
2 ,
, .
,
.
.

, , .
2,
, .
, ,
. ,
, , .
, ( null).
,
, . , ,
.
:
function AttachEvents(element)
{
// ClickEventHandler
152
element.attachEvent("onclick",ClickEventHandler);
function ClickEventHandler()
{
//
}
}
{
//
AttachEvents(document.getElementById("LeakedDiv"));
}
{
}
</script>
, .
,
. ,
: detachEvent?
,
onUnload .
, ,
. ,
,
, .
function AttachEvents(element)
{
// ,
// -
element.expandoClick = ClickEventHandler;
//
// ClickEventHandler
element.attachEvent("onclick", element.expandoClick);
function ClickEventHandler()
{
//
}
}
{
//
AttachEvents(document.getElementById("LeakedDiv"));
}
153
{
document.getElementById("LeakedDiv").detachEvent("onclick",
document.getElementById("LeakedDiv").expandoClick);
document.getElementById("LeakedDiv").expandoClick = null;
}
</script>

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

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

.
, , DOM.
.
,
. ,
,
. ,
.
154
. 37. , DOM-
,
.
, ,
, , .
,
- . ,
(,
),
. , . ,
.
,
. DOM-
,
, .
Internet Explorer.
, IE-. ,
DOM- ,
. , .
function LeakMemory()
{
var hostElement = document.getElementById("hostElement");
155
// ,
for (i = 0; i < 5000; i++)
{
var parentDiv = document.
createElement("<div onClick='foo()'>");
var childDiv = document.
//
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.
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-,
.
,
, - -
, .
, , ,
.
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(" | "),
document.createTextNode(" | "),
];
"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 fragment = document.createDocumentFragment();
fragment.appendChild( elems[e] );
}
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 child = document.createElement("div");
var parent = div[0].parentNode;
child.appendChild( elems[e].cloneNode(true) );
}
// 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>
// 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++) {
}
}
" ( ): " + (new Date().getTime() - time);
// for-in
for (var j=0; j<10000; j++) {
for (var i in items) {
}
}
" for-in: " + (new Date().getTime() - time);
//
for (var j=0; j<10000; j++) {
for (var i = length - 1; i >= 0; i--) {
}
}
": " + (new Date().getTime() - time);
166
// do-while
for (var j=0; j<10000; j++) {
var i = 0;
do {
i++;
} while (i < length)
}
"do-while: " + (new Date().getTime() - time);
// while ( )
for (var j=0; j<10000; j++) {
var i = length - 1;
while (--i) {
}
}
" 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>
<!-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
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
#
reqheader "User-agent: Mozilla/4.0[678]"
reqheader "User-agent: Konqueror"
# .html
file
\.html$
# .css / .js ,
file
\.js$
file
\.css$
#
mime
^text/html$
mime
^text/plain$
mime
^httpd/unix-directory$
# ( )
mime
^image/
# 'Transfer-encoding: chunked' gzip-,
#
mod_gzip_dechunk
Yes
# Vary ,
# -
mod_gzip_send_vary
On
</IfModule>
# -
<FilesMatch .*\.(js|css|html|txt)$>
Header set Cache-Control: private
</FilesMatch>
</IfModule>
# 10
ExpiresActive On
ExpiresDefault "access plus 10 years"
# HTML-
<FilesMatch .*\.(shtml|html|phtml|php)$>
ExpiresActive Off
</FilesMatch>
</IfModule>
Apache 2
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
#
# - ,
# ,
<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

Разгони свой сайт

Загружено:

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

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

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

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

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

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

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

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

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

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

Разгони свой сайт

Загружено:

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

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

2008

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

# 'Transfer-encoding: chunked' gzip-,

2.2. CSS JavaScript

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

2.5. PNG GIF

Greg Roelofs, PNG, , 24- RGB

PNG: MNG "PNG+"

Windows .png TweakPNG (

bits per pixel = 1, 4, 8

3.1. Expires, Cache-Control

Cache-Control: no-store, no-cache, must-revalidate

(60 * 60 *24 * 365 ).

3.2. IE: pre-check, post-check

post-check pre-check Cache-Control

. 15. pre-check post-check

3.3. Last-Modified ETag

Apple iPhone, iPod Touch

4.1. HTML- CSS-

main.css, IE6 ie6.css. Interner

4.3. CSS Sprites

CSS Image map

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

. 19. --. : webo.in

. 21. , data:URI. webo.in

( data:URI) Internet Explorer

4.5. CSS Sprites data:URI

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

function load_dynamic_css (src){

CSS HTML ( <!--)

CSS CSS-, (/* ... */).

HTML, CSS JavaScript

5.2. Content Delivery Network Domain Name System

, , S3 Amazon Web Services. ,

- HTTP 301, 302

IE, Firefox Safari HTTP- (.

6.1. CSS expressions

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

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

div.div p.class 1001

div.div p#id 1161

Firefox 3 Opera 9.5

height vs. style

table CSS- table-layout fixed.

Firefox 2 2 ( HTTP 1.1

TopLine, Pop-Up, Pop-Under RichMedia

var _counter_timer = setInterval(function() {

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

function text(node, txt){

Apache Benchmark JMeter

Connection Times (ms)

Web Developer Toolbar Firefox

. 38. Web Developer Toolbar

Firebug NET Panel Firefox

. 39. Firebug Net Panel 1.4a1

. 40. Firebug Net Panel

Yslow Firebug Firefox

Firebug ( Firefox) YSlow.

Web Inspector Safari

. 42. Web Inspector

. 43. Http Watch

Live HTTP Headers

. 45. Live HTTP Headers webo.in

2. Max Connections Total = 32 64

(60 * 60 24 365 ).