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).

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.

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!

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.