Monday, November 20th, 2006

Measuring the aggregate performance of Ajax applications

Category: JavaScript, Library, Performance

Ryan Breen spoke at The Ajax Experience on Ajax performance, and just released a preview of Actual Experience XF with Actual Experience Lite.

Instrumentation

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.

Example

Ryan instrumented W3C DOM vs. innerHTML table building and you can see the results.

The graphs are created with Dojo Chart, and Ryan even benchmarked that.

DOM innerHTML benchmark

Posted by Dion Almaer at 8:11 am
Comment here

++++-
4.2 rating from 26 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.