1. Building A Fast Web Experience Internet Explorer 9 Is All Around Fast Presenter Name Presenter Title

2. 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

3. Agenda Case Study - The Wall Street Journal The Browser Subsystems Deep Dive – Network and Caching Subsystem Deep Dive – JavaScript Engine Deep Dive – Hardware Accelerated HTML5 3

4. Example Scenario - The Wall Street Journal 4

5. Some Markup Has Been Retrieved 5

6. Content Starts To Render 6

7. Some Images Start To Appear 7

8. Mast Head Appears 8

9. Right Column Starts To Render 9

10. Personalized Content Starts To Appear 10

11. Advertisements Load 11

12. Done! 12

13. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling JavaScript Collections CSS HTML Networking

14. Picking Five Popular News Sites 14 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

15. 15 Five Popular News Sites JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

16. Variation in Total Size 16 Five Popular News Sites JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

17. Number Elements to Number of CSS Rules 17 Five Popular News Sites JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

18. Number of Images 18 Five Popular News Sites JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

19. Amount of JavaScript 19 Five Popular News Sites JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

20. Amount of JavaScript 20 Five Popular News Sites JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

21. 21 Which sites loads the fastest? JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

22. 22 Which sites loads the slowest? JQuery Prototype MooTools Scriptaculous Other (JS Lib) YUI

23. 23 Multi-System Performance

24. 24 Average Distribution Across 5 News Sites

25. Average Distribution Across Top AJAX Sites 25

26. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling JavaScript Collections CSS HTML Networking

27. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling JavaScript Collections CSS HTML Networking

28. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling JavaScript Collections CSS HTML Networking

29. Quick Caching Overview First Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com First Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 30 Sep 2011 00:00:00 GMT Second Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com No Response Required 29

31. Support: crazy-far-futures Expires headers

32. Support: Vary: Accept-Encoding

33. Support Vary: Host

34. Improved scavenger

35. Redirect caching

36. Back/forward optimization

38. Speculatively pre-open additional connection

40. Pre-fetch based on likely matches in ULV flyout

41. Pre-fetch addresses based on previous use

43. Gracefully handle codepage restarts

44. Autoproxy in the frame

45. Imgsrc=”” shouldn’t send a request

46. Issue requests on the wire earlier

47. Only download requires files (fonts)30

48. Network Optimizations Best Practices

49. 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++) { varimg = 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 Minified 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=apos;apos;;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(apos;0apos;);0.o("n","p");0.q.s=apos;rapos;;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}')

50. 33 <html> <head> <title>Test</title> </head> <body> … <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6 … </body> </html> Reduce Network Connections <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6

51. Reduce Network Connections Use Image Sprites 34

52. 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 .a, .b { width: 10; height: 10 } .a, .b { background-image: "abc.gif" } .a { background-position: 0 0 } .b { background-position: 0 -10 } <div class="a"></div> <div class="b"></div>

53. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling JavaScript Collections CSS HTML Networking

54. The JavaScript Engine 37 Foreground Source Code Parser AST Interpreter ByteCode

55. Foreground Source Code Parser AST Interpreter ByteCode New JavaScript Engine – “Chakra” 38 Background Compiler Native Code Background Compiled JavaScript In The Background Using Multiple Cores

56. WebKitSunSpider JavaScript Benchmark Results Version 0.9.1, Results Generated September 4th, 2010 39

57. Better performance, with the same markup! New JavaScript Engine – “Chakra” Foreground Source Code Parser AST Interpreter ByteCode Background Compiler Native Code Background Compiled JavaScript In The Background Using Multiple Cores 40

58. JavaScript Best Practices

59. Minimize Symbol Resolution var foo obj.foo Global DOM Intermediate Scopes Prototype Chain Cost Local Instance 42

60. 43 function WorkOnLocalVariable() { localVariable = 5; return ( localVariable + 1 ); } Minimize Symbol Resolution localVariable localVariable

61. 44 function WorkOnLocalVariable2() { varlocalVariable = 5; return ( localVariable + 1 ); } Minimize Symbol Resolution varlocalVariable localVariable

62. 45 function IterateWorkOverCollection2() { varfuncWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork(myCollection[i]); } } Minimize Symbol Resolution varfuncWork = Work; funcWork

63. 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>

64. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling JavaScript Collections CSS HTML Networking

65. Using The Full Power Of Your PC 48

66. Everyone Has a GPU 49

67. 1 2 3 4 5 6 7 8 Windows Experience Index Results - GPU 50 15% 32% 27% 10% 4% 12% Windows Experience Index Graphics Scores of Vista and Win7 Users

68. Understanding GPU Acceleration 51 Better performance, with the same markup! Images & video are downloaded, decoded & transferred into intermediate GPU buffers Complex page elements (incl. canvas & SVG) are drawn into intermediate GPU buffers Simple page elements are drawn directly to Web page buffer Intermediate GPU buffers are composited with directly-drawn content to form the visible Web page Windows Desktop Windows Manager composes the final screen 1 2 3 4 5 Content Rendering Page Composition Desktop Composition

69. Full vs. Partial Acceleration Internet Explorer 9 provides full hardware acceleration 52

70. Building Better Experiences With The GPU Don’t be afraid of high resolution images Use the GPU to scale and resize images Use lots of alpha to create beautiful compositions 53

71. Layout & Rendering Best Practices

72. Encoding Video 55

73. 56 Using Script To Determine If A Video Code Is Supported try { 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

74. 57 function BuildUI() { var elm = document.getElementById('ui'); // Clear existing contents elm.innerHTML = ''; // Generate UI elm.innerHTML += BuildTitle(); elm.innerHTML += BuildBody(); elm.innerHTML += BuildFooter(); } Batch Visual Changes 7 innerHTML References = 3 Visual Changes += += +=

75. 58 function BuildUI2() { var elm = document.getElementById('ui'); // Generate UI var contents = BuildTitle() + BuildBody() + BuildFooter(); // Replace existing contents with UI elm.innerHTML = contents; } Batch Visual Changes 1 innerHTML Reference = 1 Visual Update

76. Internet Explorer 9 59 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.

77. Internet Explorer 9 Beta: Now Available 60 Migrate your applications off Internet Explorer 6 Develop for standards first! Download and install the Internet Explorer 9 Beta and test your site! Learn more at… http://msdn.com/ie 60

78. Questions