Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster

1. Blog http://blogs.msdn.com/dorischen   http://blogs.msdn.com/b/dorischen/   doris.chen@microsoft.com  http://ohours.org/dorischen    PAGE 2

2.   Performance in the Real World 

3. PAGE 4

4. What is web performance?

5. 0.1 1.8 3.4 6.1 7.5 0 1 2 3 4 5 6 7 8 Bandwidth(Mbps) 2G 3G 4G HSPA+ WiFI 4G LTE Source:

6. CPU Utilization Elapsed Page Load Time (1.81 seconds) Time to Glass (.65 seconds) CPU Time (1.39 seconds) Idle CPU Time (0.42 seconds)

7. CPU Utilization GPU UtilizationVSync

8. Networking / Cache Parsers 1 2 7 43 8 9 5 6 DOM Tree Formatting Layout Painting 1 2 7 43 8 9 5 6 Display Tree Compositing DOM API & Capabilities JavaScript CSS Cascade

22. Performance in the Real World Real-world problems and solutions

23. Six Principles to Remember 1) Quickly Respond to Network Requests 2) Minimize Bytes Downloaded 3) Optimize Media Usage 4) Efficiently Structure Markup 5) Know What Your Application is Doing 6) Write Fast JavaScript

24. Principle #1: Quickly Respond to Network Requests

25. Avoid 3xx Redirection Quickly Respond to Network Requests

26. Avoid 3xx Redirection Quickly Respond to Network Requests Request GET / HTTP/1.1 Host: www.news.com

27. Avoid 3xx Redirection Quickly Respond to Network Requests Response HTTP/1.1 303 See Other Location: http://homepage.news.com/ Request GET / HTTP/1.1 Host: www.news.com

28. Avoid 3xx Redirection Quickly Respond to Network Requests 63%of top 1000 websites worldwide contain 3xx redirect

29. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests

34. Maximize Concurrent Connections Quickly Respond to Network Requests

37. HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests

38. HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests

39. Principle #2: Minimize Bytes Downloaded

40. 55 6 17 10 5 Images CSS JavaScript HTML Other 56 276 48 1063 75 54 131 HTML JavaScript CSS Images Flash Fonts Other 

41. Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate Host: www.live.com Response HTTP/1.1 200 OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2010 21:30:46 GMT Pragma: no-cache Content-Encoding: gzip GZIP Compress Network Traffic Minimize Bytes Downloaded

44. Persist App Resources Locally in Package Minimize Bytes Downloaded

45. Persist App Resources Locally in Package Minimize Bytes Downloaded (Windows Store apps)

46. Cache Dynamic Resources in App Cache Minimize Bytes Downloaded

49. v2 Cache Dynamic Resources in App Cache Minimize Bytes Downloaded

50. manifest file PAGE 53

51. MIME Type: text/cache-manifest

52. Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 20 Apr 2011 00:00:00 GMT Provide Cacheable Content Minimize Bytes Downloaded

53. Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 20 Apr 2011 00:00:00 GMT Provide Cacheable Content Minimize Bytes Downloaded

54. jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, success: callback }); Cached jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback }); Cache Data Requests Minimize Bytes Downloaded

55. jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, success: callback }); Cached jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback }); Cache Data Requests Minimize Bytes Downloaded

56. Lower Case <img src="icon.png" /> Title Case <img src="Icon.png" /> Careless Developer <img src="ICon.png" /> Standardize File Capitalization Convention Minimize Bytes Downloaded

60. Principle #3: Optimize Media Usage

61. Minimize Number of Images Optimize Media Usage 58average number of media resources on the top 100,000 web sites

62. <html> <head> <title>Test</title> </head> <body> …  <img src="logo.png" width="50" height="40" /> … </body> </html> Use Native Image Resolutions Optimize Media Usage

65. Avoid Death by 1,000 Images Optimize Media Usage

66. Use Image Sprites Optimize Media Usage 240px 40px 40px Scenario #1 – Multiple Files Scenario #2 - Image Sprite 40px 6 Images 6 Connections 96k Download 1 Image 1 Connection 21k Download 40px40px40px40px40px40px

67. Image Formats: PNG, JPEG Optimize Media Usage JPEG photographs, landscapes, and faces PNG Logos, charts, graphs, screenshots Don’t Get Distracted GIF, TIFF, BMP, WebP, etc.

68. 683 x 1024 RGBA 557 KB width * height * 4 2.67 MB Decoded

69. Huffman Decoding Dequantization / iDCT Chroma Upsampling YCbCr to RGB Color Conversion

70. Video: User Preview Images Optimize Media Usage <video poster="PreviewImage.jpeg " width="640" height="480" controls="controls">

71. Minimize Media Plugin Usage Optimize Media Usage

72. Principle #4: Efficiently Structure Markup

73. Link Style Sheets at Top of Page Efficiently Structure Markup <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css"href="class.css" /> </head> <body> … … … </body> </html>

