Detecting when Javascript is performing poorly

Question

I'm working on a webapp in jquery that, on older machines or machines without much resources, may perform poorly. To get around this I'd like to make a degraded version that disables some of the features, particularly those that rely on large images.

How can I tell if my app is running poorly on the user's computer in jquery or javascript in general? I just need a way to call a function that will degrade the app. (especially when the user may run low on system memory)

The only way I can think of is for manual user intervention, but the option would add clutter for users that don't need it and users that do need it may not notice it.

Thanks!

Answer 1

Could you just code a javascript function that runs a controlled test, timing the result, then use this as a basis for degrading the site?

Maybe a smaller version of one of the tests out of SunSpider, for example

Answer 2

There's no way to tell before your javascript starts running. You could scatter some profiling Date objects around like so:

var timeTaken;
var start = +new Date();  // cast right now to a number

for (i = 0; i < 1000000000; i++)  // Some seriously intensive loop
{
    // ...
}

timeTaken = (+new Date()) - start;  // calculate the total time taken

if (timeTaken > 500)  // if time taken is longer than 500ms
    switchToBasic();

You should bear in mind that there's other things that can affect a browser's performance. If a user was already doing some intensive CPU operations this could cause their machine to switch to the basic mode even if they have a fairly capable computer.

Answer 3

Like the others say, run controlled calculation tests and measure how much time they take. But instead of doing it only once, do a number of short tests. If it happens even one time out of ten that you get a fast result, you know you have a fast machine.

The fast machine may have been swamped down by other tasks, but a slow machine can not suddenly become fast for a while.

Depending on your application, you can also add hints to the user where he can find a faster browser. Browsers with JIT compilation of Javascript are dramatically faster.

Answer 4

If you really need to be certain it works on low end computers (and don't have any old computers lying around), why not try using a virtual machine, like VirtualBox or similar. By running a os inside a virtualbox might actully in it self slow it down a lot, thus simulating slower hardware. I'm pretty sure most virtual machines allow you to tweak how fast the virtual cpu is...

---

As for automatic detection of when the client is a slow computer, I'm not sure you can reliably detect that, without adding tests that further slows down the machine.

I'd suggest you start with creating a link somewhere wich allows the user to toggle "slow computer mode". This way patient users with slow computers can sit and wait a lot to get the fancy features if they want to or they can switch them off if they're impatient. This is a lot easier to implement, and you might find that the testers/users actually is satisfied with that solution... :)

If you do decide to make some autodetection, please allso have a manual override, it's really annoying being served dumbed-down data because an autodetection has failed, without the option to change it.

Answer 5

Have you already done everything to make the application faster?

For instance, you could run the application through the Firebug profiler, and examine the performance of the whole system using YSlow.

Answer 6

Gmail shows a loading bar, with a "switch to HTML-only" link. You could try something along those lines. (Also, if it takes a long time to load, the "switch to HTML-only" link becomes more prominent. It pops up to the middle of the screen.)

Answer 7

You could set a timer to show a dialog which allows the user to switch to basic mode. showSlowDialog wouldn't stop the process of the slow operation either as it's running in a different thread (running concurrently).

function showSlowDialog() {
   if(confirm("switch to slow?")) {
       switchToSlow();
   }
}

var timer = setTimeout("showSlowDialog()", 5000); // show dialog in 5 seconds
SomeSlowishOperationThatMayOrMayNotTakeSomeTime(); // do long operation
clearTimeout(timer); // clear timer.