BT

How-to Make your AJAX Applications Scream on the Client

| by Robert Bazinet Follow 0 Followers on Jan 14, 2008. Estimated reading time: 2 minutes |

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 Stage
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.

Tell us what you think

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

Email me replies to any of my messages in this thread

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.

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.

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

Email me replies to any of my messages in this thread

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

Email me replies to any of my messages in this thread

2 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT