How can I test the user's computer's processing power using Javascript?

Question

I made a pretty CPU intensive webpage with lots of CSS3 and Javascript. I want to use Javascript to test if the user's computer is capable of handling the scripts. I think a possible method is to run some CPU intensive scripts and see how long it took. However, I don't know how to actually implement this.

Here's the webpage: http://leojiang.me/ (3D cube only viewable in webkit browsers).

Tetratomic

Quite honestly, if this is a concern, you should redesign. FYI.. I had no issue with the page. Although I don't think it performs the way you expect it to. – Smatter

Yeah, just remove that javascript-thing and leave the plain simple clean page. If you absolutely want to show-off the cube thing, add a not-so-hidden button somewhere to let the user trigger that and see the magic -- but only if he really wants to – Sachikosachs

gs.statcounter.com/… - if you are trying to impress your clients, do note that not all people use CSS3/HTML5 supported browsers. chances are, they might not see it at all, especially those corporate guys. plus, when benchmarking/profiling, your hardware can also affect results. it means that it may perform on your machine, but for others, it might cause a crash. – Raglan

Answer 1

You can profile how long it takes to render a frame or a couple of frames that should give you and idea of what fps would be on the client.

var StartTime = new Date().getTime();
BenchMarkTestFunction(); // render frame for example
var EndTime = new Date().getTime();
var ElapsedMilliseconds = EndTime - StartTime;

var AcceptableTime = 1000; // one second
var IsGoodPerformance = ElapsedMilliseconds < AcceptableTime; // some number being acceptable performace

if(!IsGoodPerformance) {
  alert("Sorry your browser is not good enough to run this site - go somewhere else");
}

You can determine what the AcceptableTime should be by testing your site on different browsers/devices and seeing how it performs and what the value for ElapsedMilliseconds was.

Lookin

Answer 2

Barring setting localstorage to run a script (essentially hacking a user's machine --please don't do this), I don't believe you can do anything except find the OS and architecture. I feel as if I've seen this in flash, but strictly js will not find the speed. I agree with Scott. If your potential users could have issues, redesign. Otherwise, my i5 was entirely happy with the site. Good luck!

Urga

Answer 3

There are ways to assess the CPU or graphics capabilities of the host computer using javascript. For example, you could run a set of iterations using those operations and measure the time from beginning to end.

In general, it's not that useful to just try to measure a single CPU performance number as it's much more important to measure exactly what your critical operations are.

For example, if you're concerned with a certain type of graphics rendering, you can do a sample animation and see how many frames can be rendered in a particular time.

Lindeman