Is it possible to detect processing power for use in progressive enhancement in web development?

Question

Sometimes I need to add animation effects that are out of the scope of CSS3 like effects that are coupled to scroll position etc.

Often, this works just fine but I ran into an awkward problem lately. Im trying to animate a blur effect that occurs when the user scrolls down a page, using -webkit-filter: blur().

This is easy enough to implement with some JavaScript, but I found that animating blur really weighs down on the processor of the user. The animation ran ok on my brand-new blazing fast mac-book, but failed to run smoothly on older machines (or even browsers on my machine other than Google Chrome).

The implementation details are not important but I found this problem begs the question:

Can I transparently detect (roughly perhaps) the clients processing power and use this knowledge to turn on or off certain features in my code as to ensure smooth operation and animation?

I know JavaScript animation libraries exist that do really great stuff without using up much processing power, but that's not what I'm after. I could think of other use-cases that are not animation-related.

Margetts

As you may not be able to satisfactorily detect performance (or available bandwidth) until the next generation of media queries - an alternative might be to offer a user setting which allows users to toggle the effects on and off. I'd be tempted to default off except at higher desktop resolutions with high pixel densities. These are most likely to be recent, higher specification devices. – Stem

Answer 1

If you know the upper limit for performance (you mention it doesn't work on some of the latest browsers on your new laptop), then you can use the user agent information to get browser and OS information, turning off the feature for versions that are older than your upper limit. It's an overly cautious approximation, you can always use your judgement when setting the thresholds.

Also, see this related question: How can I test the user's computer's processing power using Javascript?

Abcoulomb

dang! missed that one. Ok, but I think a lot of people would agree that user agent sniffing is the least transparent method of all in the realm of browser feature detection. The answer to that other question is what I expected the best solution would be (I hoped for something better though). I guess I'll just stick to cheaper animations then. – Margetts

Browser sniffing doesn't provide any idea on the performance of the CPU, e.g. how to tell if Mac OS X 10.9.1 is running on a 6 core dual CPU Mac Pro with dual graphics cards or a 5 year old MacBook with integrated graphics. – Groundsill