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