Search code examples
javascriptbenchmarkinggraceful-degradation

Check to see if system is able to display JS effects smoothly


I am wondering if there's an easy way to implement a quick benchmark on a browser for rendering speed?

It is nice to have spiffy animation effects, but only if the machine can handle it. With SVG and all the effects jQuery has given the masses there is the possibility of displaying large amounts of data visually, and animated. However, there's no simple way (that I can find yet) to check and see if the user-agent should be delivered the 'flashy animated svg', 'static svg' or 'tabled' version of the data.

Thank you


Solution

  • The only way I know of do this is to actually run a representative animation and measure it's speed, either in time to render x frames or in total frames per fixed time. The animation libraries in both jQuery and YUI adapt the number of frames that they render based on the speed of rendering each frame as they go. You can look at how they do that to get some ideas how to measure this or if you're using one of those libraries, you may even be able to get the info out of them after an animation.

    You could run this test animation and then cookie the result and then only rerun the test animation when you don't find the cookie. Or, you could run the desired animation in the normal course of your app, but measure how well it worked and if it was too slow or jerky, then cookie that you need to use something quicker next time.