Академический Документы
Профессиональный Документы
Культура Документы
, , ?
,
? ,
,
?
, .
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
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/
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>
, 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
. (
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-.
.
.
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
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
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
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
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.
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: max-age=31536000
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 .
post-check
48
,
. ,
,
.
pre-check
,
.
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.
,
.
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.
,
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.
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-->
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
.
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) {}
,
.
65
CSS Sprites
.
.
:
, ,
, . ,
,
. . ,
CSS Sprites.
,
,
(, - ).
, .
-.
, , .
:
-
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
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
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 ).
, CSS Sprites? ,
, .
, ,
( ), ,
.
(,
)
CSS-.
(,
) .
, , Google?
75
.
.
, 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
,
,
.
( 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.
<!-- /*
function t(){}
<!-- */
<!-- body { background-color: white; }
CSS ,
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
?
:
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 ).
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
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-
- ,
.
,
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- , , ,
.
.
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
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
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
div p#id
div #id
772
948
11952
13306
247
255
108 99
108 95
177
173
10519
18742
263
253
111 94
105 92
165
166
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
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
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 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
,
: , 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
( ),
.
, (
,
, ( , )
, , ).
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
, (
), , (
).
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
,
, .
,
.
. ,
, ,
, .
, -.
, .
- ,
, , ,
. ,
- .
, ,
.
,
, .
,
.
,
,
.
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" )
, , ,
, , :
( ,
).
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 , ,
.
,
,
, .
.
- www.website.ru.
1000 (
n1000) 10 ( c10).
,
(
1000 ). , 510
, , ,
.
, .
,
:
Time per request:
40.599 [ms]
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 ,
.
.
171
172
,
, ( , ):
DOMContentLoaded load. , load
, , ,
,
.
:
window.onload,
( ,
). :
,
.
100
200 . (
) 500 .
173
. 41. YSlow
174
HttpWatch
HttpWatch ( http://www.httpwatch.com/ ) IE,
Firefox. HTTP-
,
.
175
Fiddler
Fiddler ( http://www.fiddlertool.com/fiddler/ ) IE
(, ,
).
. 44. Fiddler
176
- 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
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
).
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 - :
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
. 70. habrahabr.ru
6 CSS- 15 JavaScript- ( head )
. ( )
:
. ,
. , .
205
, , favicon. ,
. , ,
, Image Map ,
, ( 10 ).
:
.
,
CSS Sprites.
: .
JavaScript
.
206
( - )
.
, ,
.
, , ,
, .
.
- .
, ,
.
, (
).
,
, , , -
. : , , ,
-
. -, ,
HTML-,
- .
: .
.
:
http://webo.in/contacts/
207