Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building A Fast Web Experience<br />Internet Explorer 9 Is All Around Fast<br />Presenter Name<br />Presenter Title<br />
Expectations are Rising for the Web<br />The capabilities of the web are increasing every day, but the way we experience t...
Agenda<br />Case Study - The Wall Street Journal<br />The Browser Subsystems<br />Deep Dive – Network and Caching Subsyste...
Example Scenario - The Wall Street Journal<br />4<br />
Some Markup Has Been Retrieved<br />5<br />
Content Starts To Render<br />6<br />
Some Images Start To Appear<br />7<br />
Mast Head Appears<br />8<br />
Right Column Starts To Render<br />9<br />
Personalized Content Starts To Appear<br />10<br />
Advertisements Load<br />11<br />
Done!<br />12<br />
Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScrip...
Picking Five Popular News Sites<br />14<br />Wall Street Journal<br />Chicago Tribune<br />USA Today<br />New York Times<b...
15<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<b...
Variation in Total Size<br />16<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<b...
Number Elements to Number of CSS Rules<br />17<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />...
Number of Images<br />18<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Oth...
Amount of JavaScript<br />19<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br /...
Amount of JavaScript<br />20<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br /...
21<br />Which sites loads the fastest?<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br ...
22<br />Which sites loads the slowest?<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br ...
23<br />Multi-System Performance<br />
24<br />Average Distribution Across 5 News Sites<br />
Average Distribution Across Top AJAX Sites<br />25<br />
Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScrip...
Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScrip...
Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScrip...
Quick Caching Overview<br />First Request<br />GET /images/banner.jpg HTTP/1.1<br />Host: www.microsoft.com<br />First Res...
Better performance, with the same markup!<br />Caching Improvements<br />HTTP Caching Improvements<br /><ul><li>Improve he...
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</li></ul>Parallel Connection Improvements<br /><ul><li>Increase connections-per...
Speculatively pre-open additional connection
Improved LCIE connection limiting</li></ul>DNS Improvements<br /><ul><li>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</li></ul>General Improvements<br /><ul><li>Shorter User Agent String
Gracefully handle codepage restarts
Autoproxy in the frame
Imgsrc=”” shouldn’t send a request
Issue requests on the wire earlier
Only download requires files (fonts)</li></ul>30<br />
Network Optimizations<br />Best Practices<br />
32<br />function CreateBoard() {<br />            images = [];<br />board.innerHTML = '';<br />var c = 1;<br />var i = cou...
33<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br /><imgsrc="a.gif" />  Item 1<br /><...
Reduce Network Connections<br />Use Image Sprites<br />34<br />
35<br /><head><br /> <title>Test</title><br />  <style type="text/css"><br />    .a, .b { width: 10; height: 10 }<br />   ...
Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScrip...
The JavaScript Engine<br />37<br />Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />
Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />New JavaScript Engine – “Chakra”<br /...
WebKitSunSpider JavaScript Benchmark Results<br />Version 0.9.1, Results Generated September 4th, 2010<br />39<br />
Better performance, with the same markup!<br />New JavaScript Engine – “Chakra”<br />Foreground<br />Source Code<br />Pars...
JavaScript<br />Best Practices<br />
Minimize Symbol Resolution<br />var foo<br />obj.foo<br />Global<br />DOM<br />Intermediate Scopes<br />Prototype Chain<br...
43<br />function WorkOnLocalVariable()<br />{<br />localVariable = 5;<br />return ( localVariable + 1 );<br />}<br />Minim...
44<br />function WorkOnLocalVariable2()<br />{<br />varlocalVariable = 5;<br />return ( localVariable + 1 );<br />}<br />M...
45<br />function IterateWorkOverCollection2()<br />{<br />varfuncWork = Work;<br />var length = myCollection.length;<br />...
Upcoming SlideShare
Loading in …5
×

Building a fast web experience [beta]

881 views

Published on

  • Be the first to comment

Building a fast web experience [beta]

  1. 1. Building A Fast Web Experience<br />Internet Explorer 9 Is All Around Fast<br />Presenter Name<br />Presenter Title<br />
  2. 2. Expectations are Rising for the Web<br />The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.<br />2<br />
  3. 3. Agenda<br />Case Study - The Wall Street Journal<br />The Browser Subsystems<br />Deep Dive – Network and Caching Subsystem<br />Deep Dive – JavaScript Engine<br />Deep Dive – Hardware Accelerated HTML5<br />3<br />
  4. 4. Example Scenario - The Wall Street Journal<br />4<br />
  5. 5. Some Markup Has Been Retrieved<br />5<br />
  6. 6. Content Starts To Render<br />6<br />
  7. 7. Some Images Start To Appear<br />7<br />
  8. 8. Mast Head Appears<br />8<br />
  9. 9. Right Column Starts To Render<br />9<br />
  10. 10. Personalized Content Starts To Appear<br />10<br />
  11. 11. Advertisements Load<br />11<br />
  12. 12. Done!<br />12<br />
  13. 13. Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScript<br />Collections<br />CSS<br />HTML<br />Networking<br />
  14. 14. Picking Five Popular News Sites<br />14<br />Wall Street Journal<br />Chicago Tribune<br />USA Today<br />New York Times<br />Washington Post<br />CNN News<br />Seattle Times<br />MSN News<br />Financial Times<br />Boston Globe<br />News Site #1<br />News Site #2<br />News Site #3<br />News Site #4<br />News Site #5<br />
  15. 15. 15<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  16. 16. Variation in Total Size<br />16<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  17. 17. Number Elements to Number of CSS Rules<br />17<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  18. 18. Number of Images<br />18<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  19. 19. Amount of JavaScript<br />19<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  20. 20. Amount of JavaScript<br />20<br />Five Popular News Sites<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  21. 21. 21<br />Which sites loads the fastest?<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  22. 22. 22<br />Which sites loads the slowest?<br />JQuery<br />Prototype<br />MooTools<br />Scriptaculous<br />Other (JS Lib)<br />YUI<br />
  23. 23. 23<br />Multi-System Performance<br />
  24. 24. 24<br />Average Distribution Across 5 News Sites<br />
  25. 25. Average Distribution Across Top AJAX Sites<br />25<br />
  26. 26. Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScript<br />Collections<br />CSS<br />HTML<br />Networking<br />
  27. 27. Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScript<br />Collections<br />CSS<br />HTML<br />Networking<br />
  28. 28. Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScript<br />Collections<br />CSS<br />HTML<br />Networking<br />
  29. 29. Quick Caching Overview<br />First Request<br />GET /images/banner.jpg HTTP/1.1<br />Host: www.microsoft.com<br />First Response<br />HTTP/1.1 200 OK<br />Content-Type: image/jpeg<br />Expires: Fri, 30 Sep 2011 00:00:00 GMT<br />Second Request<br />GET /images/banner.jpg HTTP/1.1<br />Host: www.microsoft.com<br />No Response Required<br />29<br />
  30. 30. Better performance, with the same markup!<br />Caching Improvements<br />HTTP Caching Improvements<br /><ul><li>Improve heuristic expiration
  31. 31. Support: crazy-far-futures Expires headers
  32. 32. Support: Vary: Accept-Encoding
  33. 33. Support Vary: Host
  34. 34. Improved scavenger
  35. 35. Redirect caching
  36. 36. Back/forward optimization
  37. 37. Cross-domain HTTPS revalidation mitigation</li></ul>Parallel Connection Improvements<br /><ul><li>Increase connections-per-proxy to 12
  38. 38. Speculatively pre-open additional connection
  39. 39. Improved LCIE connection limiting</li></ul>DNS Improvements<br /><ul><li>Pre-fetch based on Link Rel=Prefetch
  40. 40. Pre-fetch based on likely matches in ULV flyout
  41. 41. Pre-fetch addresses based on previous use
  42. 42. Fast-path for IP literals</li></ul>General Improvements<br /><ul><li>Shorter User Agent String
  43. 43. Gracefully handle codepage restarts
  44. 44. Autoproxy in the frame
  45. 45. Imgsrc=”” shouldn’t send a request
  46. 46. Issue requests on the wire earlier
  47. 47. Only download requires files (fonts)</li></ul>30<br />
  48. 48. Network Optimizations<br />Best Practices<br />
  49. 49. 32<br />function CreateBoard() {<br /> images = [];<br />board.innerHTML = '';<br />var c = 1;<br />var i = count / 2 - .5;<br /> for (var x = -i; x <= i; x++)<br /> {<br /> for (var z = -i; z <= i; z++)<br /> {<br />varimg = document.createElement('img');<br />img.setAttribute("name", "rotatingimage");<br />img.style.left = '5000px';<br /> img.x3d = x;<br /> img.z3d = z;<br /> if (useBrowserLogos == true)<br /> {<br /> switch (c)<br /> {<br /> case 1:<br />img.src = IEIMAGE;<br /> c ++;<br /> break;<br /> case 2:<br />img.src = LOGO2;<br /> c ++;<br /> break;<br /> case 3:<br />img.src = LOGO1;<br /> c ++;<br /> break;<br /> case 4:<br />img.src = LOGO4;<br /> c ++;<br /> break; <br /> case 5:<br />img.src = LOGO3;<br /> c = 1;<br /> break;<br /> }<br /> }<br /> else<br /> {<br />img.src = IMAGE;<br /> }<br />board.appendChild(img);<br />images.push(img);<br /> }<br /> }<br />countimages.innerHTML = images.length;<br />}<br />Minify Your JavaScript<br />Minified JavaScript<br />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}')<br />
  50. 50. 33<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br /><imgsrc="a.gif" /> Item 1<br /><imgsrc="b.gif" /> Item 2<br /><imgsrc=“c.gif" /> Item 3<br /><imgsrc=“d.gif" /> Item 4<br /><imgsrc=“e.gif" /> Item 5<br /><imgsrc=“f.gif" /> Item 6<br />…<br /></body><br /></html><br />Reduce Network Connections<br /><imgsrc="a.gif" /> Item 1<br /><imgsrc="b.gif" /> Item 2<br /><imgsrc=“c.gif" /> Item 3<br /><imgsrc=“d.gif" /> Item 4<br /><imgsrc=“e.gif" /> Item 5<br /><imgsrc=“f.gif" /> Item 6<br />
  51. 51. Reduce Network Connections<br />Use Image Sprites<br />34<br />
  52. 52. 35<br /><head><br /> <title>Test</title><br /> <style type="text/css"><br /> .a, .b { width: 10; height: 10 }<br /> .a, .b { background-image: "abc.gif" }<br /> .a { background-position: 0 0 }<br /> .b { background-position: 0 -10 }<br /> </style><br /></head><br /><body><br /> …<br /> <div class="a"></div> Item 1<br /> <div class="b"></div> Item 2<br /> …<br /></body><br />Reduce Network Connections<br />.a, .b { width: 10; height: 10 }<br />.a, .b { background-image: "abc.gif" }<br />.a { background-position: 0 0 }<br />.b { background-position: 0 -10 }<br /><div class="a"></div><br /><div class="b"></div><br />
  53. 53. Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScript<br />Collections<br />CSS<br />HTML<br />Networking<br />
  54. 54. The JavaScript Engine<br />37<br />Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />
  55. 55. Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />New JavaScript Engine – “Chakra”<br />38<br />Background Compiler<br />Native Code<br />Background<br />Compiled JavaScript<br />In The Background<br />Using Multiple Cores<br />
  56. 56. WebKitSunSpider JavaScript Benchmark Results<br />Version 0.9.1, Results Generated September 4th, 2010<br />39<br />
  57. 57. Better performance, with the same markup!<br />New JavaScript Engine – “Chakra”<br />Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />Background Compiler<br />Native Code<br />Background<br />Compiled JavaScript<br />In The Background<br />Using Multiple Cores<br />40<br />
  58. 58. JavaScript<br />Best Practices<br />
  59. 59. Minimize Symbol Resolution<br />var foo<br />obj.foo<br />Global<br />DOM<br />Intermediate Scopes<br />Prototype Chain<br />Cost<br />Local<br />Instance<br />42<br />
  60. 60. 43<br />function WorkOnLocalVariable()<br />{<br />localVariable = 5;<br />return ( localVariable + 1 );<br />}<br />Minimize Symbol Resolution<br />localVariable<br />localVariable<br />
  61. 61. 44<br />function WorkOnLocalVariable2()<br />{<br />varlocalVariable = 5;<br />return ( localVariable + 1 );<br />}<br />Minimize Symbol Resolution<br />varlocalVariable<br />localVariable<br />
  62. 62. 45<br />function IterateWorkOverCollection2()<br />{<br />varfuncWork = Work;<br />var length = myCollection.length;<br />for(var i = 0; i < length; i++)<br />{<br />funcWork(myCollection[i]);<br />}<br />}<br />Minimize Symbol Resolution<br />varfuncWork = Work;<br />funcWork<br />
  63. 63. 46<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br /><script src=“jquery.js” … ></script><br /><script src=“prototype.js” … ></script><br /><script src=“dojo.js” … ></script><br /><script src=“animater.js” … ></script><br /><script src=“extjs.js” … ></script><br /><script src=“yahooui.js” … ></script><br /><script src=“mochikit.js” … ></script><br /><script src=“lightbox.js” … ></script><br /><script src=“jslibs.js” … ></script><br /><script src=“yahooui.js” … ></script><br />Reduce and Remove Duplicate Scripts<br /><script src=“yahooui.js” … ></script><br /><script src=“yahooui.js” … ></script><br />
  64. 64. Browser Subsystems<br />Rendering<br />Layout<br />Block Building<br />Formatting<br />DOM<br />Marshalling<br />JavaScript<br />Collections<br />CSS<br />HTML<br />Networking<br />
  65. 65. Using The Full Power Of Your PC<br />48<br />
  66. 66. Everyone Has a GPU<br />49<br />
  67. 67. 1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />Windows Experience Index Results - GPU<br />50<br />15%<br />32%<br />27%<br />10%<br />4%<br />12%<br />Windows Experience Index<br />Graphics Scores of Vista and Win7 Users<br />
  68. 68. Understanding GPU Acceleration<br />51<br />Better performance, with the same markup!<br />Images & video are downloaded, decoded & transferred into intermediate GPU buffers<br />Complex page elements (incl. canvas & SVG) are drawn into intermediate GPU buffers<br />Simple page elements are drawn directly to Web page buffer<br />Intermediate GPU buffers are composited with directly-drawn content to form the visible Web page<br />Windows Desktop Windows Manager composes the final screen<br />1<br />2<br />3<br />4<br />5<br />Content Rendering<br />Page Composition<br />Desktop Composition<br />
  69. 69. Full vs. Partial Acceleration<br />Internet Explorer 9 provides full hardware acceleration<br />52<br />
  70. 70. Building Better Experiences With The GPU<br />Don’t be afraid of high resolution images<br />Use the GPU to scale and resize images<br />Use lots of alpha to create beautiful compositions<br />53<br />
  71. 71. Layout & Rendering<br />Best Practices<br />
  72. 72. Encoding Video<br />55<br />
  73. 73. 56<br />Using Script To Determine If A Video Code Is Supported<br />try {<br />var v = document.createElement("video");<br /> if (v && v.canPlayType&& v.canPlayType("video/mp4").match(/^(probably|maybe)$/i)) <br />{<br />// Browser can likely play MPEG-4 video<br /> }<br /> else {<br />// Browser cannot play MPEG-4 video<br /> }<br />}<br />catch (e) {<br />// Exception when testing for MPEG-4 Playback<br />}<br />Providing Multiple Video Sources To Support Multiple Browsers<br /> <video id="myVideo"><br /> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><br /> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'><br /> <!-- Insert Silverlight or Flash Video Fallback Here --><br /> </video><br />Providing Video<br />
  74. 74. 57<br />function BuildUI()<br />{<br />var elm = document.getElementById('ui');<br />// Clear existing contents<br />elm.innerHTML = '';<br />// Generate UI<br />elm.innerHTML += BuildTitle();<br />elm.innerHTML += BuildBody();<br />elm.innerHTML += BuildFooter();<br />}<br />Batch Visual Changes<br />7 innerHTML<br />References<br />=<br />3 Visual Changes<br />+=<br />+=<br />+=<br />
  75. 75. 58<br />function BuildUI2()<br />{<br />var elm = document.getElementById('ui');<br />// Generate UI<br />var contents = BuildTitle()<br /> + BuildBody() <br /> + BuildFooter(); <br />// Replace existing contents with UI<br />elm.innerHTML = contents;<br />}<br />Batch Visual Changes<br />1 innerHTML<br />Reference<br />=<br />1 Visual<br />Update<br />
  76. 76. Internet Explorer 9<br />59<br />Network and Caching<br />Chakra, the new JavaScript Engine<br />Hardware Accelerated Graphics<br />Networking and caching improvements mean Internet Explorer 9 performs far fewer HTTP requests when navigating.<br />Chakra interprets, compiles, and executes code in parallel, taking advantage of multi-CPU cores through Windows and the computer’s hardware.<br />For Internet Explorer 9, rendering of graphics, text, and video has been moved from the CPU to the graphics card.<br />
  77. 77. Internet Explorer 9 Beta: Now Available<br />60<br />Migrate your applications off Internet Explorer 6<br />Develop for standards first!<br />Download and install the Internet Explorer 9 Beta<br />and test your site!<br />Learn more at…<br />http://msdn.com/ie<br />60<br />
  78. 78. Questions<br />

×