SlideShare una empresa de Scribd logo
1 de 133
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

Bootstrap - Web Development Framework
Bootstrap - Web Development FrameworkBootstrap - Web Development Framework
Bootstrap - Web Development FrameworkCindy Royal
 
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...James Moughon
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap Creative
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best PracticesHolger Bartel
 
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...Jim Birch
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1EPAM Systems
 
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.Vladimir Roudakov
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSZoe Gillenwater
 
Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5Russ Weakley
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats newSandun Perera
 
WordPress Theming Best Practices
WordPress Theming Best PracticesWordPress Theming Best Practices
WordPress Theming Best PracticesBrian Krogsgard
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 

La actualidad más candente (20)

Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
Bootstrap - Web Development Framework
Bootstrap - Web Development FrameworkBootstrap - Web Development Framework
Bootstrap - Web Development Framework
 
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...
DrupalCon Austin 2014 Implement Foundation or Other Front-End Frameworks in Y...
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
Bootstrap [part 2]
Bootstrap [part 2]Bootstrap [part 2]
Bootstrap [part 2]
 
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
 
Bootstrap 4 Alpha 3
Bootstrap 4 Alpha 3Bootstrap 4 Alpha 3
Bootstrap 4 Alpha 3
 
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
DrupalCamp Melbourne 2015. Bootstrap: framework and theme.
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
WordPress Theming Best Practices
WordPress Theming Best PracticesWordPress Theming Best Practices
WordPress Theming Best Practices
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Bootstrap By Shafeeq
Bootstrap By Shafeeq Bootstrap By Shafeeq
Bootstrap By Shafeeq
 

Destacado

Teaching kids how to program
Teaching kids how to programTeaching kids how to program
Teaching kids how to programArun Gupta
 
Dip Your Toes in the Sea of Security
Dip Your Toes in the Sea of SecurityDip Your Toes in the Sea of Security
Dip Your Toes in the Sea of SecurityJames Titcumb
 
SunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQLSunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQLGabriela Ferrara
 
A World Without PHP
A World Without PHPA World Without PHP
A World Without PHPBen Marks
 
Learn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshopLearn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshopchartjes
 
My app is secure... I think
My app is secure... I thinkMy app is secure... I think
My app is secure... I thinkWim Godden
 
JWT - To authentication and beyond!
JWT - To authentication and beyond!JWT - To authentication and beyond!
JWT - To authentication and beyond!Luís Cobucci
 
Amp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesAmp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesRobert McFrazier
 
Taming the resource tiger
Taming the resource tigerTaming the resource tiger
Taming the resource tigerElizabeth Smith
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017Chris Tankersley
 
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your RESTPHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your RESTAdam Englander
 
Where and when to use the Oracle Service Bus (OSB)
Where and when to use the Oracle Service Bus (OSB)Where and when to use the Oracle Service Bus (OSB)
Where and when to use the Oracle Service Bus (OSB)Guido Schmutz
 
Docker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPDocker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPChris Tankersley
 
20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage ContentBarry Feldman
 
INTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMINGINTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMINGAbhishek Dwivedi
 
WordPress for the modern PHP developer
WordPress for the modern PHP developerWordPress for the modern PHP developer
WordPress for the modern PHP developerChris Sherry
 

Destacado (16)

Teaching kids how to program
Teaching kids how to programTeaching kids how to program
Teaching kids how to program
 
Dip Your Toes in the Sea of Security
Dip Your Toes in the Sea of SecurityDip Your Toes in the Sea of Security
Dip Your Toes in the Sea of Security
 
SunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQLSunshinePHP 2017 - Making the most out of MySQL
SunshinePHP 2017 - Making the most out of MySQL
 
A World Without PHP
A World Without PHPA World Without PHP
A World Without PHP
 
Learn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshopLearn To Test Like A Grumpy Programmer - 3 hour workshop
Learn To Test Like A Grumpy Programmer - 3 hour workshop
 
My app is secure... I think
My app is secure... I thinkMy app is secure... I think
My app is secure... I think
 
JWT - To authentication and beyond!
JWT - To authentication and beyond!JWT - To authentication and beyond!
JWT - To authentication and beyond!
 
