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

Ban

dw

idth

(M

bp

s)

2G 3G 4G HSPA+ WiFI 4G LTE

Source:

CP

UU

tiliza

tio

n

Elapsed Page Load Time (1.81 seconds)

Time to Glass (.65 seconds)

CPU Time (1.39 seconds)

Idle CPU Time (0.42 seconds)

CP

UU

tiliza

tio

nG

PU

Uti

liza

tio

nV

Syn

c

Networking /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 /

CacheParsers

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 WorldReal-world problems and solutions

Six Principles to Remember1) 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 RedirectionQuickly Respond to Network Requests

Avoid 3xx RedirectionQuickly Respond to Network Requests

RequestGET / HTTP/1.1

Host: www.news.com

Avoid 3xx RedirectionQuickly Respond to Network Requests

ResponseHTTP/1.1 303 See Other

Location: http://homepage.news.com/

RequestGET / HTTP/1.1

Host: www.news.com

Avoid 3xx RedirectionQuickly 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 ConnectionsQuickly Respond to Network Requests

Maximize Concurrent ConnectionsQuickly Respond to Network Requests

Maximize Concurrent ConnectionsQuickly Respond to Network Requests

HTTP ResponseHTTP/1.1 200 OK

Content-Type: application/javascript

Content-Length: 230848

Connection: close

Reuse ConnectionsQuickly Respond to Network Requests

HTTP ResponseHTTP/1.1 200 OK

Content-Type: application/javascript

Content-Length: 230848

Connection: close

Reuse ConnectionsQuickly 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

RequestGET / HTTP/1.1

Accept: */*

Accept-Language: en-us

UA-CPU: x86

Accept-Encoding: gzip, deflate

Host: www.live.com

ResponseHTTP/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 TrafficMinimize Bytes Downloaded

RequestGET / HTTP/1.1

Accept: */*

Accept-Language: en-us

UA-CPU: x86

Accept-Encoding: gzip, deflate

Host: www.live.com

ResponseHTTP/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 TrafficMinimize Bytes Downloaded

RequestGET / HTTP/1.1

