InfoQ

News

How-to Make your AJAX Applications Scream on the Client

Posted by Robert Bazinet on Jan 14, 2008 09:00 AM

Community
.NET,
Ruby,
Java
Topics
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:

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.

Hmm by Francois Ward Posted Jan 14, 2008 6:50 PM
Re: Hmm by Robert Bazinet Posted Jan 15, 2008 12:52 PM
  1. Back to top

    Hmm

    Jan 14, 2008 6:50 PM 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.

  2. Back to top

    Re: Hmm

    Jan 15, 2008 12:52 PM 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.

Educational Content

Bindings, Platforms, and Innovation

This presentation focuses on the Internet and separating myth from fact, history from the future, and the mundane from the imaginative. Bob Frankston presents a vision of what could and should be.

Orchestrating Long Running Activities with JBoss / JBPM

This article explores the use of JBoss and jBPM to implement design solutions that effectively address the issue of orchestrating long running activities.

Neo4j - The Benefits of Graph Databases

This presentation covers the use of graph databases as an optimal solution for data that is difficult to fit in static tables, rapidly evolving data or data that has a lot of optional attributes.

Realistic about Risk: Software development with Real Options

This session introduces Real Options and shows how it can help in running your project. Real Options is a decision-making process that can be used to manage risk.

Communication Flexibility Using Bindings

This article discusses the use of bindings on services and references (including the instance of non-configured bindings) as the means to implement SCA communications in a Web and SOA environment.

Writing DSLs in Groovy

After a short introduction to DSLs, Scott Davis plays with the keyboard showing how to approach the creation of a DSL by typing working snippets of Groovy code that get executed.

Scaling Agile with C/ALM (Collaborative Application Lifecycle Management)

IBM Rational and InfoQ present, Scaling Agile with C/ALM, an eBook showing organizations how to become “finely tuned software delivery machines” by enabling team integration and scaling.

Concurrent Programming with Microsoft F#

Amanda Laucher presents a real life enterprise application written in F#. She shows actual code snippets, explaining design decisions and suggesting how to use some of the F# constructs.