This document provides suggestions for optimizing web application and site performance. It discusses minimizing CSS and JavaScript file sizes, simplifying selectors, avoiding expensive operations like DOM lookups and expression evaluation, leveraging browser caching, image optimization techniques like sprites, and reducing blocking of page loads by scripts. The key recommendations are to simplify code, optimize only when needed, and consider maintainability.

2. 2

3. 3

4. Building High-Performance Web
Applications and Sites
John Hrvatin, Lead Program Manager
johnhrv@microsoft.com
4

5. Session Objective(s):
How to make your site faster today
Principles to remember when building sites
Key Takeaways
Suggestions help in ALL browsers
No magic solutions
Consider maintainability
5

6. “…We are like dwarfs on the shoulders of
giants, so that we can see more than they,
and things at a greater distance, not by
virtue of any sharpness of sight on our part,
or any physical distinction, but because we
are carried high and raised up by their giant
size.quot;
- Bernard of Chartres 1124
6

7. IE8 CPU usage: Top 100 Sites
Layout, Rende
ring, Formattin
16% g, …
JScript & DOM
84%
7

8. IE8 CPU usage: Top AJAX Sites
Layout, Rende
ring, Formattin
g, …
33%
67%
JScript & DOM
8

9. CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
9

10. CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
10

11. Minimize included styles
Unused styles increase download size
Browser must parse and match all selectors
Failures are expensive!
11

12. Simplify selectors
Complex element selectors are slow
When possible:
Use class- or ID-based selectors
Make element selectors as simple as possible
Use child instead of descendent selectors
Do not mix RTL and LTR styles
Minimizing included styles makes this easier
12

13. Simplify selectors
table tr td ul li {color: green;}
li#pass {color: green;}
ul li {color: purple;}
ul > li {color: purple;}

14. Don't use expressions
Slow – evaluated frequently
Not supported in IE8 Standards Mode!
14

15. Minimize Page Re-layouts
Poor user experience as content moves
Browser performs unnecessary work
15

16. 16

17. Takeaways
Minimize included styles
Use less-complicated selectors
Don’t use expressions
Minimize page re-layouts
Simplify!
17

18. CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
18

19. Lookup chains
Scope Prototype
var name obj.name
DOM
Global
Prototype
Intermediate
…
… Cost
Instance
Local
19

20. Local variables
function WorkOnLocalVariable()
{
localVariable = foo();
return ( localVariable + 1 );
}

21. Local variables: Declare them as local
function WorkOnLocalVariable2()
{
var localVariable = foo();
return ( localVariable + 1 );
}

22. Implicit lookups
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();
+=
}

23. Implicit lookups: Batch changes
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;
}

24. Multiple DOM lookups
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;
}

25. Multiple DOM lookups: Cache references
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;
}

26. Function lookups
function IterateWorkOverCollection()
{
var length = myCollection.length;
for(var i = 0; i < length; i++)
{
Work
Work(myCollection[i]);
}
}

27. Function lookups: Cache pointers
function IterateWorkOverCollection2()
{
var funcWork = Work;
var funcWork = Work;
var length = myCollection.length;
for(var i = 0; i < length; i++)
{
funcWork
funcWork(myCollection[i]);
}
}

28. Takeaways
Watch for expensive name lookups
Cache repeated lookups to local variables
Optimize only when needed
Consider maintainability
28

29. 29

30. CSS Performance Considerations
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
30

31. Parsing JSON
With eval
Requires new script execution context (slow)
Less secure
With custom library
More secure, but even slower
31

32. Parsing JSON: Use the native methods
Built-in JSON methods:
JSON.parse()
JSON.stringify()
toJSON() on prototypes of Date, Number, String,
and Boolean
Native equivalent of the reference parser from
http://wiki.ecmascript.org/doku.php?id=es3.1:json
_support
As safe as http://www.json.org/json_parser.js
but faster
32

33. 33

34. The switch statement
switch(option)
{
case 1: …
case 2: …
case 3: …
…
case 1000: …
}

35. The switch statement: Use a lookup table
var lookup = {
1: function(){…}
2: function(){…}
3: function(){…}
…
1000: function(){…}
}
try {
lookup[option]();
lookup [option]();
} catch(e) {
// Default operation
}

36. Property access methods
var property = foo();
this.getProperty = function()
{
return property;
}
this.setProperty = function(value)
{
property = value;
}

37. Property access methods: Use direct access
this.property = foo();

38. Property access methods
Instantiating DOM functions
Problems: Costly (in CPU cycles)
Consider: Caching function pointers,
batching changes
Why: Generic Script Interface
38

39. Minimize DOM interaction
Scope Prototype
var name obj.name
DOM
Global
Prototype
Intermediate
…
… Cost
Instance
Local
39

40. Minimize DOM interaction
Scope Prototype
var name obj.name
DOM
Global
Prototype
Intermediate
…
… Cost
Instance
Local
40

41. Minimize DOM interaction
Trident (MSHTML)
DOM
JScript Engine
41