Accept: */*

Accept-Language: en-us

UA-CPU: x86

Accept-Encoding: gzip, deflate

Host: www.live.com

ResponseHTTP/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 TrafficMinimize Bytes Downloaded

Persist App Resources Locally in PackageMinimize Bytes Downloaded

Persist App Resources Locally in PackageMinimize Bytes Downloaded (Windows Store apps)

Cache Dynamic Resources in App CacheMinimize Bytes Downloaded

Cache Dynamic Resources in App CacheMinimize Bytes Downloaded

Cache Dynamic Resources in App CacheMinimize Bytes Downloaded

v2

Cache Dynamic Resources in App CacheMinimize Bytes Downloaded

manifest file

PAGE 53

MIME Type: text/cache-manifest

RequestGET /images/banner.jpg HTTP/1.1

Host: www.microsoft.com

ResponseHTTP/1.1 200 OK

Content-Type: image/jpeg

Expires: Fri, 20 Apr 2011 00:00:00 GMT

Provide Cacheable ContentMinimize Bytes Downloaded

RequestGET /images/banner.jpg HTTP/1.1

Host: www.microsoft.com

ResponseHTTP/1.1 200 OK

Content-Type: image/jpeg

Expires: Fri, 20 Apr 2011 00:00:00 GMT

Provide Cacheable ContentMinimize Bytes Downloaded

jQuery Data Request

jQuery.ajax({

url: url,

dataType: 'json',

data: data,

success: callback

});

Cached jQuery Data RequestjQuery.ajax({

url: url,

dataType: 'json',

data: data,

cache: true,

success: callback

});

Cache Data RequestsMinimize Bytes Downloaded

jQuery Data Request

jQuery.ajax({

url: url,

dataType: 'json',

data: data,

success: callback

});

Cached jQuery Data RequestjQuery.ajax({

url: url,

dataType: 'json',

data: data,

cache: true,

success: callback

});

Cache Data RequestsMinimize Bytes Downloaded

Lower Case

<img src="icon.png" />

Title Case

<img src="Icon.png" />

Careless Developer

<img src="ICon.png" />

Standardize File Capitalization ConventionMinimize Bytes Downloaded

Lower Case

<img src="icon.png" />

Title Case

<img src="Icon.png" />

Careless Developer

<img src="ICon.png" />

Standardize File Capitalization ConventionMinimize Bytes Downloaded

Lower Case

<img src="icon.png" />

Title Case

<img src="Icon.png" />

Careless Developer

<img src="ICon.png" />

Standardize File Capitalization ConventionMinimize Bytes Downloaded

Lower Case

<img src="icon.png" />

Title Case

<img src="Icon.png" />

Careless Developer

<img src="ICon.png" />

Standardize File Capitalization ConventionMinimize Bytes Downloaded

Principle #3:Optimize Media Usage

Minimize Number of ImagesOptimize 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 ResolutionsOptimize 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 ResolutionsOptimize 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 ResolutionsOptimize Media Usage

Avoid Death by 1,000 ImagesOptimize Media Usage

Use Image SpritesOptimize Media Usage

240px

40p

x

40p

x

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, JPEGOptimize Media Usage

JPEGphotographs, landscapes, and faces

PNG Logos, charts, graphs, screenshots

Don’t Get DistractedGIF, TIFF, BMP, WebP, etc.

683 x 1024

RGBA

557 KB

width * height * 4

2.67 MB Decoded

Huffman DecodingDequantization /

iDCT

Chroma

Upsampling

YCbCr to RGB

Color Conversion

Video: User Preview ImagesOptimize Media Usage

<video

poster="PreviewImage.jpeg

" width="640" height="480"

controls="controls">

Minimize Media Plugin UsageOptimize Media Usage

Principle #4:Efficiently Structure Markup

Link Style Sheets at Top of PageEfficiently 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 PageEfficiently 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 PageEfficiently 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 PageEfficiently 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 StylesEfficiently 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 StylesEfficiently 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 StylesEfficiently 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 StylesEfficiently 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 StylesEfficiently Structure Markup

<html>

<head>

<title>Test</title>

</head>

<body>

…

…

…

</body>

</html>

Always Link JavaScript at End of FileEfficiently Structure Markup

<html>

<head>

<title>Test</title>

</head>

<body>

…

…

…

</body>

</html>

Always Link JavaScript at End of FileEfficiently Structure Markup

<html>

<head>

<title>Test</title>

<script src="myscript.js" … ></script>

</head>

<body>

…

…

…

</body>

</html>

Avoid Linking JavaScript In HeadEfficiently Structure Markup

<html>

<head>

<title>Test</title>

<script src="myscript.js" … ></script>

</head>

<body>

…

…

…

</body>

</html>

Avoid Linking JavaScript In HeadEfficiently Structure Markup

<html>

<head>

<script type="text/javascript">function helloWorld() {

alert('Hello World!') ;}

</script>

</head>

<body>

…

</body>

</html>

Avoid Inline JavaScriptEfficiently Structure Markup

<html>

<head>

<script type="text/javascript">function helloWorld() {

alert('Hello World!') ;}

</script>

</head>

<body>

…

</body>

</html>

Avoid Inline JavaScriptEfficiently Structure Markup

<html>

<head>

<title>Test</title>

</head>

<body>

…

…

…

<script async src="myscript.js"></script>

</body>

</html>

Asynchronously Download ScriptEfficiently Structure Markup

<html>

<head>

<title>Test</title>

</head>

<body>

…

…

…

<script async src="myscript.js"></script>

</body>

</html>

Asynchronously Download ScriptEfficiently 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 CodeEfficiently 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 CodeEfficiently Structure Markup

Remove Duplicate CodeEfficiently 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 FrameworkEfficiently 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 CoolEfficiently Structure Markup

Replace Images with CSS3 GradientsOptimize Media Usage

Replace Images with CSS3 Border RadiusOptimize Media Usage

Leverage CSS3 TransformsOptimize 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 AnimationsKnow 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 MethodsWrite Fast JavaScript

Numbers in JavaScript

• All numbers are IEEE 64-bit floating point numbers- Great for flexibility

- Performance and optimization challenge

31 bits

31-bit (tagged) Integers1 bit

1

31 bits

Object pointer1 bit

032 bits

32 bits

Floats

32-bit Integers

STACK HEAP

FIXED LENGTH, FASTER ACCESS VARIABLE LENGTH, SLOWER ACCESS

Boxed

Avoid creating floats if they are not neededFastest way to indicate integer math is |0

var r = 0;

function doMath(){var a = 5;var b = 2;r = ((a + b) / 2) |0 ; // r = 3r = 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 arithmeticCreate 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 DemandWrite 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 DemandWrite 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 DemandWrite 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 DemandWrite 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 DemandWrite 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 rotationdocument.body.game.getElementById(elID).classList.remove(oldClass)document.body.game.getElementById(elID).classList.add(newClass)...

var element = document.getElementById(elID).classList;

//for each rotationelement.remove(oldClass)element.add(newClass)...

JavaScript

DOM

JavaScript

DOM

Avoid automatic conversions of DOM valuesValues 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 25for (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 EfficientUse DOM Efficiently

function LoopChildren(elm) {

var node = elm.firstChild;

while (node != null) {

node = node.nextSibling;

}

}

Built in DOM Methods Always More EfficientUse DOM Efficiently

function LoopChildren(elm) {

var node = elm.firstChild;

while (node != null) {

node = node.nextSibling;

}

}

Built in DOM Methods Always More EfficientUse DOM Efficiently

function InsertUsername()

{

document.getElementById('user').innerHTML = userName;

}

User .innerHTML to Construct Your PageUse DOM Efficiently

Maintain a Small and Healthy DOMUse DOM Efficiently

Document HTML Body

Element

Element

Element

Element

Element

Element

Element

Element

Element

Six Principles to Remember1) 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 ConceptsHigh Performance Websites

Steve Souders, September 2007

Event Faster Websites: Best Practices

Steve Souders, June 2009

High Performance Browser Networking

Ilya Grigorik, September 2013

JavaScript PatternsHigh 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 GuidanceWindows 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 PerformanceWeb Performance Working Group Homepage

Navigation Timing Specification

Blog Posts1) Measuring Performance with ETW/XPerf

2) Measuring Performance in Lab Environments

3) Browser Subsystems Overview

4) What Common Benchmarks Measure

ToolsWindows Performance Toolkit

Fiddler Web Debugger

Contact

Doris Chen

Twitter: @doristchen

Email: doris.chen@Microsoft.com