Building High Performance Web Applications and Sites

Layout, Rende
ring, Formattin
16% g, …

JScript & DOM
84%

Layout, Rende
ring, Formattin
g, …
33%

67%
JScript & DOM

CSS performance
Optimizing symbol resolution
Javascript coding inefficiencies
HTTP performance

table tr td ul li {color: green;}
li#pass {color: green;}

ul li {color: purple;}
ul > li {color: purple;}

Minimize included styles
Use less-complicated selectors
Don’t use expressions
Minimize page re-layouts

CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance

DOM
Global

Prototype
Intermediate
…
… Cost

Instance
Local

function WorkOnLocalVariable()
{
localVariable = foo();
return ( localVariable + 1 );
}

function WorkOnLocalVariable2()
{
var localVariable = foo();
return ( localVariable + 1 );
}

function BuildUI()
{
var elm = document.getElementById('ui');

// Clear existing contents
elm.innerHTML = ''; 7 innerHTML
References
// Generate UI
elm.innerHTML += BuildTitle();
+=
elm.innerHTML += BuildBody();
+=
elm.innerHTML += BuildFooter();
+=
}

function BuildUI2()
{
var elm = document.getElementById('ui');

1 innerHTML
// Generate UI
Reference
var contents = BuildTitle()
+ BuildBody()
+ BuildFooter();

// Replace existing contents with UI
elm.innerHTML = contents;
}

function CalculateSum()
{
// Retrieve Values
document.body.all
var lSide = document.body.all.lSide.value;
document.body.all
var rSide = document.body.all.rSide.value;

// Generate Result
document.body.all.result.value = lSide
document.body.all
+ rSide;
}

function CalculateSum2()
{
// Cache Element Collection
var elms = document.body.all;

// Retrieve Values
elms
var lSide = elms.lSide.value;
elms
var rSide = elms.rSide.value;

// Generate Result
elms
elms.result.value = lSide + rSide;
}

function IterateWorkOverCollection()
{
var length = myCollection.length;

for(var i = 0; i < length; i++)
{
Work
Work(myCollection[i]);
}
}

function IterateWorkOverCollection2()
{
var funcWork = Work;
var funcWork = Work;
var length = myCollection.length;

{
funcWork
funcWork(myCollection[i]);
}
}

http://channel9.msdn.com/pdc2008/TL24/

CSS Performance Considerations
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance

http://wiki.ecmascript.org/doku.php?id=es3.1:json
_support
http://www.json.org/json_parser.js

switch(option)
{
case 1: …
case 2: …
case 3: …
…
case 1000: …
}

var lookup = {
1: function(){…}
2: function(){…}
3: function(){…}
…
1000: function(){…}
}

try {
lookup[option]();
lookup [option]();
} catch(e) {
// Default operation
}

var property = foo();

this.getProperty = function()
{
return property;
}

this.setProperty = function(value)
{
property = value;
}

Trident (MSHTML)

DOM

JScript Engine

function LoopChildren(elm)
{
var nodes = elm.childNodes;
var length = nodes.length;

{
var node = nodes[i];
nodes[i];
…
}
}

function LoopChildren2(elm)
{
var node = elm.firstChild;

while(node != null)
{
…
node = node.nextSibling;
}
}

function doValidation2()
{
// Retrieve the required elements by using Selectors
// Selects all form fields with 'required' classes
var reqs = document.querySelectorAll
document.querySelectorAll(quot;.requiredquot;);

// Set the flag to false by default
var missingRequiredField = false;

// Validate that the form data is not empty
for (var i = 0; i < reqs.length; i++) {
if (reqs[i].value == quot;quot;)
missingRequiredField = true;
}
}

Use the native JSON object
Turn large switch statements into lookups
Avoid property access methods
Minimize DOM interaction
Use querySelectorAll for groups

GET / HTTP/1.1 HTTP/1.1 200 OK
Accept: */* Content-Length: 3479
Accept-Language: en-us Expires: -1
UA-CPU: x86 Date: Tue, 24 Apr 2007 21:30:46 GMT
Content-Type: text/html; charset=utf-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0) Pragma: no-cache
Host: www.live.com Content-Encoding: gzip
gzip

<head>
<title>Test</title>
<style type=quot;text/cssquot;>
.a, .b { width: 10; height: 10 }
.a, .b { background-image: quot;abc.gifquot; }
.a { background-position: 0 0}
.b { background-position: 0 -10 }
.b { background-position: 0 -10 }
</style>
</head>
<body>
…
<div class=quot;aquot;></div> Item 1
<div class=quot;aquot;></div>
<div class=quot;bquot;></div>
<div class=quot;bquot;></div> Item 2
…
</body>

Request Response
GET /images/banner.jpg HTTP/1.1 HTTP/1.1 304 Not Modified
Host: www.microsoft.com Content-Type: image/jpeg
If-Modified-Since: Last-Modified:
Wed, 22 Feb 2006 04:15:54 GMT Wed, 22 Feb 2006 04:15:54 GMT

Request Response
GET /images/banner.jpg HTTP/1.1 HTTP/1.1 200 OK
Host: www.microsoft.com Content-Type: image/jpeg
Expires: Fri, 12 Jun 2009 02:50:50 GMT

Request Response
GET /images/banner.jpg HTTP/1.1

No response:
Request serviced from
cache

www.fiddler2.com

http://www.fiddler2.com/fiddler2/addons/neXper
t.asp

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions,
it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Building High Performance Web Applications and Sites

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Building High Performance Web Applications and Sites

Similar to Building High Performance Web Applications and Sites (20)

More from goodfriday

More from goodfriday (20)

Recently uploaded

Recently uploaded (20)

Building High Performance Web Applications and Sites