high-performance best practices for web sites jason weber, internet explorer team, microsoft
TRANSCRIPT
![Page 1: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/3.jpg)
I have a lot of content…
![Page 4: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/4.jpg)
Section #1: Best Practices for Improving Performance
![Page 5: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/5.jpg)
Example Scenario – Wall Street Journal
Starting with Bing
![Page 6: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/6.jpg)
Example Scenario – Wall Street Journal
Blank Background
![Page 7: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/7.jpg)
Example Scenario – Wall Street Journal
Initial HTML
![Page 8: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/8.jpg)
Example Scenario – Wall Street Journal
Heading Appears
![Page 9: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/9.jpg)
Example Scenario – Wall Street Journal
Initial Content
![Page 10: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/10.jpg)
Example Scenario – Wall Street Journal
Right Column Lays Out
![Page 11: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/11.jpg)
Example Scenario – Wall Street Journal
Media Appears
![Page 12: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/12.jpg)
Example Scenario – Wall Street Journal
Customized Content
![Page 13: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/13.jpg)
Example Scenario – Wall Street Journal
Advertisements
![Page 14: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/14.jpg)
Example Scenario – Wall Street Journal
Interacting with Website
![Page 15: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/15.jpg)
15
Picking Five Popular News Sites
Wall Street Journal
Chicago Tribune
USA Today
New York Times
Washington Post
CNN News
Seattle Times
MSN News
Financial Times
Boston Globe
News Site #1
News Site #2
News Site #3
News Site #4
News Site #5
![Page 16: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/16.jpg)
16
Five Popular News Sites
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/17.jpg)
17
Five Popular News SitesVariation in Total Size
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/18.jpg)
18
Five Popular News SitesNumber Elements to Number of CSS Rules
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/19.jpg)
19
Five Popular News SitesNumber of Images
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/20.jpg)
20
Five Popular News SitesAmount of JavaScript
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/21.jpg)
21
Five Popular News SitesAmount of JavaScript
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/22.jpg)
22
Which sites loads the fastest?
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/23.jpg)
23
Which sites loads the slowest?
TotalSize
NumberElement
s
CSS Rules
ImageFiles
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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 OM
Formatting BlockBuild Layout Rendering
Millisecon
ds
![Page 25: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/25.jpg)
25
Average Distribution Across 5 News Sites
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
![Page 26: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/26.jpg)
26
Average Distribution Across Top AJAX Sites
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
![Page 27: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/27.jpg)
27
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 28: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/28.jpg)
28
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 29: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/29.jpg)
Networking OptimizationsCompress Network Traffic
RequestGET / HTTP/1.1
Accept: */*
Accept-Language: en-us
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible…)
Host: www.live.com
Response
ResponseHTTP/1.1 200 OK
Content-Length: 3479
Expires: -1
Date: Sun, 14 Mar 2010 21:30:46 GMT
Content-Type: text/html; charset=utf-8
Pragma: no-cache
Content-Encoding: gzip
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
![Page 30: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/30.jpg)
Networking Optimizations Provide Cacheable Content
First RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
First ResponseHTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 19 Mar 2010 00:00:00 GMTExpires: Fri, 19 Mar 2010 00:00:00 GMT
Second RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
No Response Required
![Page 31: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/31.jpg)
Networking Optimizations Conditional Requests
RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
If-Modified-Since:
Sun, 14 Mar 2010 21:30:46 GMT
Response
ResponseHTTP/1.1 304 Not Modified
Content-Type: image/jpeg
Last-Modified:
Sun, 14 Mar 2010 21:30:46 GMT
If-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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/36.jpg)
Networking Optimizations Use Image Sprites
![Page 37: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/38.jpg)
Internet Explorer 9 Network ToolsUnderstand and Improve Your Networking Performance
![Page 39: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/39.jpg)
39
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 40: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/44.jpg)
44
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 45: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/50.jpg)
50
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 51: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/51.jpg)
51
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 52: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/60.jpg)
60
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 61: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/61.jpg)
Trident (MSHTML)
JScript Engine
Marshalling OptimizationsMinimize DOM Interaction
DOM
![Page 62: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/64.jpg)
64
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 65: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/68.jpg)
68
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 69: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/72.jpg)
72
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Browser Subsystems
![Page 73: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/75.jpg)
75
20 Best Practices to Improve Performance
1) Compress File Downloads
2) User Conditional Requests
3) Provide Cacheable Content
4) Minify Your JavaScript
5) Don’t Scale Images
6) Use Image Sprites
7) Link JavaScript at Bottom
8) Add defer tag to JavaScript
9) Link Stylesheets at Top
10)Avoid Using @import
11)Minimize Walking Lookup Chain
12)Cache Function Pointers
13)Use Native JSON Object
14)Remove Duplicate Script
15)Minimize DOM Interactions
16)Use Efficient DOM Methods
17)Use querySelectorAll for Groups
18)Only Send Required Styles
19)Simplify Selectors
20)Minimize Page Layouts
![Page 76: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 OM
Formatting BlockBuild Layout Rendering
Millisecon
ds
![Page 77: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/77.jpg)
Section #2:
Preview of Internet Explorer 9 Performance
![Page 78: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/78.jpg)
78
Netw
ork
ing
HTM
L
CSS
Collecti
on
s
JavaS
cri
pt
Mars
halli
ng
DO
M
Form
att
ing
Blo
ck
Bu
ild
ing
Layou
t
Ren
deri
ng
Hardware Accelerated HTML5
Compiled JavaScript
GPU PoweredHTML5 Graphics
![Page 79: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/79.jpg)
Demo Flying Logos
![Page 80: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/80.jpg)
GPU Powered HTML5
![Page 81: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/81.jpg)
81
The Gamers GPU
![Page 82: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/82.jpg)
82
Everyone Has a GPU
![Page 83: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/83.jpg)
83
Windows Experience Index Results - GPU
1 2 3 4 5 6 7 8
Windows Experience IndexGraphics Scores of Vista and Win7 Users
4% 15% 32% 27% 12% 10%
![Page 84: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/84.jpg)
84
GPU Processing Performance
Multi-Core CPU GPU
![Page 85: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/85.jpg)
Compiled JavaScript
![Page 86: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/88.jpg)
88
Multi-Core Processing
Multi-Core CPU
![Page 89: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/89.jpg)
89
Internet Explorer 8 Processor Distribution
Foreground
Background
![Page 90: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/90.jpg)
90
Windows Experience Index Results
Month CPU Count2/1/2010 2.3
Windows Experience IndexNumber of CPU Cores for Vista and Win7 Users
![Page 91: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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 Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/92.jpg)
92
Internet Explorer 9 Background Compilation
Foreground
Background
![Page 93: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/93.jpg)
93
Putting It All Together• GPU Powered Graphics• Compiled JavaScript Applications
![Page 94: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/html5/thumbnails/94.jpg)
94
Flying Images – One Animation
IE8
IE9
![Page 95: High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649d8d5503460f94a75118/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.