42. Minimize DOM interaction
function getElementsByClassName(className, node, tag) {
…
var elements = node.getElementsByTagName(tag);
var elements = node.getElementsByTagName(tag);
var pattern = new RegExp(quot;(^|s)quot; + className +
quot;(s|$)quot;);
elements.length
for(var i = 0, j = 0; i < elements.length; i++) {
elements[i]
if (pattern.test(elements[i].className)) {
classElements[j] = elements[i];
j++;
}
}
return classElements;
}

43. Minimize DOM interaction
function getElementsByClassName(className, node, tag)
{
…
var results = node.getElementsByTagName(tag);
var elements = new Array(results.length);
var elements = new Array(results.length);
while (length--) elements[length] = results[length];
while (length--) elements[length] = results[length];
var pattern = new RegExp(quot;(^|s)quot; + className +
quot;(s|$)quot;);
for(var i = 0, j = 0; i < elements.length i++) {
elements.length;
elements[i]
if (pattern.test(elements[i].className)) {
classElements.push(results[i]); j++;
}
} return classElements;
}

44. Smart use of DOM Methods
Smart use of DOM methods can minimize
overall DOM interaction
nextSibling() better than childNodes[i]
querySelectorAll() better for element groups
44

45. Smart use of DOM methods
function LoopChildren(elm)
{
var nodes = elm.childNodes;
var length = nodes.length;
for(var i = 0; i < length; i++)
{
var node = nodes[i];
nodes[i];
…
}
}

46. Smart use of DOM methods
function LoopChildren2(elm)
{
var node = elm.firstChild;
while(node != null)
{
…
node = node.nextSibling;
}
}

47. Use querySelectorAll for groups
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;
}
}

48. Takeaways
Use the native JSON object
Turn large switch statements into lookups
Avoid property access methods
Minimize DOM interaction
Use querySelectorAll for groups
Optimize only when needed
Consider maintainability
49

49. CSS Performance
Optimizing Symbol Resolution
JavaScript Coding Inefficiencies
HTTP Performance
50

50. Typical visit
Request from Server / Cache
JavaScript
CSS
Images
HTML
In Browser
Layout
Execute Script
Additional downloads
51

51. HTTP compression: Use it
Response
Request
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
52

52. Scaled images
<html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- icon.gif dimensions: 500 x 400 -->
<img src=quot;icon.gifquot; width=quot;50quot; height=quot;40quot; />
…
</body>
</html>

53. Scaled images: Use sized copies
<html>
<head>
<title>Test</title>
</head>
<body>
…
<!-- icon2.gif dimensions: 50 x 40 -->
<img src=quot;icon2.gifquot; width=quot;50quot; height=quot;40quot; />
…
</body>
</html>

54. File linking
<html>
<head>
<title>Test</title>
<script src=“1.js” … ></script>
<script src= type=quot;text/javascriptquot;></script>
<script src=“2.js” … ></script>
<link href=“1.css” … ></link>
<link href=“2.css” … ></link>
</head>
<body>
…
</body>
</html>

55. File linking: link one CSS file and one JS file
<html>
<head>
<title>Test</title>
<script src=“1+2.js” … ></script>
<script type=quot;text/javascriptquot;></script>
<link href=“1+2.css” … ></link>
</head>
<body>
…
</body>
</html>

56. Many images
<html>
<head>
<title>Test</title>
</head>
<body>
…
<img src=quot;a.gifquot; /> Item 1
<img src=quot;b.gifquot; /> Item 2
…
</body>
</html>

57. Many images: Combine and mask (sprites)
<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>

58. Repeat visits
Conditional HTTP Requests
Plain HTTP Request
Pragma: no-cache
Time Conditional
If-modified-since: date,time
Provide cacheable content
Time Conditional
Expires: date,time
Max-age: #seconds
59

59. Repeat visits: Use conditional requests
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
60

60. Repeat visits: Provide cacheable content
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
61

61. Script blocking
<html>
<head>
<title>Test</title>
<script src=“1+2.js” … ></script>
<script type=quot;text/javascriptquot;></script>
</head>
<body>
…
</body>
</html>

62. Script blocking
<html>
<head>
<title>Test</title>
</head>
<body>
…
<script src=“1+2.js” … ></script>
</body>
</html>

63. Tools
Fiddler
Inspect network traffic
www.fiddler2.com
neXpert
Fiddler plug-in to aid performance testing
http://www.fiddler2.com/fiddler2/addons/neXper
t.asp
64

64. Takeaways
Reduce the number of requests
Combine external scripts, styles, and images
Use caching
Reduce the size of requests
Use HTTP compression
Use conditional requests
Avoid blocking factors
Put script at end of HTML
65

65. Identify the performance bottleneck
Network / Bandwidth – using Fiddler
JavaScript – using Developer Tools
Aggressive DOM access – using Developer Tools
Reduce, Simplify, Re-factor
Reduce the bytes sent between the client/server
Simplify your code to avoid costly JavaScript and CSS
constructs
Cache DOM properties and function pointers
66