IE 9 and measuring web page performance using window.performance

When optimizing web pages it is useful to measure how long various functions and events take to occur on a page so you can be sure you are appended pictures of your Cat to the DOM as quick as possible.

However it’s actually quite difficult to measure the time various functions and events take to run. Most current methods of measuring time involve getting the current time at various points on a page and then performing simple date arithmetic. However even measuring this way can of course skew the test results (although it should be fairly consistent). Additionally John Resig wrote an interesting post after he discovered some browsers only update their system times around every 15ms (http://ejohn.org/blog/accuracy-of-javascript-time/) so using this method means that you are not going to see micro changes anyway.

The W3c has proposed a standard API for measuring performance (you can read it here: http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html). This isnt actually finished yet so expect there to be a few changes.

We can play with this new api in IE9 (Chrome and the latest stable of Firefox dont seem to support this yet).

To use the new API we retrieve the  window.performance.timing object (note some tutorials such as http://blogs.msdn.com/b/ie/archive/2010/06/28/measuring-web-page-performance.aspx still refer to this as windows.msPerformance but a quick walk of the window object will show we know better..).

The below example shows the syntax:

var timingObj = window.performance.timing;
var navStartTime = new Date(timingObj.navigationStart);

Currently the documentation around some of these properties is a little scarce and its a bit confusing as to what each are actually measuring so I will follow this up as I discover more.

Advertisements