如何在 Firefox 和/或 Chrome 中测量 FPS 和页面绘制时间？答案

【问题标题】：How to measure FPS & page paint time in Firefox and/or Chrome?如何在 Firefox 和/或 Chrome 中测量 FPS 和页面绘制时间？
【发布时间】：2014-02-12 05:46:02
【问题描述】：

我正在为 HTML5 画布和 HTML5 SVG 项目进行性能测试。由于这些项目以图形为中心并且需要流畅的操作，因此我选择了刷新率 (fps) 和页面绘制时间 (ms) 作为指标。我知道从 javascript 代码计算的值不够有代表性，所以这些值应该取自浏览器本身。因此，像 Mrdoob 的 stats.js 这样的 JavaScript 库不能真正使用（如果我错了，请纠正我）。任何信息将不胜感激。

到目前为止我发现了什么：

Mozilla 火狐：

FPS：windows.mozPaintCount
页面绘制时间：?

谷歌浏览器：

FPS：内置 FPS 计（似乎仅适用于 DOM 元素）
页面绘制时间：内置 PPT-meter（也适用于 DOM 相关的东西）

【问题讨论】：

我不确定，但您能否检查一下 chrome 中的页面速度插件，它可以提供页面加载时间（我认为它包括您正在寻找的 fps、ms 等）和 firebug，以防 firefox。

标签： javascript html performance canvas svg

【解决方案1】：

你可以使用requestAnimationFrame:

(function () {
  var active = false;
  var frames = 0;
  var start;

  var frame = function () {
    frames = frames + 1;
    if (active) {
      window.requestAnimationFrame(frame);
    }
  };

  window.FPS = {
    start: function () {
      active = true;
      frames = 0;
      start = window.performance.now();
      frame();
    },

    end: function () {
      active = false;
      var seconds = (window.performance.now() - start) / 1000;
      var fps = Math.round(frames / seconds);
      alert(fps);
    }
  };
}());

【讨论】：

【解决方案2】：

您也许可以使用window.performance.now()。这个新的 API 旨在用于您需要 sub-ms 次的情况。

它将（打算）为您提供比 ms 分辨率更高的高分辨率时间戳，但并非没有缺点：

Chrome 当前返回毫秒数，因此没有任何增益（现在可能已在 Canary 中修复）
分辨率取决于底层系统

而 mozPaintCount 是一个专有调用，仅适用于 Firefox。

因此，无论您如何扭转和打开它，您都只能走这么远。

但是你可以试试这样的：

function startPaintOperation() {

    var startTime = 0, endTime = 0;

    startTime = performance.now() || new Date().getTime(); // with fallback

    ... paint

    endTime = performance.now() || new Date().getTime();

    return endTime - startTime;
}

如果不使用浏览器的内置工具，我认为您无法做到比这更接近。

更多详情请见specifications here。

希望这会有所帮助。

【讨论】：