BT

InfoQ Homepage News How-to Make your AJAX Applications Scream on the Client

How-to Make your AJAX Applications Scream on the Client

Bookmarks

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.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Hmm

    by Francois Ward /

  • Your message is awaiting moderation. Thank you for participating in the discussion.

    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.

  • Re: Hmm

    by Robert Bazinet /

    Your message is awaiting moderation. Thank you for participating in the discussion.

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

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.