Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Efficient milliseconds display in HTML [closed]

The goal: find the most CPU efficient way to display the current milliseconds in HTML.

My current solution takes up to 10% CPU computation on my laptop. My current solution: http://dev.timerintab.appspot.com/test/ms

My final goal is to display the milliseconds on a timer.

Update
I changed the test to take an argument for the interval: http://dev.timerintab.appspot.com/test/ms?interval=x where x is the interval in ms.
As one can notice an interval of 100ms makes a visual difference in comparison with an interval of 16ms:
http://dev.timerintab.appspot.com/test/ms?interval=100
http://dev.timerintab.appspot.com/test/ms?interval=16
I can even notice a difference between a 20ms and a 16ms interval.

like image 919
brillout Avatar asked May 01 '26 19:05

brillout


2 Answers

Your display has a refresh rate [probably] of about 60Hz. The human eye sees (consciously, at least) at less than that rate.

So why are you trying so hard to render a changing numerical figure at 1000Hz? Why not round your figure to the nearest 0.01s? This should be a lot less CPU intensive, and actually be more useful to your users who may have more of a shot at actually seeing something.

In fact, in practice, you don't need any greater resolution than 0.1s, which is a doddle.

like image 140
Lightness Races in Orbit Avatar answered May 03 '26 09:05

Lightness Races in Orbit


First, don't display every millisecond -- the human eye can't see every hundredth of a second, milliseconds are simply not possible.

Second, use "getMilliseconds()".

Third, don't create a new date in each call to the function. Have two functions:

var ms = new Date().getMilliseconds()
var interval = 10;
function periodically(){ ms = new Date().getMilliseconds() }

function quickly(){ 
    ms = ms % 1000;
    domEl.innerHTML = ms<100?(ms<10?'00'+ms:'0'+ms):ms; 
    ms+= interval 
}
setInterval( periodically, 500 );
setInterval( quickly, interval );

So, what's happening? Instead of instantiating a date every time, you have a function which syncs a number to the date every half second. You then have a second function which merely increments that number locally. What happens if they get out of sync? Who cares? They'll sync up in a half second anyway and they won't realistically be off by more than anything the human eye can see anyway.

like image 24
cwallenpoole Avatar answered May 03 '26 08:05

cwallenpoole