2

I'm developing a diagraming tool and need some metrics to test it against. Unfortunately I couldn't find information regarding an average acceptable FPS level for this kind of web apps.

We all know such levels for action games (which is 60fps minimum), 25fps for videostreaming.

Can anyone give me some information reagarding minimal FPS level for drawing web apps? What tools would you recomend to test my app?

  • "We all know such levels for action games (which is 60fps minimum)" - unless you're targeting gamers (as opposite to casuals) - 30 FPS will be the minimum. 60 FPS is recommended, but face it: Plenty of PS3/4/Xbox360/Xbone action games work with 30FPS simply because consoles don't have a computing power to handle 60 FPS. So it'll be ok to run web apps at 30 FPS too. – MarcinWolny Jun 13 '14 at 12:06
  • Sounds reasonable. I also spotted in Google Chrome dev tools a level mark of 30fps when measuring the level of fps on a page – Theo Walcott Jun 13 '14 at 12:15
1

On the jQuery website you can find the following for their interval settings:

This property can be manipulated to adjust the number of frames per second at which animations will run. The default is 13 milliseconds. Making this a lower number could make the animations run smoother in faster browsers (such as Chrome) but there may be performance and CPU implications of doing so.

This makes (1000/13 =) 77 fps, but in my experience you need a good computer to keep the more advanced animation smooth. For a calculationtool I made I set:

Desktop: 15ms = (1000/15 =) 67 fps
tablet and phone: 40ms = (1000/40 =) 25 fps

In this tool I use a loop to increment about 9 numbers to a result (so: 1,2,->,8,9), and animate a svg pie-chart to grow/decrease.
My results are not based on extensive research, but some pc's/devices in my workspace. I suggest you do the same. Just build your page, set it to a setting and test it. The more animation you have, the lower the FPS will be.

Tip: When you can, some css animations are a lot smoother than the javascript animations

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.