Amp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pagesAmp your site: An intro to accelerated mobile pages
Amp your site: An intro to accelerated mobile pages
 
Taming the resource tiger
Taming the resource tigerTaming the resource tiger
Taming the resource tiger
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017
 
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your RESTPHP UK 2017 - Don't Lose Sleep - Secure Your REST
PHP UK 2017 - Don't Lose Sleep - Secure Your REST
 
Where and when to use the Oracle Service Bus (OSB)
Where and when to use the Oracle Service Bus (OSB)Where and when to use the Oracle Service Bus (OSB)
Where and when to use the Oracle Service Bus (OSB)
 
Docker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHPDocker for Developers - Sunshine PHP
Docker for Developers - Sunshine PHP
 
20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content
 
INTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMINGINTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMING
 
WordPress for the modern PHP developer
WordPress for the modern PHP developerWordPress for the modern PHP developer
WordPress for the modern PHP developer
 

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

Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontendtkramar
 
Life on the Edge with ESI
Life on the Edge with ESILife on the Edge with ESI
Life on the Edge with ESIKit Chan
 
CTU June 2011 - Things that Every ASP.NET Developer Should Know
CTU June 2011 - Things that Every ASP.NET Developer Should KnowCTU June 2011 - Things that Every ASP.NET Developer Should Know
CTU June 2011 - Things that Every ASP.NET Developer Should KnowSpiffy
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Web Front End Performance
Web Front End PerformanceWeb Front End Performance
Web Front End PerformanceChris Love
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonNeotys
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscotMichael Ewins
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWDChristopher Schmitt
 
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Hyungwook Lee
 
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011Vlad Savitsky
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Analysis of Google Page Speed Insight
Analysis of Google Page Speed InsightAnalysis of Google Page Speed Insight
Analysis of Google Page Speed InsightSarvesh Sonawane
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018Anton Shulke
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahooguestb1b95b
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ XeroCraig Walker
 

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

performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
 
Life on the Edge with ESI
Life on the Edge with ESILife on the Edge with ESI
Life on the Edge with ESI
 
CTU June 2011 - Things that Every ASP.NET Developer Should Know
CTU June 2011 - Things that Every ASP.NET Developer Should KnowCTU June 2011 - Things that Every ASP.NET Developer Should Know
CTU June 2011 - Things that Every ASP.NET Developer Should Know
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design[refreshaustin] Adaptive Images in Responsive Web Design
[refreshaustin] Adaptive Images in Responsive Web Design
 
Web Front End Performance
Web Front End PerformanceWeb Front End Performance
Web Front End Performance
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson
 
[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design[rwdsummit2012] Adaptive Images in Responsive Web Design
[rwdsummit2012] Adaptive Images in Responsive Web Design
 
5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot5 steps to faster web sites & HTML5 games - updated for DDDscot
5 steps to faster web sites & HTML5 games - updated for DDDscot
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
 
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)
 
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011
Oleg Natalushko. Drupal server anatomy. DrupalCamp Kyiv 2011
 
