Ajax Performance

If you are reading this post, you are contributing to a benchmark

In several earlier posts, I talked about the increasing migration of complexity to the edges of the network, to within the web browser. Today, tools to manage and understand that complexity and how it relates to real user experience don’t really exist, and that’s a problem we have been thinking about for the past year or so.

We realized that the best way to understand what is happening inside the end user’s browser is to be inside the end user’s browser, so we are building a JavaScript based technology, dubbed Actual Experience XF, which does just that. I previewed this approach during my presentation at the Ajax Experience, but now I’m finally allowed to demonstrate it publicly.

An early demo, which I am calling Actual Experience Lite until my marketing department punches me in the head, is available at aelite.ajaxperformance.com. To instrument a page for collection of metrics, you first include a small .js file in HEAD. Out of the box, the tag will track the DOM Ready and onload times as well as additional metadata (browser type and version number, etc).

The tag also provides 3 JavaScript functions — nameEvent, startInterval, and endInterval — which can be used to add timing instrumentation anywhere within your client side code. The first, nameEvent, defines a point-in-time event, while the latter two are used to measure a span of time. Here’s a simple use case:

 var xhReq = createXMLHttpRequest();
 xhReq.open("GET", "someGet.aspx?giveMe=stuff&iWant=stuff", true);
 xhReq.onreadystatechange = onSomeResponse;
 startInterval('some request');
 xhReq.send(null);

 function onSomeResponse() {
   if (xhReq.readyState != 4)  { return; }
   endInterval('some request');
   var serverResponse = xhReq.responseXML;
   // do a bunch of stuff with the xml response
   nameEvent('finished response parsing');
 }

This example would create two events: an interval event called ’some request’ with a start time and a duration, and a point in time event called ‘finished response parsing’ with a start time and no duration. All start times are relative to the load of the aelite.js tag.

Code samples are all well and good, but real world data is what keeps my 3 readers coming back. In the hopes of providing a valuable service to the community, I instrumented a copy of the W3C vs. innerHTML table building benchmark from quirksmode. I embedded my aelite-ified benchmark as a hidden iframe in the footer of this blog, so any visit to any page contributes to the benchmark. Results are available here.

I’m hoping that the aggregation of hits over time from a variety of browsers will give us a more meaningful understanding of the costs of different scripting techniques, and I will use this platform to build a suite of interesting benchmarks over time. Suggestions are always welcome, of course.

All of the graphs are created client side by Dojo Chart, packaged as a kitchen-sink build plus either the svg (Mozilla/Opera) or vml (IE) packages. The charting page itself uses aelite, so any visit to a chart page is also a contribution to a benchmark of Dojo Chart. Since the Dojo libs [can] have a very robust girth (350kB or thereabouts [when packaged in a completely unoptimized fashion for the purposes of establishing a worst-case benchmark]), I instrumented the charting page to measure the time it takes for the browser to parse the entire dojo-[svg,vml].js. I also added an interval measurement around the render time for the chart. It will be interesting to watch performance trends as I track new Dojo releases.

I will be at Web Builder 2.0 in Las Vegas, December 4-6, presenting on the 5th and conducting a full day workshop on the 6th. The workshop will include hands on labs covering the instrumentation approach, so I plan to have many more samples available in the coming weeks.

[Update] I have replaced the dojo-[svg,vml].js with a single dojo.js provided by Alex Russell. It includes both renderers and is less than half the size of my previous build. Feel free to pound away at the charting to give us some nice comparison data