javascript - Chrome 中的高精度 FPS 测量

Question

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

平移矢量图时有时会显示 60 FPS，但感觉不流畅。其他时候，例如本地图更简单时，它确实感觉像 60 FPS - 有明显的差异。经过快速谷歌，我发现了这个问题https://bugs.chromium.org/p/chromium/issues/detail?id=421776 ，但没有解决方案。

那么问题来了，有没有办法准确测量 Chrome 中的 FPS？

Answer 1

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

这是最准确的。

概述如下:

统计.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);})()