1. High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft

2. Session Objectives 1)Best Practices to Improve Performance Inside look at browser performance Specific things that you can do today Principles behind the optimizations 2)Preview Internet Explorer 9 Performance Hardware Accelerated HTML5 GPU Powered Graphics Compiled JavaScript

3. I have a lot of content…

4. Section #1: Best Practices for Improving Performance

5. Example Scenario – Wall Street Journal Starting with Bing

6. Example Scenario – Wall Street Journal Blank Background

7. Example Scenario – Wall Street Journal Initial HTML

8. Example Scenario – Wall Street Journal Heading Appears

9. Example Scenario – Wall Street Journal Initial Content

10. Example Scenario – Wall Street Journal Right Column Lays Out

11. Example Scenario – Wall Street Journal Media Appears

12. Example Scenario – Wall Street Journal Customized Content

13. Example Scenario – Wall Street Journal Advertisements

14. Example Scenario – Wall Street Journal Interacting with Website

15. Picking Five Popular News Sites Wall Street Journal Chicago Tribune USA Today New York Times Washington Post CNN News Seattle Times MSN News Financial Times Boston Globe 15 News Site #1 News Site #2 News Site #3 News Site #4 News Site #5

16. Five Popular News Sites 16 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

17. Five Popular News Sites Variation in Total Size 17 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

18. Five Popular News Sites Number Elements to Number of CSS Rules 18 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

19. Five Popular News Sites Number of Images 19 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

20. Five Popular News Sites Amount of JavaScript 20 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

21. Five Popular News Sites Amount of JavaScript 21 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

22. Which sites loads the fastest? 22 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

23. Which sites loads the slowest? 23 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb866212931372114,216 News Site #2 961kb820296444163,812 News Site #3 300kb118713662649,481 News Site #4 1462kb4257893762111,988 News Site #5 2981kb35781917881920,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

24. Internet Explorer 8 Subsystem Distribution 24

25. Average Distribution Across 5 News Sites 25

26. Average Distribution Across Top AJAX Sites 26

27. 27 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

28. 28 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

29. Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible…) Host: www.live.com Response HTTP/1.1 200 OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2010 21:30:46 GMT Content-Type: text/html; charset=utf-8 Pragma: no-cache Content-Encoding: gzip Accept-Encoding: gzip, deflate Content-Encoding: gzip

30. 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, 19 Mar 2010 00:00:00 GMT Second Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com No Response Required

31. Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com If-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT Response HTTP/1.1 304 Not Modified Content-Type: image/jpeg Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT If-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT If-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT

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; } e=function(c){return(c 35?String.fromChar Code(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}') Original JavaScriptMinified JavaScript

33. Test … … width="50" height="40" 500 x 400

34. Test … … width="50" height="40" 50 x 40

35. Test … Item 1 Item 2 Item 3 Item 4 Item 5 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 Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 Item 5 Item 5 Item 6 Item 6

37. 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 ….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 }

39. 39 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

40. Test … </script> </script>

41. Test …

42. Test …

43. Test … defer="defer">defer="defer">

44. 44 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

45. Test <!--.green { color:#009900;}.red { color:#660000;} --> … <!--.green { color:#009900;}.red { color:#660000;} --> <!--.green { color:#009900;}.red { color:#660000;} -->

46. Test …

47. Test …

48. @import url(/stylesheets/one.css); @import url(/stylesheets/two.css);.MyHeading { color: red; font-family: 'New Century Schoolbook', serif; background: white; } @import url(/stylesheets/one.css); @import url(/stylesheets/two.css); @import url(/stylesheets/one.css); @import url(/stylesheets/two.css);

49. Test …

50. 50 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

51. 51 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

52. GlobalGlobal LocalLocal IntermediateScopesIntermediateScopes DOMDOM InstanceInstance PrototypeChainPrototypeChain CostCost var fooobj.foo

53. function WorkOnLocalVariable() { localVariable = 5; return ( localVariable + 1 ); } localVariablelocalVariable localVariablelocalVariable

54. function WorkOnLocalVariable2() { var localVariable = 5; return ( localVariable + 1 ); } var localVariable localVariablelocalVariable

55. function IterateWorkOverCollection() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work(myCollection[i]); } WorkWork

56. function IterateWorkOverCollection2() { var funcWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork(myCollection[i]); } var funcWork = Work; funcWorkfuncWork

57. var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); JSON.parseJSON.parse JSON.stringifyJSON.stringify

