javascript - 为 JS 和 CSS3 动画显示 FPS 的 JS

Question

我正在进行一系列测试(小型研究)，以了解使用 JS 为对象设置动画或使用 JS 和 CSS3 设置动画之间的流体动画(通过测量每秒帧数)的差异。

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

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

任何想法、建议，任何能给我指明正确方向的东西，我们都将不胜感激。谢谢。

Answer 1

所以我找到了解决方案。它叫做 FPSMeter，由 David Corvoysier 开发。您可以找到图书馆和更多相关信息 here .

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