building a fast web experience [beta]
TRANSCRIPT
![Page 1: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/1.jpg)
Building A Fast Web ExperienceInternet Explorer 9 Is All Around FastPresenter NamePresenter Title
![Page 2: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/2.jpg)
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
![Page 3: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/3.jpg)
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
![Page 4: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/4.jpg)
Example Scenario - The Wall Street Journal4
![Page 5: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/5.jpg)
Some Markup Has Been Retrieved5
![Page 6: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/6.jpg)
Content Starts To Render6
![Page 7: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/7.jpg)
Some Images Start To Appear7
![Page 8: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/8.jpg)
Mast Head Appears8
![Page 9: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/9.jpg)
Right Column Starts To Render9
![Page 10: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/10.jpg)
Personalized Content Starts To Appear10
![Page 11: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/11.jpg)
Advertisements Load11
![Page 12: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/12.jpg)
Done!12
![Page 13: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/13.jpg)
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
![Page 14: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/14.jpg)
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
![Page 15: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/15.jpg)
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
![Page 16: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/16.jpg)
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
![Page 17: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/17.jpg)
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
![Page 18: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/18.jpg)
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
![Page 19: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/19.jpg)
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
![Page 20: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/20.jpg)
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
![Page 21: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/21.jpg)
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
![Page 22: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/22.jpg)
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
![Page 23: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/23.jpg)
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
![Page 24: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/24.jpg)
24
HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering
Average Distribution Across 5 News Sites
![Page 25: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/25.jpg)
25
Average Distribution Across Top AJAX Sites
HTML parsing
CSS parser
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuild
Layout
Rendering
![Page 26: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/26.jpg)
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
![Page 27: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/27.jpg)
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
![Page 28: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/28.jpg)
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
![Page 29: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/29.jpg)
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
![Page 30: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/30.jpg)
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)
![Page 31: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/31.jpg)
Network Optimizations
Best Practices
![Page 32: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/32.jpg)
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
![Page 33: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/33.jpg)
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
![Page 34: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/34.jpg)
Reduce Network Connections
Use Image Sprites
34
![Page 35: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/35.jpg)
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 }
![Page 36: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/36.jpg)
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
![Page 37: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/37.jpg)
37
The JavaScript Engine
Source Code Parser AST InterpreterByteCode
Foreground
![Page 38: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/38.jpg)
38
Source Code Parser AST InterpreterByteCode
Foreground
New JavaScript Engine – “Chakra”
BackgroundBackground
CompilerNative Code
Compiled JavaScript In The Background Using Multiple Cores
![Page 39: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/39.jpg)
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
![Page 40: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/40.jpg)
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
![Page 41: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/41.jpg)
JavaScript
Best Practices
![Page 42: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/42.jpg)
Minimize Symbol Resolution
42
var foo obj.foo
Global
Intermediate Scopes
Local
DOM
Prototype Chain
InstanceCost
![Page 43: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/43.jpg)
43
function WorkOnLocalVariable(){
localVariable = 5;return ( localVariable + 1 );
}
Minimize Symbol Resolution
localVariablelocalVariable
![Page 44: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/44.jpg)
44
function WorkOnLocalVariable2(){
var localVariable = 5;return ( localVariable + 1 );
}
Minimize Symbol Resolution
var localVariablelocalVariabl
e
![Page 45: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/45.jpg)
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
![Page 46: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/46.jpg)
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>
![Page 47: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/47.jpg)
Browser Subsystems
Collections
JavaScript
Marshalling
HTML
CSS
DOM
Layout
Formatting
Block Building
Rendering
Networking
![Page 48: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/48.jpg)
48
Using The Full Power Of Your PC
![Page 49: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/49.jpg)
49
Everyone Has a GPU
![Page 50: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/50.jpg)
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%
![Page 51: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/51.jpg)
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
![Page 52: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/52.jpg)
Full vs. Partial Acceleration
Internet Explorer 9 provides full hardware acceleration
52
![Page 53: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/53.jpg)
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
![Page 54: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/54.jpg)
Layout & Rendering
Best Practices
![Page 55: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/55.jpg)
Encoding Video
55
Content Type Recommended Bitrate
SD Content 350 kbps to 2000 kbps
HD Content 350 kbps to 3500 kbps
![Page 56: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/56.jpg)
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
![Page 57: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/57.jpg)
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
![Page 58: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/58.jpg)
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
![Page 59: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/59.jpg)
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.
![Page 60: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/60.jpg)
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
![Page 61: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/61.jpg)
Questions
![Page 62: Building a fast web experience [beta]](https://reader036.vdocument.in/reader036/viewer/2022062405/55529890b4c9051f108b4f9e/html5/thumbnails/62.jpg)
© 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.