58. Test …

59. Test …

60. 60 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

61. Trident (MSHTML) JScript Engine DOMDOM

62. function CalculateSum() { // Retrieve Values var lSide = document.body.all.lSide.value; var rSide = document.body.all.rSide.value; // Generate Result document.body.all.result.value = lSide + rSide; } document.body.alldocument.body.all document.body.alldocument.body.all document.body.alldocument.body.all 9 DOM Lookups

63. function CalculateSum2() { // Cache Element Collection var elms = document.body.all; // Retrieve Values var lSide = elms.lSide.value; var rSide = elms.rSide.value; // Generate Result elms.result.value = lSide + rSide; } var elms = document.body.all; elmselms elmselms elmselms 3 DOM Lookups

64. 64 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

65. function LoopChildren(elm) { var nodes = elm.childNodes; var length = nodes.length; for(var i = 0; i < length; i++) { var node = nodes[i]; … } nodes[i];nodes[i];

66. function LoopChildren2(elm) { var node = elm.firstChild; while(node != null) { … node = node.nextSibling; } node.nextSibling;node.nextSibling;

67. function doValidation2() { // Retrieve the required elements by using Selectors // Selects all form fields with 'required' classes var reqs = document.querySelectorAll(".required"); // Set the flag to false by default var missingRequiredField = false; // Validate that the form data is not empty for (var i = 0; i < reqs.length; i++) { if (reqs[i].value == "") missingRequiredField = true; } document.querySelectorAlldocument.querySelectorAll

68. 68 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

69. /* These styles are for the home page. */.Homepage { color: red; background: white; } … /* These styles are for the content page. */.Contentpage { color: red; background: white; } /* These styles are for the home page. */ /* These styles are for the content page. */

70. Complex element selectors are slow When possible Use class – or ID-based selectors Make element selectors as simple as possible Use child instead of descendent selectors

71. table tr td ul li {color: green;} li#myID {color: green;} ul li {color: purple;} ul > li {color: purple;} Use Class or ID Selectors Use Child Selectors

72. 72 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems

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

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

75. 20 Best Practices to Improve Performance 1)Compress File Downloads 2)User Conditional Requests 3)Provide Cacheable Content 4)Minify Your JavaScript 5)Don’t Scale Images 6)Use Image Sprites 7)Link JavaScript at Bottom 8)Add defer tag to JavaScript 9)Link Stylesheets at Top 10)Avoid Using @import 75 11)Minimize Walking Lookup Chain 12)Cache Function Pointers 13)Use Native JSON Object 14)Remove Duplicate Script 15)Minimize DOM Interactions 16)Use Efficient DOM Methods 17)Use querySelectorAll for Groups 18)Only Send Required Styles 19)Simplify Selectors 20)Minimize Page Layouts

76. Internet Explorer 8 Subsystem Distribution 76

77. Section #2: Preview of Internet Explorer 9 Performance

78. 78 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Hardware Accelerated HTML5 Compiled JavaScript GPU Powered HTML5 Graphics

79. Demo Flying Logos

80. GPU Powered HTML5

81. The Gamers GPU 81

82. Everyone Has a GPU 82

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

84. GPU Processing Performance 84 Multi-Core CPU GPU

85. Compiled JavaScript

86. Interpreters, Compilers, Intermediary Languages, Machine Code, Stack Alignment, JIT, Type System, Registers, Memory Management, Assembly, Bytecode, Tracing, Syntax Trees, Dynamic Languages, Flow Analysis, Static Languages, Regular Expressions, Inlining, oh my…

87. Foreground New JavaScript Engine Interpreter (Chakra) 87 Source Code Parser AST Interpreter ByteCode

88. Multi-Core Processing 88 Multi-Core CPU

89. Internet Explorer 8 Processor Distribution 89 Foreground Background

90. Windows Experience Index Results 90 MonthCPU Count 2/1/20102.3 Windows Experience Index Number of CPU Cores for Vista and Win7 Users

91. Foreground New JavaScript Engine Background Compiler (Chakra) 91 Source Code Parser AST Interpreter ByteCode Background Native Code Background Compiler

92. Internet Explorer 9 Background Compilation 92 Foreground Background

93. Putting It All Together GPU Powered Graphics Compiled JavaScript Applications 93

94. Flying Images – One Animation 94 IE8 IE9

95. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.