简体繁体 English

为 JS 和 CSS3 动画显示 FPS 的 JS

[英]JS that shows FPS for JS and CSS3 animations

原文 2015-08-29 21:50:09 3 1 javascript/ css/ animation/ benchmarking/ frame-rate

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.我正在做一系列测试（小型研究）以查看使用 JS 为对象设置动画或使用 CSS3 设置动画的 JS 之间在流畅动画（通过测量每秒帧数）方面的差异。

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.我已经找到了一些在 JS 中获取 FPS 计数器（米）的解决方案，但是每次调用渲染函数时我都需要调用它。 This would be alright if the animating is done purely on javascript part.如果动画完全是在 javascript 部分完成的，那就没问题了。 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.如果我决定从使用 JS 制作动画转向 CSS3，据我所知，没有办法检测到该事务的速度有多快。

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.我知道对于 webkit 浏览器（在 Chrome 中测试），我可以通过开发人员工具获取此类信息，但由于我还将在其他平台上进行测试，因此我正在寻找通用解决方案。

Any ideas, suggestions, anything that points me into right direction is appreciated.任何想法，建议，任何指向我正确方向的东西都值得赞赏。 Thanks.谢谢。

1 个解决方案

So I have found out the solution.所以我找到了解决方案。 It's called FPSMeter and it was developed by David Corvoysier.它被称为 FPSMeter，由 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.基本上他想出了一个好主意，只需在页面正文中附加 1 个 CSS 动画元素。 Then he uses transitions to animate that element and on every requestAnimationFrame he tries to calculate computed position of that element.然后他使用过渡来为该元素设置动画，并在每个 requestAnimationFrame 上尝试计算该元素的计算位置。 On every second he then simply counts the number of different positions occupied by the element.然后他每一秒都简单地计算元素占据的不同位置的数量。 Based on that he obtains FPS.基于此，他获得了 FPS。