practical performance tips and tricks to make your html/javascript apps faster
DESCRIPTION
How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.TRANSCRIPT
Blog http://blogs.msdn.com/dorischen
http://blogs.msdn.com/b/dorischen/
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
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: [email protected]