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.