AJAX is hot, no one will argue, but what is often the case is your Web 2.0 applications don't perform as well as you had hoped. Learn how a few simple optimizations can help.
A recent presentation by Cyra Richardson, Senior Program Manager Lead on the IE team, at MIX 2007 on Making Ajax Applications Scream on the Client went into detail on how developers should approach the problem of making their applications perform well on the client.
The presentation discusses how to make your AJAX-based applications perform better right now. Although the presentation discusses performance improvements using Internet Explorer, developers should be able to follow these guidelines regardless of the target browser.
These techniques are also independent of the language with which developers choose to write server-side or embedded code. So, if you use ASP.NET technologies with C#, VB.NET, Java or Ruby then these apply.
Optimizing Symbol Resolution
How to speed up in a late binding world. Discusses the scope chain from vars to the DOM itself, and how to make sure that you don’t keep running around the chain.
Ideas for avoiding inefficient JavaScript code applies across all browser platforms beyond Internet Explorer to include Firefox, Safari and others:
JavaScript Code Inefficiencies
To make string manipulation more efficient in the browser:
- Use local vars
- Cache strings from browser objects
- Use Array.join for concatenation
Some other thoughts:
- Don’t use eval unless you really have too. Instead of parameterized code
- SWITCH is costly for large sets, consider a hash table wrapped in a try/catch
- WITH is costly due to symbol lookups everywhere, use manual iterators
- Don’t use your own get/set accessors
Browser Performance Considerations
DOM is expensive in browsers, especially due to the generic nature of the platform. Also watch out for layout improvements such as hover CSS style.
HTTP performance is always a place to really improve performance with some easy optimizations and common-sense approaches:
HTTP Performance
Simplify and reduce:
- Script in on JS file
- Styles in one CSS file
- Fewer, smaller, unscaled images
- Simplify layout
- Use HTTP compression (lots of detail on cache control)
Those developers targeting Internet Explorer or using it as a development tool, there are some tools to use to help:
Tools and Techniques
- Developer Toolbar for Internet Explorer
- Fiddler: HTTP traffic watching
- Ajax View: New from MS Research. On the fly rewrite the JavaScript and add instrumentation code.
Firefox is a popular browser for web developers writing JavaScript and there are many add-ons to help, including:
Although the techniques discussed came from someone on the Internet Explorer team, most tips should work regardless of the browser on the client. JavaScript may have different implementations on each browser platform, but the optimizations apply to all.