Friday, January 11th, 2008

Making Ajax Applications Scream on the Client

Category: IE, Performance, Presentation

Cyra Richardson, Senior Program Manager Lead on the IE team, gave a presentation at MIX 2007 on Making Ajax Applications Scream on the Client.

The scope of the presentation is to show how to speed things up right now, not in the future.

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.

JavaScript Code Inefficiencies

To make string manipulation more effience in IE:

  • Use local vars
  • Cache strings from IE objects
  • Use Array.join for concatenation

(I prefict that array.join will stick around even when it isn’t faster, just like the equivilent in Java land).

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

IE Performance Considerations

DOM is expensive in IE, especially due to the generic nature of the platform. Also watch out for layout improvements such as hover CSS style.

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)

Tools and Techniques

  • Developer Toolbar
  • Fiddler: HTTP traffic watching
  • Ajax View: New from MS Research. On the fly rewrite the JavaScript and add instrumentation code.

Ajax View

Posted by Dion Almaer at 2:10 pm

3.2 rating from 27 votes


Comments feed TrackBack URI

In addition the use of XSLT can deliver huge performance boosts to HTML generation and rendering over JavaScript. TIBCO General Interface uses a technique to poke values from JavaScript objects into parameters in XSLT (so developers do not have to get into the yuck of XSLT development), then use XSLT/XML merge to generate and update GUIs faster. Essentially the XML/XSL merge process acts as a sort of compiler for these processes and gets the job done faster. It’s one the the things that makes TIBCO GI (after it loads — which does take a second or two more given all that’s in it to deliver full featured ajax apps — not a component or three in an HTML page) run so fast. Of course this means that your data must be in XML, but GI’s data objects can be accessed as both JSON or XML simultaneously.

Comment by khakman — January 11, 2008

This looks very much like last years “recommendations” from the IE team, about not using closures etc. Basically: “gimp your script to accomodate our browser” … after a few years of supporting various generations of IE, you get kind of an ambivalent attitude towards the IE team(s) at MS.

On one hand, they do great work, and I personally can’t wait to play around with an IE version, that can pass the Acid2 test.

On the other hand, the sheer arrogance of some of these guys is just staggering. They keep churning out mediocre code, and expect the rest of the worlds (web)developers to jump through hoops to continue to support the clueless masses that choose IE because someone decides to cash in on their desktop dominance.

Comment by Morgan Roderick — January 11, 2008

That Ajax View thingy crashes IE6… but still pretty neat though…

Comment by Marc — January 11, 2008

This is good stuff straight from the team at MS, I think a lot of the practices are relevant to javascript in general and not specifically just IE’s JScript engine. I also recommend Julien’s presentation as well – all good stuff.

Comment by Schill — January 11, 2008

At this point, the platform, the web browser, should be responding to the (developer) market, not the other way around. They should be saying/thinking “what do you want?” or “how can we make things easier?” and delivering on that.

Comment by Andy — January 11, 2008

@Andy – u r right but in order to know what to expect on IE8 and MS in general its valuable to know their way of thinking… I am past the stage of of hating IE, I just deal with it.
I think that history already showed that MS underestimated the power of the community and their ability to enforce standards over proprietary solutions.
There is several talks about the issue in general on YUI theater, which I would highly recommend also for those interested.

Comment by Frank Thuerigen — January 12, 2008

EDIT: I also have to say, if “document.body.all” is shown in an example of caching a collection of DOM elements, the title of the presentation should have been “How to make AJAX applications scream on the IE” or “How to make AJAX applications whine on the client” ;-)

Comment by Frank Thuerigen — January 12, 2008

Some great tips there. I especially like the one about making references to function calls to use within for loops.

One thing that I do in my applications is use cookies to transfer data, rather than http requests. I’m surprised that this was not mentioned.

One concern I have about speculative downloads is that it could cause serious bandwidth problems, if what is loaded is not actually used.

Comment by balupton — January 12, 2008

When will people please stop spelling it “Ajax” when they mean to spell it “browser scripting”? We are programmers. Spelling counts.

Comment by Peter Michaux — January 12, 2008

What is it with Microsoft and the licensing for these tools. Again we have an example of a potentially very useful tool for web developers everywhere and then this bit of text in the license ruins it all:

“You may not use or distribute this Software or any derivative works in any form for commercial purposes. Examples of commercial purposes would be running business operations, licensing, leasing, or selling the Software, distributing the Software for use with commercial products, using the Software in the creation or use of commercial products or any other activity which purpose is to procure a commercial gain to you or others.”

WTH Microsoft? Why can’t I use this app where it would be the most useful?

Comment by erlando — January 15, 2008

Hi, I don’t understand why the with statement should be so costly. It should just add an object in front of the scope chain.
Is meant that any time an identifier is not present in the object used on the with statement there is one more object to check?
A function is more expensive than a with statement from this point of view.
What is meant with “use manual iterators”?

Comment by Mone — January 22, 2008

Leave a comment

You must be logged in to post a comment.