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

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

3.
  Performance inthe Real World 

4.
PAGE 4

5.
What is webperformance?

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

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

8.
CPU Utilization GPU UtilizationVSync

9.
Networking / Cache Parsers 1 2 7 438 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

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

24.
Performance in theReal World Real-world problems and solutions

25.
Six Principles toRemember 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

26.
Principle #1: Quickly Respondto Network Requests

27.
Avoid 3xx Redirection QuicklyRespond to Network Requests

28.
Avoid 3xx Redirection QuicklyRespond to Network Requests Request GET / HTTP/1.1 Host: www.news.com

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

30.
Avoid 3xx Redirection QuicklyRespond to Network Requests 63%of top 1000 websites worldwide contain 3xx redirect

31.
Use Content DistributionNetworks (CDN’s) Quickly Respond to Network Requests

32.

33.

34.

35.

36.
Maximize Concurrent Connections QuicklyRespond to Network Requests

37.

38.

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

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

41.
Principle #2: Minimize BytesDownloaded

42.
55 6 1710 5 Images CSS JavaScript HTML Other 56 276 48 1063 75 54 131 HTML JavaScript CSS Images Flash Fonts Other 

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

45.

46.
Persist App ResourcesLocally in Package Minimize Bytes Downloaded

47.
Persist App ResourcesLocally in Package Minimize Bytes Downloaded (Windows Store apps)

48.
Cache Dynamic Resourcesin App Cache Minimize Bytes Downloaded

49.

50.

51.
v2 Cache Dynamic Resourcesin App Cache Minimize Bytes Downloaded

52.
manifest file PAGE 53

53.
MIME Type: text/cache-manifest

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

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

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

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

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

59.

60.

61.

62.
Principle #3: Optimize MediaUsage

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

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

66.

67.
Avoid Death by1,000 Images Optimize Media Usage

68.
Use Image Sprites OptimizeMedia 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

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

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

78.
Huffman Decoding Dequantization / iDCT Chroma Upsampling YCbCrto RGB Color Conversion

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

81.
Minimize Media PluginUsage Optimize Media Usage

82.
Principle #4: Efficiently StructureMarkup

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

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

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

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

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

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

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

90.

91.

92.
<html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScriptat End of File Efficiently Structure Markup

93.
<html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScriptat End of File Efficiently Structure Markup

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

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

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

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

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

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

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

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

102.
Remove Duplicate Code EfficientlyStructure Markup 52%of the pages on the web have duplicate code

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

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

105.
Replace Images withCSS3 Gradients Optimize Media Usage

106.
Replace Images withCSS3 Border Radius Optimize Media Usage

107.
Leverage CSS3 Transforms OptimizeMedia 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

109.
Principle #5: Know WhatYour Application is Doing

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

111.
Use requestAnimationFrame forAnimations Know What Your Application is Doing window.requestAnimationFrame(renderLoop); 16.7 16.716.7

113.
Principle #6: Write FastJavaScript

114.
JSON Always Fasterthan 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>

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

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

117.
Avoid creating floatsif 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

118.
Take advantage oftype-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

119.
Initialize JavaScript onDemand 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); } }

120.

121.

122.

123.

124.
Avoid chattiness withthe 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

125.
Avoid automatic conversionsof 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

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

127.

128.

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

130.
Maintain a Smalland Healthy DOM Use DOM Efficiently Document HTML Body Element Element Element Element Element Element Element Element Element

132.
Six Principles toRemember 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

133.
Overview Concepts High PerformanceWebsites 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

More Related Content

What's hot

Viewers also liked

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

More from Doris Chen

Recently uploaded

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