为 JS 和 CSS3 动画显示 FPS 的 JS

Question

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

我已经找到了一些在 JS 中获取 FPS 计数器（米）的解决方案，但是每次调用渲染函数时我都需要调用它。 如果动画完全是在 javascript 部分完成的，那就没问题了。 如果我决定从使用 JS 制作动画转向 CSS3，据我所知，没有办法检测到该事务的速度有多快。

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

任何想法，建议，任何指向我正确方向的东西都值得赞赏。 谢谢。

Answer 1

所以我找到了解决方案。 它被称为 FPSMeter，由 David Corvoysier 开发。 您可以在此处找到该库以及更多相关信息。

基本上他想出了一个好主意，只需在页面正文中附加 1 个 CSS 动画元素。 然后他使用过渡来为该元素设置动画，并在每个 requestAnimationFrame 上尝试计算该元素的计算位置。 然后他每一秒都简单地计算元素占据的不同位置的数量。 基于此，他获得了 FPS。