如何获得chrome devtools的平均FPS

Question

我想检索测量的性能记录的平均fps.

到目前为止,我只能通过像这样悬停在帧上来获得每帧的持续时间和帧数:

或者选择框架:

为了获得所有帧的平均fps,我必须手动逐个求和它们,这非常不方便.

---

例如,Firefox devtools显示面板右上角的平均fps.

Answer 1

你可以使用devtools-for-devtools.

1. 将devtools切换到分离窗口模式(单击devtools设置图标,单击"取消停靠"图标).下次您只需按Ctrl- Shift- D切换模式即可.
2. 按调用devtools换devtools Ctrl- Shift-i

• 显示所有帧的FPS:

  UI.panels.timeline._flameChart._model._frameModel._frames.slice(1).map(f => +(1000 / f.duration).toFixed(1))

• 显示平均FPS:

  +UI.panels.timeline._flameChart._model._frameModel._frames.slice(1).map(f => 1000 / f.duration).reduce((avg, fps, i) => (avg*i + fps) / (i+1), 0).toFixed(1)

您可以将此代码保存为devtools Snippets面板中的片段,并在上面的步骤2之后调用它.

Answer 2

我要感谢 @wOxxOm 在上面的答案中指出如何访问 DevTools for DevTools 。

然而，计算平均 FPS 的代码不太正确。例如，如果有一帧需要 1 秒才能渲染，则该帧的 fps 为 1。如果有另一个帧需要花费(1000 / 60)毫秒来渲染，则该帧的 fps 为 60。原始代码将给出(60 + 1) / 2这两个帧的平均 fps，这是不正确的。

正确的平均 fps 是总帧数除以总持续时间。在本例中，它是2 / (1 + 1 / 60)fps。

实现这一点的一种方法是：

function averageFps() {
    let frames = UI.panels.timeline._flameChart._model._frameModel._frames;
    let duration = (frames[frames.length - 1].endTime - frames[0].startTime) / 1000;
    let average = frames.length / duration

    return +average.toFixed(2);
}