What can you do about slow AJAX applications? Take a deep technical dive into optimizing your Web code to run faster and more efficiently

2. Cyra Richardson
Senior Program Manager Lead
Microsoft Corporation

3. Making apps better today in IE
No magic solutions
Requires page script modification

4. MS Research Preview: AJAX View
Fiddler
More on tools at the end of the talk

6. Lexical scope used to create scope chain
Scope chain used as map to resolve symbolic reference
Local vars resolved from most specific to least
Worst case is expando variable creation
DOM is at the end of the scope chain

7. function WorkOnLocalVariable()
{
local_variable = ObtainValueFromDOM();
return (local_variable + 1);
}

8. function WorkOnLocalVariable()
{
var local_variable = ObtainValueFromDOM();
return (local_variable + 1);
}

9. function BuildUI()
{
var baseElement = document.getElementById(‘target’);
baseElement.innerHTML = ‘’; // Clear out the previous
baseElement.innerHTML += BuildTitle();
baseElement.innerHTML += BuildBody();
baseElement.innerHTML += BuildFooter();
}

10. function BuildUI()
{
var elementText = BuildTitle() + BuildBody() + BuildFooter();
document.getElementById(‘target’).innerHTML = elementText;
}

11. function CalculateSum()
{
var lSide = document.body.all.lSide.value;
var rSide = document.body.all.rSide.value;
document.body.all.result.value = lSide + rSide;
}

12. function CalculateSum()
{
var elemCollection = document.body.all; // Cache this
var lSide = elemCollection.lSide.value;
var rSide = elemCollection.rSide.value;
elemCollection.result.value = lSide + rSide;
}

13. function IterateWorkOverCollection()
{
var length = myCollection.getItemCount();
for(var index = 0; index<length; index++)
{
Work(myCollection[index]);
}
}

14. function IterateWorkOverCollection()
{
var funcWork = Work;
var length = myCollection.getItemCount();
for(var index = 0; index<length; index++)
{
funcWork(myCollection[index]);
}
}

15. function IterateWorkOverCollection()
{
var parentElement = document.getElementById(‘target’);
var length = myCollection.getItemCount();
for(var index = 0; index<length; index++)
{
parentElement.appendChild(myCollection[iterate]);
}
}

16. function IterateWorkOverCollection()
{
var funcAppendChild = document.getElementById(‘target’).appendChild;
var length = myCollection.getItemCount();
for(var index = 0; index<length; index++)
{
funcAppendChild(myCollection[index]);
}
}

18. var smallerStrings = new Array();
var myRatherLargeString = quot;quot;;
var length = smallerStrings.length;
for(var index = 0; index<length; index++)
{
myRatherLargeString += smallerStrings[index];
}

19. var smallerStrings = new Array();
var myRatherLargeString = quot;quot;;
smallerStrings.push(quot;<div id=quot;quot;);
smallerStrings.push(quot;sampleIDquot;);
markupBuilder.push(quot;quot;>quot;);
smallerStrings.push(quot;sampleTextquot;);
smallerStrings.push(quot;</div>quot;);
…
var myRatherLargeString = smallerStrings.join(‘’);

20. • Perform string operations using local vars
• Cache strings from IE objects
• Use Array.join for concatenation

21. • Download
• Build string
• Construct new script execution context
• Lookup string
• Parse
• Execution

22. • Problems
Script injection increases security risk
•
Setup and Parsing takes time
•
Error conditions sometimes overlooked
•
• Solution
Anticipate and scope code for specific problems
•
Use data to drive code
•

23. • Javascript - SWITCH becomes costly for large sets
Problem: Switch processing time grows linearly
•
Consider: Hash Table wrapped in Try, Catch
•
Why: Javascript does not optimize Switch
•
• Javascript - WITH
Problems: Increases symbol look up time everywhere
•
Consider: Use manual iterators
•
Why: Adds entry to the scope chain
•

24. • Property Accessor Functions (get/set)
Problems: Increases cycles to access values
•
Consider: Directly modifying variables
•
Why: Inserts an additional symbol lookup
•

26. Instantiating DOM functions
Problems: Costly (in CPU cycles)
•
Consider: Be Informed/Intentional
•
Why: Platform Genericness
•
Accessing / Traversing DOM properties
Problems: Each access is costly
•
Consider: Caching values/function pointers
•
Why: Platform Genericness
•

28. Download from Server
Javascript
CSS
Images
HTML
Layout
Execute Script

29. Script in one JS file
Styles in one CSS file
Fewer, Smaller, unscaled images
Simplify layout
Use HTTP Compression

30. Request Response 2
1
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

31. Load from cache or download from Server
Javascript
CSS
Images
HTML
Layout
Execute Script

32. Conditional HTTP Requests
Plain HTTP Request
Pragma: no-cache
Time Conditional
If-modified-since: datetime
ETAG Conditional
If-none-match: etagvalue

33. 1 2
Request Response
GET /images/banner.jpg HTTP/1.1 HTTP/1.1 200 OK
Host: www.bayden.com Date: Wed, 25 Apr 2007 18:30:10 GMT
Content-Type: image/jpeg
ETag: quot;40c7f76e8d30c31:3d5quot;
Last-Modified: Thu, 12 Jun 2003 02:50:50 GMT
4
3
Request Response
GET /images/banner.jpg HTTP/1.1 HTTP/1.1 304 Not Modified
If-Modified-Since: Thu, 12 Jun 2003 02:50:50 GMT Date: Wed, 25 Apr 2007 18:30:10 GMT
If-None-Match: quot;40c7f76e8d30c31:3d5quot;
Host: www.bayden.com

34. 1 2
Request Response
GET /images/banner.jpg HTTP/1.1 HTTP/1.1 200 OK
Host: www.bayden.com Date: Thu, 26 Apr 2007 00:20:42 GMT
Content-Type: image/jpeg
Last-Modified: Thu, 12 Jun 2003 02:50:50 GMT
Expires: Fri, 12 Jun 2009 02:50:50 GMT
4
3
Request Response
GET /images/banner.jpg HTTP/1.1
No Response:
Request Serviced from
cache

35. Common Cache-Control Headers
public
private
no-cache
no-store
max-age=#seconds
must-revalidate

36. Developer Toolbar
Fiddler
AJAX View

37. Cyra Richardson
Senior Lead Program Manager
Microsoft Corporation - Internet Explorer Team

38. Emre Kiciman
Researcher
Microsoft Research

39. Goal: Improve dev visibility into web app behavior
Cross-browser, no client-side software changes
Fine-grained, code-level monitoring
Flexible instrumentation: performance, state, etc.
Approach: “On-the-fly” JS rewriting adds instrumentation only when/where it is needed
Status: Tech preview release coming soon
Demo’ing now at Hands-on-Lab
http://research.microsoft.com/projects/ajaxview/
Future Directions:
Integration into IE developer toolbar
Integration into server-side tools to let dev see real-user experience

41. Identify the type of performance problem
Network / Bandwidth – using Fiddler
Javascript – Using AJAX View
Aggressive DOM access – Using AJAX View
Reduce, Simplify, Re-factor
Reduce the bytes sent between the client/server
Simplify your code to avoid costly Javascript constructs
Cache DOM properties and function pointers

42. Fiddler - www.fiddler2.com
AJAX View – http://research.microsoft.com/projects/ajaxview/
IE Blog - http://blogs.msdn.com/ie
Cyra Richardson – Cyrar@microsoft.com

44. © 2007 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.