Detecting when Javascript is performing poorly

javascript, jquery, performance

Solution

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.

Problem

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!

Original source