High-Performance Best Practices for Web Sites
description
Transcript of High-Performance Best Practices for Web Sites
![Page 1: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/1.jpg)
High-Performance Best Practices for Web SitesJason Weber, Internet Explorer Team, Microsoft
![Page 2: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/2.jpg)
Session Objectives
1) Best Practices to Improve Performance• Inside look at browser performance• Specific things that you can do today• Principles behind the optimizations
2) Preview Internet Explorer 9 Performance• Hardware Accelerated HTML5• GPU Powered Graphics• Compiled JavaScript
![Page 3: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/3.jpg)
I have a lot of content…
![Page 4: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/4.jpg)
Section #1: Best Practices for Improving Performance
![Page 5: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/5.jpg)
Example Scenario – Wall Street Journal
Starting with Bing
![Page 6: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/6.jpg)
Example Scenario – Wall Street Journal
Blank Background
![Page 7: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/7.jpg)
Example Scenario – Wall Street Journal
Initial HTML
![Page 8: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/8.jpg)
Example Scenario – Wall Street Journal
Heading Appears
![Page 9: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/9.jpg)
Example Scenario – Wall Street Journal
Initial Content
![Page 10: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/10.jpg)
Example Scenario – Wall Street Journal
Right Column Lays Out
![Page 11: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/11.jpg)
Example Scenario – Wall Street Journal
Media Appears
![Page 12: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/12.jpg)
Example Scenario – Wall Street Journal
Customized Content
![Page 13: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/13.jpg)
Example Scenario – Wall Street Journal
Advertisements
![Page 14: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/14.jpg)
Example Scenario – Wall Street Journal
Interacting with Website
![Page 15: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/15.jpg)
15
Picking Five Popular News Sites
Wall Street JournalChicago TribuneUSA TodayNew York TimesWashington PostCNN NewsSeattle TimesMSN NewsFinancial TimesBoston Globe
News Site #1News Site #2News Site #3News Site #4News Site #5
![Page 16: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/16.jpg)
16
Five Popular News Sites
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 17: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/17.jpg)
17
Five Popular News SitesVariation in Total Size
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 18: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/18.jpg)
18
Five Popular News SitesNumber Elements to Number of CSS Rules
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 19: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/19.jpg)
19
Five Popular News SitesNumber of Images
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 20: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/20.jpg)
20
Five Popular News SitesAmount of JavaScript
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 21: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/21.jpg)
21
Five Popular News SitesAmount of JavaScript
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 22: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/22.jpg)
22
Which sites loads the fastest?
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 23: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/23.jpg)
23
Which sites loads the slowest?
TotalSize
NumberElement
sCSS
RulesImageFiles
Script Files
ScriptLines
ScriptLibs
News Site #1 3280kb 8662 1293 137 21 14,216
News Site #2 961kb 820 2964 44 16 3,812
News Site #3 300kb 1187 1366 26 4 9,481
News Site #4 1462kb 4257 893 76 21 11,988
News Site #5 2981kb 3578 1917 88 19 20,722
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
![Page 24: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/24.jpg)
24
Internet Explorer 8 Subsystem Distribution
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
0
500,000
1,000,000
1,500,000
2,000,000
2,500,000
3,000,000
3,500,000
4,000,000
HTML parsing CSS parser Collections JavaScript Marshalling Native OMFormatting BlockBuild Layout Rendering
Mill
isec
onds
![Page 25: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/25.jpg)
25
Average Distribution Across 5 News Sites
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
![Page 26: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/26.jpg)
26
Average Distribution Across Top AJAX Sites
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
![Page 27: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/27.jpg)
27
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 28: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/28.jpg)
28
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 29: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/29.jpg)
Networking OptimizationsCompress Network Traffic
RequestGET / HTTP/1.1Accept: */*Accept-Language: en-usUA-CPU: x86Accept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (compatible…)Host: www.live.com
Response
ResponseHTTP/1.1 200 OKContent-Length: 3479Expires: -1Date: Sun, 14 Mar 2010 21:30:46 GMTContent-Type: text/html; charset=utf-8Pragma: no-cacheContent-Encoding: gzip
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
![Page 30: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/30.jpg)
Networking Optimizations Provide Cacheable Content
First RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com
First ResponseHTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 19 Mar 2010 00:00:00 GMTExpires: Fri, 19 Mar 2010 00:00:00 GMT
Second RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.com
No Response Required
![Page 31: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/31.jpg)
Networking Optimizations Conditional Requests
RequestGET /images/banner.jpg HTTP/1.1Host: www.microsoft.comIf-Modified-Since:
Sun, 14 Mar 2010 21:30:46 GMT
Response
ResponseHTTP/1.1 304 Not ModifiedContent-Type: image/jpegLast-Modified:
Sun, 14 Mar 2010 21:30:46 GMTIf-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT
Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT
![Page 32: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/32.jpg)
Networking Optimizations Minify Your JavaScript
function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; var i = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { var img = document.createElement('img'); img.setAttribute("name", "rotatingimage"); img.style.left = '5000px'; img.x3d = x; img.z3d = z; if (useBrowserLogos == true) { switch (c) { case 1: img.src = IEIMAGE; c ++; break; case 2: img.src = LOGO2; c ++; break; case 3: img.src = LOGO1; c ++; break; case 4: img.src = LOGO4; c ++; break; case 5: img.src = LOGO3; c = 1; break; } } else { img.src = IMAGE; } board.appendChild(img); images.push(img); } } countimages.innerHTML = images.length; }
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('y v(){a=[];b.e=\'\';9 c=1;9 i=D/2-.5;d(9 x=-i;x<=i;x++){d(9 z=-i;z<=i;z++){9 0=l.H(\'0\');0.o("n","p");0.q.s=\'r\';0.m=x;0.f=z;g(h==k){j(c){8 1:0.6=t;c++;7;8 2:0.6=F;c++;7;8 3:0.6=G;c++;7;8 4:0.6=J;c++;7;8 5:0.6=w;c=1;7}}C{0.6=I}b.B(0);a.A(0)}}E.e=a.u}')
Original JavaScript Minified JavaScript
![Page 33: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/33.jpg)
Networking Optimizations Don’t Scale Images
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensions: 500 x 400 --><img src=“logo.gif" width="50" height="40" />…
</body></html>
width="50" height="40"500 x 400
![Page 34: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/34.jpg)
Networking Optimizations Don’t Scale Images
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensions: 50 x 40 --><img src=“logo.gif" width="50" height="40" />…
</body></html>
width="50" height="40"
50 x 40
![Page 35: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/35.jpg)
Networking Optimizations Use Image Sprites
<html><head>
<title>Test</title></head><body>
…<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6…
</body></html>
<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6
![Page 36: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/36.jpg)
Networking Optimizations Use Image Sprites
![Page 37: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/37.jpg)
Networking Optimizations Use Image Sprites
<head><title>Test</title><style type="text/css">
.a, .b { width: 10; height: 10 }
.a, .b { background-image: "abc.gif" }
.a { background-position: 0 0 }
.b { background-position: 0 -10 }</style>
</head><body>
…<div class="a"></div> Item 1<div class="b"></div> Item 2…
</body>
<div class="a"></div><div class="b"></div>
.a, .b { width: 10; height: 10 }
.a, .b { background-image: "abc.gif" }
.a { background-position: 0 0 }
.b { background-position: 0 -10 }
![Page 38: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/38.jpg)
Internet Explorer 9 Network ToolsUnderstand and Improve Your Networking Performance
![Page 39: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/39.jpg)
39
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 40: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/40.jpg)
HTML OptimizationsAvoid Inline JavaScript
<html><head>
<title>Test</title><script type="text/javascript"> <!-- function helloWorld() { alert('Hello World!') ; } // -->
</script></head><body>
…</body>
</html>
<script type="text/javascript"> <!-- function helloWorld() { alert('Hello World!') ; } // --></script>
![Page 41: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/41.jpg)
HTML Parsing OptimizationsAvoid Linking JavaScript in Head
<html><head>
<title>Test</title><script src=“myscript.js” … ></script>
</head><body>
…</body>
</html>
<script src=“myscript.js” … ></script>
![Page 42: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/42.jpg)
<html><head>
<title>Test</title></head><body>
………
</body></html>
<script src=“myscript.js” … ></script>
HTML Parsing OptimizationsLink JavaScript at End of File
![Page 43: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/43.jpg)
HTML Parsing OptimizationsBut if you must, use the defer tag.
<html><head>
<title>Test</title><script src=“myscript.js” … ></script>
</head><body>
…</body>
</html>
defer="defer">
![Page 44: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/44.jpg)
44
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 45: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/45.jpg)
CSS Parsing Optimizations Avoid Embedded Styles
<html><head>
<title>Test</title></head><body>
<style> <!--
.green { color:#009900;}
.red { color:#660000;} --></style>
… … …
</body></html>
<style> <!-- .green { color:#009900;} .red { color:#660000;} --></style>
![Page 46: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/46.jpg)
CSS Parsing Optimizations Avoid Linking Stylesheets at Bottom of Page
<html><head>
<title>Test</title></head><body>
……
…</body>
</html>
<link rel="stylesheet" type="text/css" href=“mystyles.css" />
![Page 47: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/47.jpg)
CSS Parsing Optimizations Link Stylesheets at Top of Page
<html><head>
<title>Test</title>
</head><body>
………
</body></html>
<link rel="stylesheet" type="text/css"href="class.css" />
![Page 48: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/48.jpg)
CSS Parsing Optimizations Avoid Using @Import for Hierarchical Styles
@import url(/stylesheets/one.css);@import url(/stylesheets/two.css);
.MyHeading{
color: red; font-family: 'New Century Schoolbook', serif;background: white;
}
@import url(/stylesheets/one.css); @import url(/stylesheets/two.css);
![Page 49: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/49.jpg)
CSS Parsing Optimizations Use Multiple Stylesheets for Hierarchical Styles
<html><head>
<title>Test</title>
</head><body>
………
</body></html>
<link rel="stylesheet" type="text/css" href=“one.css" /><link rel="stylesheet" type="text/css" href=“two.css" /><link rel="stylesheet" type="text/css" href=“three.css" />
![Page 50: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/50.jpg)
50
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 51: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/51.jpg)
51
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 52: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/52.jpg)
JavaScript OptimizationsMinimize Symbol Resolution
Global
Local
Intermediate
Scopes
DOM
Instance
PrototypeChainCost
var foo obj.foo
![Page 53: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/53.jpg)
JavaScript Optimizations Minimize Symbol Resolution
function WorkOnLocalVariable(){
localVariable = 5;return ( localVariable + 1 );
}
localVariablelocalVariable
![Page 54: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/54.jpg)
JavaScript Optimizations Minimize Symbol Resolution
function WorkOnLocalVariable2(){
var localVariable = 5;return ( localVariable + 1 );
}
var localVariablelocalVariabl
e
![Page 55: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/55.jpg)
JavaScript Optimizations Minimize Symbol Resolution: Functions
function IterateWorkOverCollection(){
var length = myCollection.length;
for(var i = 0; i < length; i++){
Work(myCollection[i]);}
}
Work
![Page 56: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/56.jpg)
JavaScript Optimizations Minimize Symbol Resolution: Functions
function IterateWorkOverCollection2(){
var funcWork = Work;var length = myCollection.length;
for(var i = 0; i < length; i++){
funcWork(myCollection[i]);}
}
var funcWork = Work;
funcWork
![Page 57: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/57.jpg)
JavaScript Optimizations Use Native JSON Methods
var jsObjStringParsed = JSON.parse(jsObjString);
var jsObjStringBack = JSON.stringify(jsObjStringParsed);
JSON.parse
JSON.stringify
![Page 58: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/58.jpg)
<html><head>
<title>Test</title></head><body>
………<script src=“myscript.js” … ></script> <script src=“navigation.js” … ></script><script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>
</body></html>
JavaScript OptimizationsRemove Duplicate Script Files
<script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>
![Page 59: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/59.jpg)
<html><head>
<title>Test</title></head><body>
……<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>
JavaScript OptimizationsRemove Duplicate Script Files
<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>
![Page 60: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/60.jpg)
60
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 61: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/61.jpg)
Trident (MSHTML)
JScript Engine
Marshalling OptimizationsMinimize DOM Interaction
DOM
![Page 62: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/62.jpg)
Marshalling OptimizationsMinimize DOM Interaction
function CalculateSum(){
// Retrieve Valuesvar lSide = document.body.all.lSide.value;
var rSide = document.body.all.rSide.value;
// Generate Resultdocument.body.all.result.value = lSide + rSide;
}
document.body.alldocument.body.all
document.body.all 9 DOM Lookups
![Page 63: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/63.jpg)
Optimizing Symbol ResolutionMinimize DOM Interaction
function CalculateSum2(){
// Cache Element Collectionvar elms = document.body.all;
// Retrieve Valuesvar lSide = elms.lSide.value;var rSide = elms.rSide.value;
// Generate Resultelms.result.value = lSide + rSide;
}
var elms = document.body.all;
elmselms
elms
3 DOM Lookups
![Page 64: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/64.jpg)
64
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 65: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/65.jpg)
DOM Optimizations Built In Methods Always More Efficient
function LoopChildren(elm) {
var nodes = elm.childNodes;var length = nodes.length;
for(var i = 0; i < length; i++){
var node = nodes[i];…
} }
nodes[i];
![Page 66: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/66.jpg)
JavaScript Coding Inefficiencies Built In Methods Always More Efficient
function LoopChildren2(elm) {
var node = elm.firstChild;
while(node != null){
…node = node.nextSibling;
}}
node.nextSibling;
![Page 67: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/67.jpg)
JavaScript Coding InefficienciesUse Selector API for Efficent Access of Collections
function doValidation2(){
// Retrieve the required elements by using Selectors // Selects all form fields with 'required' classes var reqs = document.querySelectorAll(".required"); // Set the flag to false by default var missingRequiredField = false;
// Validate that the form data is not empty for (var i = 0; i < reqs.length; i++) {
if (reqs[i].value == "")missingRequiredField = true;
} }
document.querySelectorAll
![Page 68: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/68.jpg)
68
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 69: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/69.jpg)
Formatting OptimizationsOnly Send Required Styles
/* These styles are for the home page. */.Homepage{
color: red; background: white;
} …
/* These styles are for the content page. */.Contentpage{
color: red; background: white;
}
/* These styles are for the home page. */
/* These styles are for the content page. */
![Page 70: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/70.jpg)
CSS PerformanceSimplify selectors
• Complex element selectors are slow• When possible• Use class – or ID-based selectors• Make element selectors as simple as possible• Use child instead of descendent selectors
![Page 71: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/71.jpg)
CSS PerformanceSimplify Selector Patterns: Avoid Descendent Selectors
table tr td ul li {color: green;}
li#myID {color: green;}
ul li {color: purple;}
ul > li {color: purple;}
Use Class or ID Selectors
Use Child Selectors
![Page 72: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/72.jpg)
72
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Browser Subsystems
![Page 73: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/73.jpg)
Layout OptimizationsBatch Visual Changes
function BuildUI(){
var elm = document.getElementById('ui');
// Clear existing contentselm.innerHTML = '';
// Generate UIelm.innerHTML += BuildTitle();elm.innerHTML += BuildBody();elm.innerHTML += BuildFooter();
}
+=+=+=
=7
innerHTMLReferences
3 Visual Changes
![Page 74: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/74.jpg)
Layout Optimizations Batch Visual Changes
function BuildUI2(){
var elm = document.getElementById('ui');
// Generate UIvar contents = BuildTitle() + BuildBody() + BuildFooter();
// Replace existing contents with UIelm.innerHTML = contents;
}=
1 innerHTMLReference
1 VisualUpdate
![Page 75: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/75.jpg)
75
20 Best Practices to Improve Performance
1) Compress File Downloads2) User Conditional Requests3) Provide Cacheable Content4) Minify Your JavaScript5) Don’t Scale Images6) Use Image Sprites7) Link JavaScript at Bottom8) Add defer tag to JavaScript9) Link Stylesheets at Top10)Avoid Using @import
11)Minimize Walking Lookup Chain
12)Cache Function Pointers13)Use Native JSON Object14)Remove Duplicate Script15)Minimize DOM Interactions16)Use Efficient DOM Methods17)Use querySelectorAll for
Groups18)Only Send Required Styles19)Simplify Selectors20)Minimize Page Layouts
![Page 76: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/76.jpg)
76
Internet Explorer 8 Subsystem Distribution
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
0
500,000
1,000,000
1,500,000
2,000,000
2,500,000
3,000,000
3,500,000
4,000,000
HTML parsing CSS parser Collections JavaScript Marshalling Native OMFormatting BlockBuild Layout Rendering
Mill
isec
onds
![Page 77: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/77.jpg)
Section #2: Preview of Internet Explorer 9 Performance
![Page 78: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/78.jpg)
78
Net
wor
kin
g
HTM
L
CSS
Colle
ctio
ns
Java
Scri
pt
Mar
shal
ling DO
M
Form
atti
ng
Bloc
k Bu
ildin
g
Layo
ut
Rend
erin
g
Hardware Accelerated HTML5
Compiled JavaScript
GPU PoweredHTML5 Graphics
![Page 79: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/79.jpg)
Demo Flying Logos
![Page 80: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/80.jpg)
GPU Powered HTML5
![Page 81: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/81.jpg)
81
The Gamers GPU
![Page 82: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/82.jpg)
82
Everyone Has a GPU
![Page 83: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/83.jpg)
83
Windows Experience Index Results - GPU
1 2 3 4 5 6 7 8Windows Experience Index
Graphics Scores of Vista and Win7 Users
4% 15% 32% 27% 12% 10%
![Page 84: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/84.jpg)
84
GPU Processing Performance
Multi-Core CPU GPU
![Page 85: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/85.jpg)
Compiled JavaScript
![Page 86: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/86.jpg)
Interpreters, Compilers, Intermediary Languages, Machine Code, Stack Alignment, JIT, Type System, Registers, Memory Management, Assembly, Bytecode, Tracing, Syntax Trees, Dynamic Languages, Flow Analysis, Static Languages, Regular Expressions, Inlining, oh my…
![Page 87: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/87.jpg)
87
Foreground
New JavaScript Engine Interpreter(Chakra)
Source Code Parser AST InterpreterByteCode
![Page 88: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/88.jpg)
88
Multi-Core Processing
Multi-Core CPU
![Page 89: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/89.jpg)
89
Internet Explorer 8 Processor Distribution
Foreground
Background
![Page 90: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/90.jpg)
90
Windows Experience Index Results
Month CPU Count2/1/2010 2.3Windows Experience Index
Number of CPU Cores for Vista and Win7 Users
![Page 91: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/91.jpg)
91
Foreground
New JavaScript Engine Background Compiler(Chakra)
Source Code Parser AST InterpreterByteCode
Background Native Code
Background Compiler
![Page 92: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/92.jpg)
92
Internet Explorer 9 Background Compilation
Foreground
Background
![Page 93: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/93.jpg)
93
Putting It All Together• GPU Powered Graphics• Compiled JavaScript Applications
![Page 94: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/94.jpg)
94
Flying Images – One Animation
IE8
IE9
![Page 95: High-Performance Best Practices for Web Sites](https://reader035.fdocuments.in/reader035/viewer/2022070423/56816711550346895ddb7a54/html5/thumbnails/95.jpg)
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.