the next web now

Layout, Rende
ring, Formattin
16% g, …

84% JScript & DOM

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

Global DOM

Intermediate Prototype
… Cost …

Local Instance

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');

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

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

function CalculateSum()
{
// Retrieve Values
var lSide = document.body.all
document.body.all.lSide.value;
var rSide = document.body.all
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
var lSide = elms
elms.lSide.value;
var rSide = elms
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
Accept-Encoding: gzip, deflate Content-Type: text/html; charset=utf-8
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.

the next web now

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie the next web now

Ähnlich wie the next web now (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

the next web now