Chrome中的高精度FPS测量

Question

我注意到Chrome DevTools /菜单/更多工具/渲染/ FPS仪表中提供的FPS仪表似乎无法提供准确的FPS测量。

平移矢量地图时有时会显示60 FPS，但感觉并不流畅。在其他时候，例如，当地图更简单时，感觉确实是60 FPS-会有明显的差异。快速浏览Google后，我发现了这个问题https://bugs.chromium.org/p/chromium/issues/detail?id=421776，但没有解决方法。

问题是，有没有一种方法可以准确地测量Chrome中的FPS？

Answer 1

看这里：https://github.com/mrdoob/stats.js

这是那里最准确的一个。

这是概述：

stats.js

JavaScript性能监视器

此类提供了一个简单的信息框，可帮助您监视代码性能。

• FPS 在最后一秒内渲染的帧。数字越高越好。
渲染框架需要
• MS 毫秒。数字越小越好。
• MB 分配的内存字节数。 （使用--enable-precise-memory-info运行Chrome）
• 自定义：用户定义的面板支持。

屏幕截图

用法

var stats = new Stats();
stats.showPanel( 1 ); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );

function animate() {

    stats.begin();

    // monitored code goes here

    stats.end();

    requestAnimationFrame( animate );

}

requestAnimationFrame( animate );

书签

您可以使用以下书签将此代码添加到任何页面：

javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()