Developing High Performance JavaScript, AJAX, and Layout for Microsoft Explorer 8

Cyra Richardson
Senior Program Manager Lead – Microsoft Corp.
cyrar@microsoft.com


JavaScript Coding Inefficiencies (IE7 Only):

Background: String concatenation
Recommendation: Array.join for string concatenation instead of doing a plus equals on a large string and continue adding to it.


IE8 JavaScript Improvements:

Strcat is faster for large and small strings better than ArrayJoin
Strings are not flattened until the are pass to DOM
Str canlls may flatten strings
Array lookup is faster
Array.Push and Array.Pop are faster


Background: Costs for using EVAL

Download
Build string
Construct new script execution context
Lookup string
Parse
Execution

JavaScript – SWITCH becomes costly for large sets
Problem: Switch processing time grows linearly
Consider: Hash Table wrapped in Try, Catch
Why: JS does not optimize SWITCH

JavaScript – WITH
Problems: Increased symbol lookup time everywhere

Better control over Jscript Closures

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




IE Performance Considerations:

Instantiating DPM functions
Problems: Costly (in CPU cycles)
Consider: Get ElementById, QuerySelectAll, Node.NextSibling
Why: Platform Genericness

Accessing/Traversing DOM properties

Traversing Sibling Nodes

Accessing DOM
* DOM methods are faster to get items than InnerHTML
* GetElementByID better than walking the HTML
* QuerySelectorAll

First visit interactions
Reoccurant visit interactions
Request from Server/Download from Cache
Cache content for subsequent visits
Conditional HTTP Requests
Plain HTTP Request
Pragma: no-cache
Recommendation: For subsequent Visits – Cache Control
• Time Conditional--If-modified-since: datetime
• ETAG Conditional--If-none-match: etagvalue


Tools And Techniques

• Developer Toolbar
• Fiddler—XML HTTP request monitor
• AJAXView--by Microsoft Research. Like Fiddler and watches your javascript functions and tells you how much time each step takes.


“High Performance Websites”-- (great book) by Steve Souders

Solving Performance Problems:

• Identify the type of performance problem
• Network/Bandwidth – use Fiddler
• JavaScript – use DevToolbar
• Aggressive DOM access – using DevToolbar

Reduce, Simplify, Re-factor
Reduce the bytes sent between client and server
Simplify your code to avoid costly JavaScript constructs
Cache DOM properties and function pointers

Use Try/Catch instead of a big SWITCH