building a fast web experience [beta]
TRANSCRIPT
Building A Fast Web ExperienceInternet Explorer 9 Is All Around FastPresenter NamePresenter Title
Expectations are Rising for the Web
The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.
2
Agenda
3
Case Study - The Wall Street Journal
The Browser Subsystems
Deep Dive – Network and Caching Subsystem
Deep Dive – JavaScript Engine
Deep Dive – Hardware Accelerated HTML5
Example Scenario - The Wall Street Journal4
Some Markup Has Been Retrieved5
Content Starts To Render6
Some Images Start To Appear7
Mast Head Appears8
Right Column Starts To Render9
Personalized Content Starts To Appear10
Advertisements Load11
Done!12
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
14
Picking Five Popular News Sites
Wall Street JournalChicago Tribune
USA TodayNew York TimesWashington Post
CNN NewsSeattle Times
MSN NewsFinancial TimesBoston Globe
News Site #1News Site #2News Site #3News Site #4News Site #5
15
TotalSize
NumberElements CSS Rules Image
FilesScript 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
Five Popular News Sites
JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI
16
Variation in Total Size
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript 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
17
Number Elements to Number of CSS Rules
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript 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
18
Number of Images
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript 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
19
Amount of JavaScript
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript 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
20
Amount of JavaScript
Five Popular News Sites
TotalSize
NumberElements CSS Rules Image
FilesScript 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
21
Which sites loads the fastest?
TotalSize
NumberElements CSS Rules Image
FilesScript 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
22
Which sites loads the slowest?
TotalSize
NumberElements CSS Rules Image
FilesScript 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
23
News Site 1
News Site 2
News Site 3
News Site 4
News Site 5
0
500000
1000000
1500000
2000000
2500000
3000000
3500000
4000000HTML ParserCSS ParserCollectionsJavaScriptMarshallingNative OMFormattingBlock BuildingLayoutRendering
Tim
e Sp
ent P
er S
ubsy
stem
(ms)
Multi-System Performance
24
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
Average Distribution Across 5 News Sites
25
Average Distribution Across Top AJAX Sites
HTML parsing
CSS parser
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuild
Layout
Rendering
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
Quick Caching Overview
29
First Request
GET /images/banner.jpg HTTP/1.1Host: www.microsoft.com
Second Request
GET /images/banner.jpg HTTP/1.1Host: www.microsoft.com
First Response
HTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 30 Sep 2011 00:00:00 GMT
No Response Required
Better performance, with the same markup!Caching Improvements
30
HTTP Caching Improvements• Improve heuristic expiration• Support: crazy-far-futures Expires headers• Support: Vary: Accept-Encoding• Support Vary: Host• Improved scavenger• Redirect caching• Back/forward optimization• Cross-domain HTTPS revalidation
mitigation
Parallel Connection Improvements• Increase connections-per-proxy to 12• Speculatively pre-open additional
connection• Improved LCIE connection limiting
DNS Improvements• Pre-fetch based on Link Rel=Prefetch• Pre-fetch based on likely matches in ULV
flyout• Pre-fetch addresses based on previous use• Fast-path for IP literals
General Improvements• Shorter User Agent String• Gracefully handle codepage restarts• Autoproxy in the frame• Img src=”” shouldn’t send a request• Issue requests on the wire earlier• Only download requires files (fonts)
Network Optimizations
Best Practices
32
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; }
Minify Your JavaScript
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}')
Minified JavaScript
33
<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>
Reduce Network Connections
<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
Reduce Network Connections
Use Image Sprites
34
35
<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>
Reduce Network Connections
<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 }
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
37
The JavaScript Engine
Source Code Parser AST InterpreterByteCode
Foreground
38
Source Code Parser AST InterpreterByteCode
Foreground
New JavaScript Engine – “Chakra”
BackgroundBackground
CompilerNative Code
Compiled JavaScript In The Background Using Multiple Cores
39
WebKit SunSpider JavaScript Benchmark Results
Internet E
xplorer 8
IE9 PDC 2009 Demo
Firefox 3
.6.8
IE9 Platform
Preview 1
IE9 Platform
Preview 2
Firefox 4
.0 Pre-Release Beta2
IE9 Platform
Preview 3
Safar
i 5.0
IE9 Platform
Preview 4
IE9 Beta & Platf
orm Previe
w 5
Chrome 6 (6
.0.472.53)
Opera 10.6.1
Chrome 7 Nigh
tly (7
.0.503.0)0
5001000150020002500300035004000
Version 0.9.1, Results Generated September 4th, 2010
Better performance, with the same markup!New JavaScript Engine –
“Chakra”
Source Code Parser AST InterpreterByteCode
Foreground
40
BackgroundBackground
CompilerNative Code
Compiled JavaScript In The Background Using Multiple Cores
JavaScript
Best Practices
Minimize Symbol Resolution
42
var foo obj.foo
Global
Intermediate Scopes
Local
DOM
Prototype Chain
InstanceCost
43
function WorkOnLocalVariable(){
localVariable = 5;return ( localVariable + 1 );
}
Minimize Symbol Resolution
localVariablelocalVariable
44
function WorkOnLocalVariable2(){
var localVariable = 5;return ( localVariable + 1 );
}
Minimize Symbol Resolution
var localVariablelocalVariabl
e
45
function IterateWorkOverCollection2(){
var funcWork = Work;var length = myCollection.length;
for(var i = 0; i < length; i++){
funcWork(myCollection[i]);}
}
Minimize Symbol Resolution
var funcWork = Work;
funcWork
46
<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=“yahooui.js” … ></script>
Reduce and Remove Duplicate Scripts
<script src=“yahooui.js” … ></script>
<script src=“yahooui.js” … ></script>
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
48
Using The Full Power Of Your PC
49
Everyone Has a GPU
50
1 2 3 4 5 6 7 8
Windows Experience Index Results - GPU
Windows Experience IndexGraphics Scores of Vista and Win7 Users
4% 15% 32% 27% 12% 10%
Understanding GPU Acceleration
51
Better performance, with the same markup!
Images & video are downloaded, decoded & transferred into intermediate GPU buffers
1
Complex page elements (incl. canvas & SVG) are drawn into intermediate GPU buffers
2
Simple page elements are drawn directly to Web page buffer
3
Intermediate GPU buffers are composited with directly-drawn content to form the visible Web page
4Windows Desktop Windows Manager composes the final screen
5
Content Rendering Page Composition Desktop Composition
Full vs. Partial Acceleration
Internet Explorer 9 provides full hardware acceleration
52
Building Better Experiences With The GPU
53
Don’t be afraid of high resolution images
Use the GPU to scale and resize images
Use lots of alpha to create beautiful compositions
Layout & Rendering
Best Practices
Encoding Video
55
Content Type Recommended Bitrate
SD Content 350 kbps to 2000 kbps
HD Content 350 kbps to 3500 kbps
56
Using Script To Determine If A Video Code Is Supportedtry { var v = document.createElement("video"); if (v && v.canPlayType && v.canPlayType("video/mp4").match(/^(probably|maybe)$/i)) { // Browser can likely play MPEG-4 video } else { // Browser cannot play MPEG-4 video }}catch (e) { // Exception when testing for MPEG-4 Playback}
Providing Multiple Video Sources To Support Multiple Browsers <video id="myVideo"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <!-- Insert Silverlight or Flash Video Fallback Here --> </video>
Providing Video
57
function BuildUI(){
var elm = document.getElementById('ui');
// Clear existing contentselm.innerHTML = '';
// Generate UIelm.innerHTML += BuildTitle();elm.innerHTML += BuildBody();elm.innerHTML += BuildFooter();
}
Batch Visual Changes
+=+=+=
=
7 innerHTMLReference
s
3 Visual Changes
58
function BuildUI2(){
var elm = document.getElementById('ui');
// Generate UIvar contents = BuildTitle() + BuildBody() + BuildFooter();
// Replace existing contents with UIelm.innerHTML = contents;
}
Batch Visual Changes
=
1 innerHTMLReference
1 VisualUpdate
59
Internet Explorer 9
Network and Caching Chakra, the new JavaScript Engine
Hardware Accelerated Graphics
Networking and caching improvements
mean Internet Explorer 9 performs
far fewer HTTP requests when
navigating.
Chakra interprets, compiles, and executes code in
parallel, taking advantage of multi-CPU cores
through Windows and the computer’s hardware.
For Internet Explorer 9, rendering of
graphics, text, and video has been moved
from the CPU to the graphics card.
60
Internet Explorer 9 Beta: Now Available
Migrate your applications off
Internet Explorer 6
Develop for standards first!
Download and install the Internet
Explorer 9 Betaand test your site!
http://msdn.com/ieLearn more at…
60
Questions
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer 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.