SlideShare a Scribd company logo

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

Doris Chen, profile picture
Doris Chen

The document discusses web performance optimization, outlining six key principles for improving load times and resource management. It emphasizes the importance of quickly responding to network requests, minimizing downloaded bytes, optimizing media usage, and efficiently structuring markup. Additionally, it provides practical tips and examples to implement these principles effectively.

TechnologyDesign
Related topics:
Web Performance Tips
1 of 133
Downloaded 133 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Blog http://blogs.msdn.com/dorischen   http://blogs.msdn.com/b/dorischen/   doris.chen@microsoft.com  http://ohours.org/dorischen    PAGE 2
  Performance in the Real World 
PAGE 4
What is web performance?
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:
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)
CPU Utilization GPU UtilizationVSync
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Performance in the Real World Real-world problems and solutions
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
Principle #1: Quickly Respond to Network Requests
Avoid 3xx Redirection Quickly Respond to Network Requests
Avoid 3xx Redirection Quickly Respond to Network Requests Request GET / HTTP/1.1 Host: www.news.com
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
Avoid 3xx Redirection Quickly Respond to Network Requests 63%of top 1000 websites worldwide contain 3xx redirect
Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
Maximize Concurrent Connections Quickly Respond to Network Requests
Maximize Concurrent Connections Quickly Respond to Network Requests
Maximize Concurrent Connections Quickly Respond to Network Requests
HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests
HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests
Principle #2: Minimize Bytes Downloaded
55 6 17 10 5 Images CSS JavaScript HTML Other 56 276 48 1063 75 54 131 HTML JavaScript CSS Images Flash Fonts Other 
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
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
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
Persist App Resources Locally in Package Minimize Bytes Downloaded
Persist App Resources Locally in Package Minimize Bytes Downloaded (Windows Store apps)
Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
v2 Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
manifest file PAGE 53
MIME Type: text/cache-manifest
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
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
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
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
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
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
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
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
Principle #3: Optimize Media Usage
Minimize Number of Images Optimize Media Usage 58average number of media resources on the top 100,000 web sites
<html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body> </html> Use Native Image Resolutions Optimize Media Usage
<html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body> </html> Use Native Image Resolutions Optimize Media Usage
<html> <head> <title>Test</title> </head> <body> … <!-- logo.gif dimensions: 500 x 400 --> <img src="logo.png" width="50" height="40" /> … </body> </html> Use Native Image Resolutions Optimize Media Usage
Avoid Death by 1,000 Images Optimize Media Usage
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
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.
683 x 1024 RGBA 557 KB width * height * 4 2.67 MB Decoded
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Huffman Decoding Dequantization / iDCT Chroma Upsampling YCbCr to RGB Color Conversion
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Video: User Preview Images Optimize Media Usage <video poster="PreviewImage.jpeg " width="640" height="480" controls="controls">
Minimize Media Plugin Usage Optimize Media Usage
Principle #4: Efficiently Structure Markup
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>
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>
<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
<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
<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
<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
/* 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
/* 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
/* 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
<html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScript at End of File Efficiently Structure Markup
<html> <head> <title>Test</title> </head> <body> … … … </body> </html> Always Link JavaScript at End of File Efficiently Structure Markup
<html> <head> <title>Test</title> <script src="myscript.js" … ></script> </head> <body> … … … </body> </html> Avoid Linking JavaScript In Head Efficiently Structure Markup
<html> <head> <title>Test</title> <script src="myscript.js" … ></script> </head> <body> … … … </body> </html> Avoid Linking JavaScript In Head Efficiently Structure Markup
<html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup
<html> <head> <script type="text/javascript"> function helloWorld() { alert('Hello World!') ; } </script> </head> <body> … </body> </html> Avoid Inline JavaScript Efficiently Structure Markup
<html> <head> <title>Test</title> </head> <body> … … … <script async src="myscript.js"></script> </body> </html> Asynchronously Download Script Efficiently Structure Markup
<html> <head> <title>Test</title> </head> <body> … … … <script async src="myscript.js"></script> </body> </html> Asynchronously Download Script Efficiently Structure Markup
<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
<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
Remove Duplicate Code Efficiently Structure Markup 52%of the pages on the web have duplicate code
<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
<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
Replace Images with CSS3 Gradients Optimize Media Usage
Replace Images with CSS3 Border Radius Optimize Media Usage
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
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Principle #5: Know What Your Application is Doing
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
Use requestAnimationFrame for Animations Know What Your Application is Doing window.requestAnimationFrame(renderLoop); 16.7 16.716.7
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Principle #6: Write Fast JavaScript
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>
Native JSON Methods var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); Use Native JSON Methods Write Fast JavaScript
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
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
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
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); } }
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); } }
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); } }
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); } }
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); } }
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
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
function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
function InsertUsername() { document.getElementById('user').innerHTML = userName; } User .innerHTML to Construct Your Page Use DOM Efficiently
Maintain a Small and Healthy DOM Use DOM Efficiently Document HTML Body Element Element Element Element Element Element Element Element Element
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
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
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

More Related Content

PPTX
Bootstrap 5 ppt
Mallikarjuna G D
 
PDF
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
 
PDF
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Vladimir Roudakov
 
PPTX
Bootstrap [part 1]
Ghanshyam Patel
 
PDF
Bootstrap Framework and Drupal
Jim Birch
 
PDF
Foundation vs Bootstrap - CC FE & UX
JWORKS powered by Ordina
 
PPTX
Обзор Material Design Light (MDL). Александр Кашеверов.
DataArt
 
PPS
Bootstrap 3 vs. bootstrap 4
Ahmad Awsaf-uz-zaman
 
Bootstrap 5 ppt
Mallikarjuna G D
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
 
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Vladimir Roudakov
 
Bootstrap [part 1]
Ghanshyam Patel
 
Bootstrap Framework and Drupal
Jim Birch
 
Foundation vs Bootstrap - CC FE & UX
JWORKS powered by Ordina
 
Обзор Material Design Light (MDL). Александр Кашеверов.
DataArt
 
Bootstrap 3 vs. bootstrap 4
Ahmad Awsaf-uz-zaman
 

What's hot (20)

PPTX
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
PPTX
Bootstrap - Web Development Framework
Cindy Royal
 
PDF
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...
James Moughon
 
PPTX
Introduction to Bootstrap
Collaboration Technologies
 
PDF
Slides bootstrap-4
Michael Posso
 
PDF
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative
 
PPTX
Bootstrap
AvinashChunduri2
 
PPTX
Bootstrap 3
McSoftsis
 
PDF
Front End Best Practices
Holger Bartel
 
PPTX
Bootstrap [part 2]
Ghanshyam Patel
 
PDF
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Jim Birch
 
PPT
Bootstrap Part - 1
EPAM Systems
 
PPTX
Bootstrap 4 Alpha 3
shubham kanojia
 
PDF
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
Vladimir Roudakov
 
PDF
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
PDF
Three quick accessibility tips for HTML5
Russ Weakley
 
PPTX
Bootstrap 5 whats new
Sandun Perera
 
PDF
WordPress Theming Best Practices
Brian Krogsgard
 
PDF
Web Development for UX Designers
Ashlimarie
 
PPTX
Bootstrap By Shafeeq
DignitasDigital1
 
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
Bootstrap - Web Development Framework
Cindy Royal
 
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...
James Moughon
 
Introduction to Bootstrap
Collaboration Technologies
 
Slides bootstrap-4
Michael Posso
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative
 
Bootstrap
AvinashChunduri2
 
Bootstrap 3
McSoftsis
 
Front End Best Practices
Holger Bartel
 
Bootstrap [part 2]
Ghanshyam Patel
 
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Jim Birch
 
Bootstrap Part - 1
EPAM Systems
 
Bootstrap 4 Alpha 3
shubham kanojia
 
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
Vladimir Roudakov
 
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
Three quick accessibility tips for HTML5
Russ Weakley
 
Bootstrap 5 whats new
Sandun Perera
 
WordPress Theming Best Practices
Brian Krogsgard
 
Web Development for UX Designers
Ashlimarie
 
Bootstrap By Shafeeq
DignitasDigital1
 
Ad

Viewers also liked (16)

PDF
Teaching kids how to program
Arun Gupta
 
PDF
Dip Your Toes in the Sea of Security
James Titcumb
 
PDF
SunshinePHP 2017 - Making the most out of MySQL
Gabriela Ferrara
 
PPTX
A World Without PHP
Ben Marks
 
PDF
Learn To Test Like A Grumpy Programmer - 3 hour workshop
chartjes
 
ODP
My app is secure... I think
Wim Godden
 
PDF
JWT - To authentication and beyond!
Luís Cobucci
 
PDF
Amp your site: An intro to accelerated mobile pages
Robert McFrazier
 
PPTX
Taming the resource tiger
Elizabeth Smith
 
PPTX
From Docker to Production - SunshinePHP 2017
Chris Tankersley
 
PDF
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
Adam Englander
 
PPTX
Where and when to use the Oracle Service Bus (OSB)
Guido Schmutz
 
PPTX
Docker for Developers - Sunshine PHP
Chris Tankersley
 
PDF
20 Ideas for your Website Homepage Content
Barry Feldman
 
PPSX
INTRODUCTION TO C PROGRAMMING
Abhishek Dwivedi
 
PDF
WordPress for the modern PHP developer
Chris Sherry
 
Teaching kids how to program
Arun Gupta
 
Dip Your Toes in the Sea of Security
James Titcumb
 
SunshinePHP 2017 - Making the most out of MySQL
Gabriela Ferrara
 
A World Without PHP
Ben Marks
 
Learn To Test Like A Grumpy Programmer - 3 hour workshop
chartjes
 
My app is secure... I think
Wim Godden
 
JWT - To authentication and beyond!
Luís Cobucci
 
Amp your site: An intro to accelerated mobile pages
Robert McFrazier
 
Taming the resource tiger
Elizabeth Smith
 
From Docker to Production - SunshinePHP 2017
Chris Tankersley
 
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
Adam Englander
 
Where and when to use the Oracle Service Bus (OSB)
Guido Schmutz
 
Docker for Developers - Sunshine PHP
Chris Tankersley
 
20 Ideas for your Website Homepage Content
Barry Feldman
 
INTRODUCTION TO C PROGRAMMING
Abhishek Dwivedi
 
WordPress for the modern PHP developer
Chris Sherry
 
Ad

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

PPT
performance.ppt
fakeaccount225095
 
PDF
Optimising Web Application Frontend
tkramar
 
PPT
Life on the Edge with ESI
Kit Chan
 
PDF
CTU June 2011 - Things that Every ASP.NET Developer Should Know
Spiffy
 
PDF
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
PDF
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
PPTX
Web Front End Performance
Chris Love
 
PDF
PAC 2019 virtual Mark Tomlinson
Neotys
 
PDF
[rwdsummit2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
PPTX
5 steps to faster web sites & HTML5 games - updated for DDDscot
Michael Ewins
 
PPTX
Presentation Tier optimizations
Anup Hariharan Nair
 
PDF
[cssdevconf] Adaptive Images in RWD
Christopher Schmitt
 
PDF
Mobile Browser Internal (Blink Rendering Engine)
Hyungwook Lee
 
PDF
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011
Vlad Savitsky
 
PDF
[html5tx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
PPT
Performance engineering
Franz Allan See
 
PPTX
Analysis of Google Page Speed Insight
Sarvesh Sonawane
 
PDF
The latest in site speed: advanced #webperf 2018
Anton Shulke
 
PPT
Csdn Drdobbs Tenni Theurer Yahoo
guestb1b95b
 
PPT
Client Side Performance @ Xero
Craig Walker
 
performance.ppt
fakeaccount225095
 
Optimising Web Application Frontend
tkramar
 
Life on the Edge with ESI
Kit Chan
 
CTU June 2011 - Things that Every ASP.NET Developer Should Know
Spiffy
 
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
[refreshaustin] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Web Front End Performance
Chris Love
 
PAC 2019 virtual Mark Tomlinson
Neotys
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
5 steps to faster web sites & HTML5 games - updated for DDDscot
Michael Ewins
 
Presentation Tier optimizations
Anup Hariharan Nair
 
[cssdevconf] Adaptive Images in RWD
Christopher Schmitt
 
Mobile Browser Internal (Blink Rendering Engine)
Hyungwook Lee
 
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011
Vlad Savitsky
 
[html5tx] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
Performance engineering
Franz Allan See
 
Analysis of Google Page Speed Insight
Sarvesh Sonawane
 
The latest in site speed: advanced #webperf 2018
Anton Shulke
 
Csdn Drdobbs Tenni Theurer Yahoo
guestb1b95b
 
Client Side Performance @ Xero
Craig Walker
 

More from Doris Chen (20)

PDF
Practical tipsmakemobilefaster oscon2016
Doris Chen
 
PDF
Building Web Sites that Work Everywhere
Doris Chen
 
PDF
Angular mobile angular_u
Doris Chen
 
PDF
Lastest Trends in Web Development
Doris Chen
 
PDF
Angular or Backbone: Go Mobile!
Doris Chen
 
PDF
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
Doris Chen
 
PDF
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Doris Chen
 
PDF
What Web Developers Need to Know to Develop Native HTML5/JS Apps
Doris Chen
 
PDF
Windows 8 Opportunity
Doris Chen
 
PDF
Wins8 appfoforweb fluent
Doris Chen
 
PDF
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Doris Chen
 
PDF
What Web Developers Need to Know to Develop Windows 8 Apps
Doris Chen
 
PDF
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
PDF
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Doris Chen
 
PDF
Introduction to CSS3
Doris Chen
 
PDF
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
PDF
Practical HTML5: Using It Today
Doris Chen
 
PDF
Dive Into HTML5
Doris Chen
 
PDF
Practical HTML5: Using It Today
Doris Chen
 
PDF
HTML 5 Development for Windows Phone and Desktop
Doris Chen
 
Practical tipsmakemobilefaster oscon2016
Doris Chen
 
Building Web Sites that Work Everywhere
Doris Chen
 
Angular mobile angular_u
Doris Chen
 
Lastest Trends in Web Development
Doris Chen
 
Angular or Backbone: Go Mobile!
Doris Chen
 
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
Doris Chen
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Doris Chen
 
What Web Developers Need to Know to Develop Native HTML5/JS Apps
Doris Chen
 
Windows 8 Opportunity
Doris Chen
 
Wins8 appfoforweb fluent
Doris Chen
 
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Doris Chen
 
What Web Developers Need to Know to Develop Windows 8 Apps
Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Introduction to CSS3
Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Doris Chen
 
Practical HTML5: Using It Today
Doris Chen
 
Dive Into HTML5
Doris Chen
 
Practical HTML5: Using It Today
Doris Chen
 
HTML 5 Development for Windows Phone and Desktop
Doris Chen
 

Recently uploaded (20)

PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Teaching material agriculture food technology
LiaRayya
 
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
muhammadmuneebnaeem7
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Building Integrated photovoltaic BIPV_UPV.pdf
SandeepSingh286037
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
Spectroscopy.pptx food analysis technology
nawahassan45
 

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