1

我在使用 canvas 元素时遇到了问题，似乎无法找到问题所在。

最初加载页面时，每 5-15 秒发生一次减速。但是，在浏览了一段时间的 Facebook 并与朋友聊天后，它奇迹般地停止了减速。

我的朋友也看到了周期性的减速，他们使用 chrome/firefox

我不知道发生了什么！我正在阅读内存泄漏/堆分析，但我很难找到问题所在。

我最初只有一个球弹跳，但我决定放入 1000 个球来尝试测试性能，对不起：P

EDIT1：好的，我尝试在 Firefox 上运行相同的代码（我一直在使用 chrome），并且球在 Firefox 上的移动速度明显变慢减去我在 chrome 上看到的可怕的口吃......是什么导致浏览器使用不同的球的速度？

警告 警告 癫痫警告 现场演示链接

这是代码

4

1 回答 1

1

因为您正在使用请求动画帧，所以它会尝试达到 60 fps，如果不能，它将满足 30 fps，直到它可以提供 60 fps。所以减速是你的画布以 30 fps 运行，而跳到 60 fps 会使事情看起来加速。

开始时您只能达到 30 fps 的原因可能会有所不同。就我而言，我的计算机功能强大，但我有多个显示器，我只是在新显示器上的新窗口中打开了示例，我怀疑我的操作系统一次只能将 1 个显示器限制为 60 fps，除非我全屏显示在占用所有 3 个显示器的游戏中。但这不是你的问题，我只是用它作为一个例子，说明为什么你需要在各种设置上自己分析和运行性能测试，因为有很多事情可能会导致性能问题。

您感觉到“减速”和“加速”的原因之一是因为您正在逐帧更新位置，但帧之间的时间从 33 毫秒到 16 毫秒不等，具体取决于当前帧速率是多少. 建议让您的所有更新函数使用增量时间（或自上一帧以来经过的时间）作为更新位置的量度。

你有什么：

Ball.prototype.update = function() {
  this.x += this.velocity.x;
  this.y += this.velocity.y;
}

我们想在这里包含一个增量时间

Ball.prototype.update = function(deltaTime) {
  this.x += this.velocity.x * deltaTime;
  this.y += this.velocity.y * deltaTime;
}

这里唯一的区别是你必须用时间来表达你的速度。例如，您的速度将表示为每秒 100 个像素，而您的 delta Time 也将以秒表示（值约为 0.016 或 0.033）

这不会修复 30 fps，但它会让你的球以一致的速度移动。当您第一次加载页面时，浏览器需要加载您包含的所有其他脚本，解析和评估它们，并且在某些情况下会触发一些垃圾收集（就像包含的 jQuery 一样）。如果您不需要 jQuery 或其他此类附加文件，则可以避免包含它们。

更重要的是，您不必在页面加载后立即开始全速渲染。就游戏而言，他们将在实际游戏渲染之前拥有自己的加载屏幕和标题屏幕，玩家无论如何都无法区分 30 fps 和 60 fps 之间的区别。

于 2013-01-21T08:28:35.253 回答