使用requestanimationframe，分析显示超过80%的时间处于空闲状态，仍然达到4fps。为什么？(/how要修复？)

Question

我有一个简单的画布游戏。它的架构使用一个简单的requestAnimationFrame循环来更新状态，然后呈现到画布上(简单！)。它在桌面+ iOS上运行得很好，但在android上的chrome上，它运行得很糟糕。

下面是一个循环，例如：

var tick = function()
{
  requestAnimationFrame(tick,canvas);
  cur_scene.tick();
  cur_scene.draw();
}

所以我启动了远程分析器，记录了一个快速会话，在(任何给定的)1秒内，它显示~.82s空闲(.11s脚本、.04s 'other‘、.02绘制、.005渲染)。

它还显示每帧~.1s (火焰图上连续Animation Frame Fired条目之间的间距)。但是火焰图像(与其他测量结果一致) 80%是空的吗？

所以我不知所措--我该怎么做才能让它以更高的帧率呈现？我是否错误地读取了诊断信息？我是否错误地构造了requestAnimationFrame循环？

编辑:这是一些性能诊断的注释图片(通过在我的android手机上录制远程会话获得)

​

Answer 1

我认为您可以尝试将对requestAnimationFrame()的调用放在方法的末尾，如下所示：

var tick = function()
{
  cur_scene.tick();
  cur_scene.draw();
  requestAnimationFrame(tick,canvas);
}

否则，您可能会再次进入循环，除了再次请求动画帧之外，没有绘制任何内容。当您检查以下示例时，它们还会在调用requestAnimationFrame()之前先对对象进行更改：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

上述文档在以下文本中对此进行了说明：

该方法接受一个回调作为参数，在重新绘制之前调用。..。每当您准备好更新屏幕上的动画时，都应该调用此方法。