[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design[html5tx] Adaptive Images in Responsive Web Design
[html5tx] Adaptive Images in Responsive Web Design
 
Performance engineering
Performance engineeringPerformance engineering
Performance engineering
 
Analysis of Google Page Speed Insight
Analysis of Google Page Speed InsightAnalysis of Google Page Speed Insight
Analysis of Google Page Speed Insight
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
 

Más de Doris Chen

Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work EverywhereDoris Chen
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_uDoris Chen
 
Lastest Trends in Web Development
Lastest Trends in Web DevelopmentLastest Trends in Web Development
Lastest Trends in Web DevelopmentDoris Chen
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Doris Chen
 
OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...OSCON Presentation: Developing High Performance Websites and Modern Apps with...
OSCON Presentation: Developing High Performance Websites and Modern Apps with...Doris Chen
 
Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Developing High Performance Websites and Modern Apps with JavaScript and HTML5
Developing High Performance Websites and Modern Apps with JavaScript and HTML5Doris Chen
 
What Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS AppsWhat Web Developers Need to Know to Develop Native HTML5/JS Apps
What Web Developers Need to Know to Develop Native HTML5/JS AppsDoris Chen
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 OpportunityDoris Chen
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluentDoris Chen
 
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...
Develop High Performance Windows 8 Application with HTML5 and JavaScriptHigh ...Doris Chen
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Doris Chen
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Doris Chen
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It TodayDoris Chen
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It TodayDoris Chen
 
HTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopHTML 5 Development for Windows Phone and Desktop
HTML 5 Development for Windows Phone and DesktopDoris Chen
 

Más de Doris Chen (20)

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

Último

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementNuwan Dias
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Último (20)

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API ManagementThe Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

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 in the Real World 
  • 5. What is web performance?
  • 7. 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)
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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. 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
  • 24. Performance in the Real World Real-world problems and solutions
  • 25. 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
  • 26. Principle #1: Quickly Respond to Network Requests
  • 27. Avoid 3xx Redirection Quickly Respond to Network Requests
  • 28. Avoid 3xx Redirection Quickly Respond to Network Requests Request GET / HTTP/1.1 Host: www.news.com
  • 29. 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
  • 30. Avoid 3xx Redirection Quickly Respond to Network Requests 63%of top 1000 websites worldwide contain 3xx redirect
  • 31. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 32. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 33. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 34. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 35. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 36. Maximize Concurrent Connections Quickly Respond to Network Requests
  • 37. Maximize Concurrent Connections Quickly Respond to Network Requests
  • 38. Maximize Concurrent Connections Quickly Respond to Network Requests
  • 39. HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests
  • 40. HTTP Response HTTP/1.1 200 OK Content-Type: application/javascript Content-Length: 230848 Connection: close Reuse Connections Quickly Respond to Network Requests
  • 42. 55 6 17 10 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. 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
  • 45. 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
  • 46. Persist App Resources Locally in Package Minimize Bytes Downloaded
  • 47. Persist App Resources Locally in Package Minimize Bytes Downloaded (Windows Store apps)
  • 48. Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  • 49. Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  • 50. Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  • 51. v2 Cache Dynamic Resources in App Cache Minimize Bytes Downloaded
  • 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. 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. 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
  • 61. 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
  • 63. Minimize Number of Images Optimize Media Usage 58average number of media resources on the top 100,000 web sites
  • 64. <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
  • 65. <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
  • 66. <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
  • 67. Avoid Death by 1,000 Images Optimize Media Usage
  • 68. 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
  • 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 557 KB width * height * 4 2.67 MB Decoded
  • 80. Video: User Preview Images Optimize Media Usage <video poster="PreviewImage.jpeg " width="640" height="480" controls="controls">
  • 81. Minimize Media Plugin Usage Optimize Media Usage
  • 83. 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>
  • 84. 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>
  • 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> <div class=‘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> <div class=‘item’>MyItem</div> </body> </html> Avoid Embedded and Inline Styles Efficiently Structure Markup
  • 89. /* 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
  • 90. /* 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
  • 91. /* 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
  • 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
  • 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 Efficiently Structure 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 with CSS3 Gradients Optimize Media Usage
  • 106. Replace Images with CSS3 Border Radius Optimize Media Usage
  • 107. 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
  • 109. Principle #5: Know What Your Application is Doing
  • 110. 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
  • 111. Use requestAnimationFrame for Animations Know What Your Application is Doing window.requestAnimationFrame(renderLoop); 16.7 16.716.7
  • 114. 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>
  • 115. Native JSON Methods var jsObjStringParsed = 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 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
  • 118. 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
  • 119. 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); } }
  • 120. 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); } }
  • 121. 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); } }
  • 122. 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); } }
  • 123. 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); } }
  • 124. 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
  • 125. 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
  • 126. function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
  • 127. function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
  • 128. function LoopChildren(elm) { var node = elm.firstChild; while (node != null) { node = node.nextSibling; } } Built in DOM Methods Always More Efficient Use DOM Efficiently
  • 129. function InsertUsername() { document.getElementById('user').innerHTML = userName; } User .innerHTML to Construct Your Page Use DOM Efficiently
  • 130. Maintain a Small and Healthy DOM Use DOM Efficiently Document HTML Body Element Element Element Element Element Element Element Element Element
  • 132. 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
  • 133. 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