javascript - 以编程方式测量 Canvas 动画的性能

Question

我正在为 JavaScript 性能竞赛构建一个测试平台。其中一项任务要求参赛者优化负责处理 Canvas 动画的 JavaScript 代码。提交解决方案后，服务器使用 PhantomJS 运行它并在动画播放 20 秒后读取平均 FPS 数。问题是优化和未优化代码的速度都是 3-4FPS。这使得无法判断代码是否得到改进。

几个事实:

• 我 100% 确定 phanotmjs 正在正确渲染动画(完成几个屏幕截图)
• 在浏览器中，未经优化的代码以 13FPS 运行，优化后以 58FPS 运行
• phantomjs 不支持 requestAnimationFrame 所以我不得不使用 polyfill
• 我正在使用下面的代码来测试 FPS 数

框架计数器.js

 var frameCounter = (function() {
    var frames = 0;
    var startTime = new Date();

    function bump() {
        frames++;
        window.requestAnimationFrame(bump);
    }

    bump();

    return {
        getFPS: function() {
            var time = (new Date() - startTime) / 1000;

            return (frames/time).toPrecision(4);
        }
    }
 })();

我的问题是:如何以编程方式衡量 Canvas 动画的性能？

Answer 1

几个月前我写了一个小脚本来专门测量 requestAnimationFrame 的 FPS 和消耗。

我不确定它是否能 100% 帮助您，但它可以给您一个很好的指导。

用法很简单:

• 在代码中的某处初始化仪表，然后循环指定要用作仪表的 div 元素
• 确保获取 requestAnimationFrame 给出的参数，因为这会告诉您花费了多少时间(如果没有，它将回退到使用日期/时间方法)。
• 使用此参数对其方法进行简单调用。

绿色表示您在最佳 FPS(大多数情况下为 60)内运行。黄色表示循环消耗的时间超过大约 16.7 毫秒，并且速率下降到大约一半。橙色表示您使用的预算超过两倍等等。

仪表使用加权 FPS 为您提供更准确的测量。

示例:

var meter = new animMeter('divElementId');

function animate(timeArg) {

    /// funky stuff here

    meter.update(timeArg);

    requestAnimationFrame(animate);
}

A demo of this in action can be found here .

您会在几乎已预最小化的底部找到仪表本身的代码。随意复制和粘贴。它带有 MIT 许可证。

和往常一样，当使用这样的仪表时:它们自己会消耗几毫秒来更新图形，从而引入微小的误差范围。

另一件需要注意的事情是，rAF 将始终运行以尝试达到 60 FPS，因此仪表永远无法测量比这更高的帧速率。

如果您需要测量更高的帧率，您可以调用不带参数的更新方法并使用 setTimeout 而不是 rAF，它会使用日期/时间来测量性能 - 稍微不准确但你可以获得更高的 FPS 数字(这是任意帧，因为监视器无法显示比同步更多的帧。通常为 60 fps)。