不使用 new Date()

这个 API 有几个缺陷，仅用于获取当前日期 + 时间。不用于测量时间跨度。

Date-API 使用操作系统的内部时钟，该时钟不断更新并与 NTP 时间服务器同步。这意味着，该时钟的速度/频率有时比实际时间快，有时慢 - 因此不能用于测量持续时间和帧率。

如果有人更改了系统时间（手动或由于 DST），如果单个帧突然需要一个小时，您至少可以看到问题。或者负时间。但是，如果系统时钟与世界时间同步的速度快 20%，则几乎无法检测到。

此外，Date-API 非常不精确 - 通常远小于 1 毫秒。这使得它对于帧率测量尤其无用，其中一帧 60Hz 帧需要约 17 毫秒。

相反，使用 performance.now()

Performance API 专为此类用例而设计，可等效于new Date(). 只需选择其他答案之一并替换new Date()为performance.now()，您就可以开始了。

资料来源：

同样与 Date.now() 不同的是，Performance.now() 返回的值始终以恒定速率增加，独立于系统时钟（可能手动调整或由 NTP 等软件倾斜）。否则，performance.timing.navigationStart + performance.now() 将大约等于 Date.now()。

https://developer.mozilla.org/en-US/docs/Web/API/Performance/now

对于窗户：

[时间服务] 调整本地时钟频率，使其向正确的时间收敛。如果本地时钟与【准确时间样本】之间的时差过大无法通过调整本地时钟速率进行校正，则时间服务会将本地时钟设置为正确的时间。

https://technet.microsoft.com/en-us/library/cc773013(v=ws.10).aspx

Chrome有一个内置的 fps 计数器：https : //developer.chrome.com/devtools/docs/rendering-settings

只需打开开发控制台 ( F12)，打开抽屉 ( Esc)，然后添加“渲染”选项卡。

在这里，您可以激活 FPS-Meter 叠加层以查看当前帧速率（包括漂亮的图表）以及 GPU 内存消耗。

跨浏览器解决方案： 您可以使用 JavaScript 库 stat.js 获得类似的覆盖：https : //github.com/mrdoob/stats.js/

它还为帧率（包括图形）提供了很好的叠加，并且非常易于使用。

比较 stats.js 和 chrome 开发工具的结果时，两者都显示完全相同的测量结果。因此，您可以相信该库实际上会做正确的事情。

您可以跟踪上次调用 requestAnimFrame 的时间。

var lastCalledTime;
var fps;

function requestAnimFrame() {

  if(!lastCalledTime) {
     lastCalledTime = Date.now();
     fps = 0;
     return;
  }
  delta = (Date.now() - lastCalledTime)/1000;
  lastCalledTime = Date.now();
  fps = 1/delta;
} 

http://jsfiddle.net/vZP3u/

这是另一个解决方案：

var times = [];
var fps;

function refreshLoop() {
  window.requestAnimationFrame(function() {
    const now = performance.now();
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift();
    }
    times.push(now);
    fps = times.length;
    refreshLoop();
  });
}

refreshLoop();

这通过以下方式改进了其他一些：

• performance.now()用于在Date.now()增加精度（如覆盖在此答案）
• FPS 是在最后一秒测量的，因此数字不会如此不规律地跳跃，特别是对于具有单个长帧的应用程序。

我在我的网站上更详细地描述了这个解决方案。

我有一个不同的方法，因为如果你计算 FPS，你会在返回数字时看到这个闪烁。我决定计算每一帧并每秒返回一次

window.countFPS = (function () {
  var lastLoop = (new Date()).getMilliseconds();
  var count = 1;
  var fps = 0;

  return function () {
    var currentLoop = (new Date()).getMilliseconds();
    if (lastLoop > currentLoop) {
      fps = count;
      count = 1;
    } else {
      count += 1;
    }
    lastLoop = currentLoop;
    return fps;
  };
}());

requestAnimationFrame(function () {
  console.log(countFPS());
});

提琴手