Friday, February 12th, 2010
DOMTiming interface being implemented in Chromium and Firefox
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:
var navigation = timing[0];
if (navigation.document.load> 0) {
var page_load_time = navigation.document.load - navigation.navigationStart;
if (navigation.navigationType == navigation.NAVIGATION_LINK) {
console.log (page_load_time);
}
}
if (navigation.document.load> 0) {
var page_load_time = navigation.document.load - navigation.navigationStart;
if (navigation.navigationType == navigation.NAVIGATION_LINK) {
console.log (page_load_time);
}
}
Within a timing result you have access to a slew of information:
JAVASCRIPT:
interface DOMTiming {
readonly attribute unsigned longlong fetchStart;
readonly attribute unsigned longlong domainLookupStart;
readonly attribute unsigned longlong domainLookupEnd;
readonly attribute unsigned longlong connectStart;
readonly attribute unsigned longlong connectEnd;
readonly attribute unsigned longlong requestStart;
readonly attribute unsigned longlong requestEnd;
readonly attribute unsigned longlong responseStart;
readonly attribute unsigned longlong responseEnd;
readonly attribute unsigned longlong load;
readonly attribute unsigned longlong parseStart;
readonly attribute unsigned longlong parseEnd;
};
readonly attribute unsigned longlong fetchStart;
readonly attribute unsigned longlong domainLookupStart;
readonly attribute unsigned longlong domainLookupEnd;
readonly attribute unsigned longlong connectStart;
readonly attribute unsigned longlong connectEnd;
readonly attribute unsigned longlong requestStart;
readonly attribute unsigned longlong requestEnd;
readonly attribute unsigned longlong responseStart;
readonly attribute unsigned longlong responseEnd;
readonly attribute unsigned longlong load;
readonly attribute unsigned longlong parseStart;
readonly attribute unsigned longlong parseEnd;
};
I am sure that Steve is happy :)
Awesome! This is going to come in really handy.
So, when’s it coming out in IE? :)
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 ?
Maybe it’s in the developer channel
@HiveHicks
Its not present in the nightly builds either.
So, it’s not there yet ;-)
Looks promising.
In the meantime firefox and the webkit browsers have…
console.time(‘thisProcess’);
console.timeEnd(‘thisProcess’)
…which I love
@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.
thanks for providing information about it. I don’t know about it so thanks again.