SlideShare a Scribd company logo
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
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
Huffman Decoding
Dequantization /
iDCT
Chroma
Upsampling
YCbCr to RGB
Color Conversion
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
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
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
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

What's hot

Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
Bootstrap - Web Development Framework
Bootstrap - Web Development FrameworkBootstrap - Web Development Framework
Bootstrap - Web Development Framework
Cindy 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
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
Collaboration Technologies
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
Michael Posso
 
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 Creative
 
Bootstrap
BootstrapBootstrap
Bootstrap
AvinashChunduri2
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
McSoftsis
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
Holger Bartel
 
Bootstrap [part 2]
Bootstrap [part 2]Bootstrap [part 2]
Bootstrap [part 2]
Ghanshyam Patel
 
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 - 1
EPAM Systems
 
Bootstrap 4 Alpha 3
Bootstrap 4 Alpha 3Bootstrap 4 Alpha 3
Bootstrap 4 Alpha 3
shubham kanojia
 
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 CSS
Zoe Gillenwater
 
Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5Three quick accessibility tips for HTML5
Three quick accessibility tips for HTML5
Russ Weakley
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
Sandun Perera
 
WordPress Theming Best Practices
WordPress Theming Best PracticesWordPress Theming Best Practices
WordPress Theming Best Practices
Brian Krogsgard
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Bootstrap By Shafeeq
Bootstrap By Shafeeq Bootstrap By Shafeeq
Bootstrap By Shafeeq
DignitasDigital1
 

What's hot (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
 

Viewers also liked

Teaching kids how to program
Teaching kids how to programTeaching kids how to program
Teaching kids how to program
Arun 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 Security
James 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 MySQL
Gabriela Ferrara
 
A World Without PHP
A World Without PHPA World Without PHP
A World Without PHP
Ben 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 workshop
chartjes
 
My app is secure... I think
My app is secure... I thinkMy app is secure... I think
My app is secure... I think
Wim 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 pages
Robert McFrazier
 
Taming the resource tiger
Taming the resource tigerTaming the resource tiger
Taming the resource tiger
Elizabeth Smith
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017
Chris 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 REST
Adam 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 PHP
Chris 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 Content
Barry Feldman
 
INTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMINGINTRODUCTION TO C PROGRAMMING
INTRODUCTION TO C PROGRAMMING
Abhishek Dwivedi
 
WordPress for the modern PHP developer
WordPress for the modern PHP developerWordPress for the modern PHP developer
WordPress for the modern PHP developer
Chris Sherry
 

Viewers also liked (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 to Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster

performance.ppt
performance.pptperformance.ppt
performance.ppt
fakeaccount225095
 
Optimising Web Application Frontend
Optimising Web Application FrontendOptimising Web Application Frontend
Optimising Web Application Frontend
tkramar
 
Life on the Edge with ESI
Life on the Edge with ESILife on the Edge with ESI
Life on the Edge with ESI
Kit 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 Know
Spiffy
 
[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
Christopher 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 Design
Christopher Schmitt
 
Web Front End Performance
Web Front End PerformanceWeb Front End Performance
Web Front End Performance
Chris Love
 
PAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark TomlinsonPAC 2019 virtual Mark Tomlinson
PAC 2019 virtual Mark Tomlinson
Neotys
 
[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
Christopher 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 DDDscot
Michael Ewins
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD[cssdevconf] Adaptive Images in RWD
[cssdevconf] Adaptive Images in RWD
Christopher 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 2011
Vlad 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 Design
Christopher Schmitt
 
Performance engineering
Performance engineeringPerformance engineering
Performance engineering
Franz Allan See
 
Analysis of Google Page Speed Insight
Analysis of Google Page Speed InsightAnalysis of Google Page Speed Insight
Analysis of Google Page Speed Insight
Sarvesh 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 2018
Anton Shulke
 
Csdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer YahooCsdn Drdobbs Tenni Theurer Yahoo
Csdn Drdobbs Tenni Theurer Yahoo
guestb1b95b
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
Craig Walker
 

Similar to 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
 

More from Doris Chen

Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
Doris Chen
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
Doris Chen
 
Angular mobile angular_u
Angular mobile angular_uAngular mobile angular_u
Angular mobile angular_u
Doris Chen
 
Lastest Trends in Web Development
Lastest Trends in Web DevelopmentLastest Trends in Web Development
Lastest Trends in Web Development
Doris 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 HTML5
Doris 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 Apps
Doris Chen
 
Windows 8 Opportunity
Windows 8 OpportunityWindows 8 Opportunity
Windows 8 Opportunity
Doris Chen
 
Wins8 appfoforweb fluent
Wins8 appfoforweb fluentWins8 appfoforweb fluent
Wins8 appfoforweb fluent
Doris 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 Apps
Doris 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 & CSS3
Doris 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 & CSS3
Doris Chen
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris 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 & CSS3
Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
Doris Chen
 
Dive Into HTML5
Dive Into HTML5Dive Into HTML5
Dive Into HTML5
Doris Chen
 
Practical HTML5: Using It Today
Practical HTML5: Using It TodayPractical HTML5: Using It Today
Practical HTML5: Using It Today
Doris 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 Desktop
Doris Chen
 

More from 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
 

Recently uploaded

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
saastr
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 

Recently uploaded (20)

Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
9 CEO's who hit $100m ARR Share Their Top Growth Tactics Nathan Latka, Founde...
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 

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

  • 1.
  • 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
  • 23.
  • 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
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 79.
  • 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
  • 108.
  • 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
  • 112.
  • 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
  • 131.
  • 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