Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 726
romeovs Avatar asked Jan 30 '14 20:01

romeovs


1 Answers

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?

like image 101
jlewkovich Avatar answered Oct 17 '22 13:10

jlewkovich