Best approach for creating a time sensitive browse

Question

I have to develop an application that will be required to measure user response time within a series of experiments. This application will be run on approximately 100 computers, thus I had mentioned that a browser based approach might be best to cut down on performing installs and updates. With that said, now that I've read about the accuracy of timers in browsers, specifically javascript timers, I'm learning there can be a delay from a few milliseconds to upwards of 10-15ms. This sort of delay would have a negative impact on the precision of these experiments when users measure their response time to visual queues on the screen.

Is there a known way around this to get precise timers for a web application being run within a browser through javascript? Likewise, some of these experiments require simple 2d animation, such as seeing how long a user can keep their mouse cursor over a rotating cube. I would prefer to use HTML5 and Javascript and we cannot use flash.

Answer 1

Just as @dqhendricks suggests, you should use a new Date object. However, if you need this to be consistent and accurate you'd need this be run on the same computer with the same browser version and nothing running in the background.

Check out this demo in firefox and chrome. Click on the edge and move your cursor out as fast as you can - the lowest I can get in FF is 6MS, the lowest I can get in Chrome is 42MS.

These values can vary even wider between machines. I set up a VM with 512MB of RAM and 50% single core cap, opened up 5 tabs in FF and attempted the test - the lowest I've gotten is 52MS.

So unless you can control the users browser, PC and things running in the background I would not count on the data being accurate.

Answer 2

True you can't rely on a timer's interval, but you can rely on a new Date object. For instance:

var previousTime = new Date().getTime(); // returns milliseconds of "now"

var timer = setInterval( function() {
   var currentTime = new Date().getTime();
   var millisecondsSinceLastUpdate = currentTime - previousTime;
   previousTime = currentTime;
   alert( 'milliseconds since last update: ' + millisecondsSinceLastUpdate );
}, 1 );

Answer 3

If you have new browsers you can use performance.now() which offers more precision than the Date object, but the other performance concerns of using the browser still apply :(

http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now