1. Building A Fast Web Experience Internet Explorer 9 Is All Around Fast Sandeep J Alur Microsoft India

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

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 Collections JavaScript Marshalling HTML CSS DOM Layout Formatting Block Building Rendering 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 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 Five Popular News Sites JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

16. Variation in Total Size 16 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

17. Number Elements to Number of CSS Rules 17 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

18. Number of Images 18 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

19. Amount of JavaScript 19 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

20. Amount of JavaScript 20 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

21. 21 Which sites loads the fastest? Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

22. 22 Which sites loads the slowest? Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb866212931372114,216 News Site #2961kb820296444163,812 News Site #3300kb118713662649,481 News Site #41462kb4257893762111,988 News Site #52981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (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 Collections JavaScript Marshalling HTML CSS DOM Layout Formatting Block Building Rendering Networking

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

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

29. Quick Caching Overview 29 First Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com Second 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 No Response Required

30. 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)

31. Network Optimizations Best Practices

32. 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 35?String.fromCharCode(c+29):c.to String(36))};if(!''.replace(/^/,String)){whi le(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. 33 Test … Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 … Reduce Network Connections Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 Item 5 Item 5 Item 6 Item 6 Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 Item 5 Item 5 Item 6 Item 6

34. Reduce Network Connections Use Image Sprites 34

35. 35 Test.a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: 0 -10 } … Item 1 Item 2 … 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 }.a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: 0 -10 }

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

37. The JavaScript Engine 37 Source Code ParserASTInterpreterByteCode Foreground

38. Source Code ParserASTInterpreterByteCode Foreground New JavaScript Engine – “Chakra” 38 Background Background Compiler Native Code Compiled JavaScriptIn The BackgroundUsing Multiple Cores

39. WebKit SunSpider JavaScript Benchmark Results Version 0.9.1, Results Generated September 4 th, 2010 39

40. Better performance, with the same markup! New JavaScript Engine – “Chakra” Source Code ParserASTInterpreterByteCode Foreground 40 Background Background Compiler Native Code Compiled JavaScriptIn The BackgroundUsing Multiple Cores

41. JavaScript Best Practices

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

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

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

45. 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; funcWorkfuncWork

46. 46 Test … Reduce and Remove Duplicate Scripts

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

48. Using The Full Power Of Your PC 48

49. Everyone Has a GPU 49

50. 12345678 Windows Experience Index Results - GPU 50 Windows Experience Index Graphics Scores of Vista and Win7 Users 4% 15%32%27% 12% 10%

51. 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 4 Windows Desktop Windows Manager composes the final screen 5 Content RenderingPage CompositionDesktop Composition

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

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

54. Layout & Rendering Best Practices

55. Encoding Video 55

56. 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 Providing Video

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

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

59. Internet Explorer 9 59 Network and CachingChakra, the new JavaScript Engine Hardware Accelerated Graphics

60. 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! http://msdn.com/ie Learn more at… 60

61. Questions

62. © 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.