2

我正在用 JS 构建一个游戏，我在 Android Chrome 上对其进行了测试，发现它运行不顺畅，我可以看到卡顿。然后，我开始着手解决性能问题，因为我认为我的代码没有优化。

我开始使用 Chrome 的内置 FPS 计调试游戏，并注意到它以 30 FPS 的速度渲染。然后，我开始评论游戏的某些部分，直到我可以达到 60 FPS 但不能。最后，我留下了这段代码：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';

var loop = function() {
  ctx.fillRect(0, 0, 10, 10);
  console.log(new Date().getSeconds());
  
  requestAnimationFrame(loop);
}
loop();

requestAnimationFrame调用一个几乎为空的函数，但仍以 30 FPS 渲染。但是loop函数每秒被调用 60 次。这是显示两者的屏幕截图： 在此处输入图像描述

你也可以在这里测试自己：https ://replit.com/@laltin/DearAmusingPackages

我的问题是为什么调用次数和渲染次数之间存在差异，requestAnimationFrame我怎样才能让它以 60FPS 渲染？

4

1 回答 1

0

根据此处的 MDN 文档：

回调次数通常为每秒 60 次，但根据 W3C 建议，通常会匹配大多数 Web 浏览器中的显示刷新率

因此，回调可能每秒触发大约 60 次，但实际屏幕更新的速率不同。确定android设备实际刷新率的原因似乎有点兔子洞。有设备的规格，可能还有很多其他影响 FPS 的因素。

于 2021-08-31T23:06:35.157 回答