How-to Make your AJAX Applications Scream on the Client

Posted by Robert Bazinet on Jan 14, 2008

Sections

Architecture & Design,

Development,

Enterprise Architecture

Topics

Ruby ,

.NET ,

Java ,

Web 2.0

Tags

AJAX ,

Web 2.0

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:

• Firebug
• Web Developer
• DOM Inspector

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.

1. Back to top

   Hmm

   by Francois Ward

   The "Don’t use your own get/set accessors" part confuse me a little, since its coming from Microsoft people: the ASP.NET AJAX toolkit uses custom get/set accessors all over the place... why that decision if its recommended against.

   Reply

2. Back to top

   Re: Hmm

   by Robert Bazinet

   Good question. If you follow the presentation you might get an idea, I personally hadn't thought of it from that aspect.

   Reply

• Older >