Friday, February 12th, 2010

DOMTiming interface being implemented in Chromium and Firefox

Category: Performance

<p>When testing our applications for performance, how do we go about timing various parts and pieces? Normally we are forced to manually get Date.now / new Date().getTime() times and futz around. It isn’t possible to get at timing info for important lifecycle events (e.g. can only start timing once JS is loaded.

This is where the Web Timing API comes into play, which seems to be in the early process of implementation in Chromium and Firefox.

With the API there is access to window.timing and element.timing.

An example of using the global window.timing:

javascript
< view plain text >
  1. var navigation = timing[0];
  2. if (navigation.document.load > 0) {
  3.   var page_load_time = navigation.document.load - navigation.navigationStart;
  4.   if (navigation.navigationType == navigation.NAVIGATION_LINK) {
  5.     console.log (page_load_time);
  6.   }
  7. }

Within a timing result you have access to a slew of information:

javascript
< view plain text >
  1. interface DOMTiming {
  2.   readonly attribute unsigned longlong fetchStart;
  3.   readonly attribute unsigned longlong domainLookupStart;
  4.   readonly attribute unsigned longlong domainLookupEnd;
  5.   readonly attribute unsigned longlong connectStart;
  6.   readonly attribute unsigned longlong connectEnd;
  7.   readonly attribute unsigned longlong requestStart;
  8.   readonly attribute unsigned longlong requestEnd;
  9.   readonly attribute unsigned longlong responseStart;
  10.   readonly attribute unsigned longlong responseEnd;
  11.   readonly attribute unsigned longlong load;
  12.   readonly attribute unsigned longlong parseStart;
  13.   readonly attribute unsigned longlong parseEnd;
  14. };

I am sure that Steve is happy :)

Posted by Dion Almaer at 6:23 am
8 Comments

++++-
4.4 rating from 16 votes

8 Comments »

Comments feed TrackBack URI

Awesome! This is going to come in really handy.

So, when’s it coming out in IE? :)

Comment by Skilldrick — February 12, 2010

that doesnt seem to be implemented in my Chrome (mac, latest version) nor FF 3.5). Is it just me or do we have an idea of when they will implement that API ?

Comment by jpvincent — February 12, 2010

Maybe it’s in the developer channel

Comment by HiveHicks — February 12, 2010

@HiveHicks
Its not present in the nightly builds either.

Comment by V1 — February 12, 2010

which seems to be in the early process of implementation in Chromium and Firefox.

So, it’s not there yet ;-)

Comment by BtM909 — February 12, 2010

Looks promising.

In the meantime firefox and the webkit browsers have…

console.time(‘thisProcess’);
console.timeEnd(‘thisProcess’)

…which I love

Comment by AngusC — February 12, 2010

@AngusC
Wow, I’ve never known about those. I was recently doing some performance work and that certainly would have made things easier for me.

Comment by MattCoz — February 12, 2010

thanks for providing information about it. I don’t know about it so thanks again.

Comment by aamy — February 15, 2010

Leave a comment

You must be logged in to post a comment.