Is it possible to determine the computing power for use in progressive improvement in web development?

Question

Sometimes I need to add animation effects that go beyond CSS3 , like scroll effects, etc.

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

This is pretty easy to implement using some JavaScript, but I found that the blur animation really weighs the processor processor. The animation went fine on my new blazing fast poppy book, but it didn’t work smoothly on older machines (or even browsers on mine other than Google Chrome).

Implementation details are not important, but I found that this problem raises the question:

Can I transparently detect (roughly) the processing power of clients and use this knowledge to enable or disable certain functions in my code to ensure smooth operation and animation?

I know that there are JavaScript animation libraries that really do great things without using a lot of processing power, but that's not what I need. I could think of other use cases that are not related to animation.

Answer 1

If you know the performance upper limit (you mentioned that it does not work in some recent browsers on your new laptop), you can use the user agent information to get browser and OS information by disabling the feature for versions older than your upper limit. This is an overly cautious approximation; you can always use your opinion when setting thresholds.

Also see this related question: How to check the health of a user's computer using Javascript?