74. Link Style Sheets at Top of Page Efficiently Structure Markup <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="class.css" /> </head> <body> … … … </body> </html>

75. <html> <head> <title>Test</title> </head> <body> … … … </body> <link rel="stylesheet" type="text/css" href="styles.css"/> </html> Never Link Style Sheets at Bottom of Page Efficiently Structure Markup

76. <html> <head> <title>Test</title> </head> <body> … … … </body> <link rel="stylesheet" type="text/css" href="styles.css"/> </html> Never Link Style Sheets at Bottom of Page Efficiently Structure Markup

77. <html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’>MyItem</div> </body> </html> Avoid Embedded and Inline Styles Efficiently Structure Markup

78. <html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’>MyItem</div> </body> </html> Avoid Embedded and Inline Styles Efficiently Structure Markup

79. /* These styles are for the home page. */ HomePage { color: red; } /* These styles are for the content page. */ ContentPage { color: green; } Only Include Necessary Styles Efficiently Structure Markup

82. <html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScript at End of File Efficiently Structure Markup

83. <html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScript at End of File Efficiently Structure Markup

84. <html> <head> <title>Test</title> <script src="myscript.js" … ></script> </head> <body> … … … </body> </html> Avoid Linking JavaScript In Head Efficiently Structure Markup

85. <html> <head> <title>Test</title> <script src="myscript.js" … ></script> </head> <body> … … … </body> </html> Avoid Linking JavaScript In Head Efficiently Structure Markup

86. <html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup

87. <html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup

88. <html> <head> <title>Test</title> </head> <body> … … … <script async src="myscript.js"></script> </body> </html> Asynchronously Download Script Efficiently Structure Markup

89. <html> <head> <title>Test</title> </head> <body> … … … <script async src="myscript.js"></script> </body> </html> Asynchronously Download Script Efficiently Structure Markup

90. <html> <head> <title>Test</title> </head> <body> … <script src="jquery.js" … ></script> <script src="myscript.js" … ></script> <script src="navigation.js" … ></script> <script src="jquery.js" … ></script> </body> </html> Remove Duplicate Code Efficiently Structure Markup

91. <html> <head> <title>Test</title> </head> <body> … <script src="jquery.js" … ></script> <script src="myscript.js" … ></script> <script src="navigation.js" … ></script> <script src="jquery.js" … ></script> </body> </html> Remove Duplicate Code Efficiently Structure Markup

92. Remove Duplicate Code Efficiently Structure Markup 52%of the pages on the web have duplicate code

93. <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=“gsel.js" … ></script> … Standardize on a Single Framework Efficiently Structure Markup

94. <script src="facebookconnect.js" … ></script> <script src="facebooklike.js" … ></script> <script src="facebookstats.js" … ></script> <script src="tweetmeme.js" … ></script> <script src="tweeter.js" … ></script> <script src="tweetingly.js" … ></script> <script src="googleanalytics.js" … ></script> <script src="doubleclick.js" … ></script> <script src="monitor.js" … ></script> <script src="digg.js" … ></script> … Don’t Include Script To Be Cool Efficiently Structure Markup

95. Replace Images with CSS3 Gradients Optimize Media Usage

96. Replace Images with CSS3 Border Radius Optimize Media Usage

97. Leverage CSS3 Transforms Optimize Media Usage -ms-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); -webkit-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); -moz-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); -o-transform: translate(75px, 100px) scaleY(.75) skewY(10deg); Element Rotate SkewMove

98. Principle #5: Know What Your Application is Doing

99. Align Timers to the Display Frame (16.7) Know What Your Application is Doing setInterval(renderLoop, 16.7); setInterval(renderLoop, 33.4); 16.7 16.716.7

100. Use requestAnimationFrame for Animations Know What Your Application is Doing window.requestAnimationFrame(renderLoop); 16.7 16.716.7

101. Principle #6: Write Fast JavaScript

102. JSON Always Faster than XML for Data JSON Representation "glossary":{ "title": "example glossary", "GlossDiv":{ "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "meta-markup language", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } XML Representation <!DOCTYPE glossary PUBLIC "DocBook V3.1"> <glossary><title>example glossary</title> <GlossDiv><title>S</title> <GlossList> <GlossEntry ID="SGML" SortAs="SGML"> <GlossTerm>Markup Language</GlossTerm> <Acronym>SGML</Acronym> <Abbrev>ISO 8879:1986</Abbrev> <GlossDef> <para>meta-markup language</para> <GlossSeeAlso OtherTerm="GML"> <GlossSeeAlso OtherTerm="XML"> </GlossDef> <GlossSee OtherTerm="markup"> </GlossEntry> </GlossList> </GlossDiv> </glossary>

103. Native JSON Methods var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); Use Native JSON Methods Write Fast JavaScript

104. Numbers in JavaScript • All numbers are IEEE 64-bit floating point numbers - Great for flexibility - Performance and optimization challenge 31bits 31-bit (tagged) Integers 1bit 1 31bits Object pointer 1bit 0 32bits 32bits Floats 32-bit Integers STACK HEAP FIXED LENGTH, FASTER ACCESS VARIABLE LENGTH, SLOWER ACCESS Boxed

105. Avoid creating floats if they are not needed Fastest way to indicate integer math is |0 var r = 0; function doMath(){ var a = 5; var b = 2; r = ((a + b) / 2) |0 ; // r = 3 r = Math.round((a + b) / 2); // r = 4 } var r = 0; function doMath(){ var a = 5; var b = 2; r = ((a + b) / 2); // r = 3.5 } ... var intR = Math.floor(r); 0x005e4148r: 0x00000007r: 0x00000009r: Number 3.5 STACK HEAP STACK SLOW FAST SLOW

106. Take advantage of type-specialization for arithmetic Create separate functions for ints and floats; use consistent argument types function Distance(p1, p2) { var dx = p1.x - p2.x; var dy = p1.y - p2.y; var d2 = dx * dx + dy * dy; return Math.sqrt(d2); } var point1 = {x:10, y:10}; var point2 = {x:20, y:20}; var point3 = {x:1.5, y:1.5}; var point4 = {x:0x0AB, y:0xBC}; Distance(point1, point3); Distance(point2, point4); function DistanceFloat(p1, p2) { var dx = p1.x - p2.x; var dy = p1.y - p2.y; var d2 = dx * dx + dy * dy; return Math.sqrt(d2); } function DistanceInt(p1,p2) { var dx = p1.x - p2.x; var dy = p1.y - p2.y; var d2 = dx * dx + dy * dy; return (Math.sqrt(d2) | 0); } var point1 = {x:10, y:10}; var point2 = {x:20, y:20}; var point3 = {x:1.5, y:1.5}; var point4 = {x:0x0AB, y:0xBC}; DistanceInt(point1, point2); DistanceFloat(point3, point4); SLOW FAST

107. Initialize JavaScript on Demand Write Fast Loading JavaScript var userTileScriptsLoaded = false; function CustomizeUserTile() { if (userTileScriptsLoaded == false) { var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'upload.js'; head.appendChild(script); } }

112. Avoid chattiness with the DOM ... //for each rotation document.body.game.getElementById(elID).classList.remove(oldClass) document.body.game.getElementById(elID).classList.add(newClass) ... var element = document.getElementById(elID).classList; //for each rotation element.remove(oldClass) element.add(newClass) ... JavaScript DOM JavaScript DOM

113. Avoid automatic conversions of DOM values Values from DOM are strings by default this.boardSize = document.getElementById("benchmarkBox").value; for (var i = 0; i < this.boardSize; i++) { //this.boardSize is “25” for (var j = 0; j < this.boardSize; j++) { //this.boardSize is “25” ... } } this.boardSize = parseInt(document.getElementById("benchmarkBox").value); for (var i = 0; i < this.boardSize; i++) { //this.boardSize is 25 for (var j = 0; j < this.boardSize; j++) { //this.boardSize is 25 ... } } FAST (25% marshalling cost reduction in init function) SLOW

114. function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently

117. function InsertUsername() { document.getElementById('user').innerHTML = userName; } User .innerHTML to Construct Your Page Use DOM Efficiently

118. Maintain a Small and Healthy DOM Use DOM Efficiently Document HTML Body Element Element Element Element Element Element Element Element Element

119. Six Principles to Remember 1) Quickly Respond to Network Requests 2) Minimize Bytes Downloaded 3) Optimize Media Usage 4) Efficiently Structure Markup 5) Know What Your Application is Doing 6) Write Fast JavaScript

120. Overview Concepts High Performance Websites Steve Souders, September 2007 Event Faster Websites: Best Practices Steve Souders, June 2009 High Performance Browser Networking Ilya Grigorik, September 2013 JavaScript Patterns High Performance JavaScript Nicholas Zakas, March 2010 JavaScript the Good Parts Douglas Crockford, May 2008 JavaScript Patterns Stoyan Stefanov, September 2010 JavaScript Cookbook Shelley Powers, July 2010 Microsoft Guidance Windows Store App: JavaScript Best Practices MSDN, December 2012 Performance Tricks to Make Apps & Sites Faster Jatinder Mann, Build 2012 50 Performance Tricks for Windows Store Apps Jason Weber, Build 2011 Engineering Excellence Performance Guidance Jason Weber, EE Forum 2011 Internet Explorer Architectural Overview Jason Weber, PDC 2011 W3C Web Performance Web Performance Working Group Homepage Navigation Timing Specification Blog Posts 1) Measuring Performance with ETW/XPerf 2) Measuring Performance in Lab Environments 3) Browser Subsystems Overview 4) What Common Benchmarks Measure Tools Windows Performance Toolkit Fiddler Web Debugger Contact Doris Chen Twitter: @doristchen Email: doris.chen@Microsoft.com

Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster

Esté a ler uma amostra.

Confira estes a seguir

Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (17)

Semelhante a Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster (20)

Mais de Doris Chen (20)

Mais recentes (20)