JS that shows FPS for JS and CSS3 animations

Question

I'm doing a series of tests (small study) to see the difference in fluid animation (by measuring Frames per second) between using JS to animate an object or JS with CSS3 doing the animating.

I've already found some solutions for getting FPS counter (meter) in JS, but I need to call it every time whenever I call the render function. This would be alright if the animating is done purely on javascript part. If I decide to move from animating using JS to CSS3, to my knowledge there is no way to detect how fast that transaction will be.

I know that for webkit browsers (tested in Chrome) I can get such info through developer tools, but since I will be testing also on other platforms I'm looking for a universal solution.

Any ideas, suggestions, anything that points me into right direction is appreciated. Thanks.

Answer 1

So I have found out the solution. It's called FPSMeter and it was developed by David Corvoysier. You can find the library and more about it here .

Basically he came up with a good idea, to simply append 1 CSS animated element in the body of the page. Then he uses transitions to animate that element and on every requestAnimationFrame he tries to calculate computed position of that element. On every second he then simply counts the number of different positions occupied by the element. Based on that he obtains FPS.