Question

我正在进行HTML5 canvas＆amp; amp;的性能测试。 HTML5 SVG项目。由于项目以图形为中心并且需要平稳运行，因此我选择了刷新率（fps）和页面绘制时间（ms）作为度量标准。我知道从javascript代码计算的值不够具有代表性，因此这些值应该从浏览器本身获取。因此，像Mrdoob的stats.js这样的javascript库无法真正使用（如果我错了，请纠正我）。任何信息将不胜感激。

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

Mozilla Firefox：

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

谷歌浏览器：

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

Answer 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);
    }
  };
}());

Answer 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。

希望这有帮助。

如何衡量FPS＆amp; Firefox和/或Chrome中的页面绘制时间？

2 个答案: