Question

我一直无法使用canvas元素，似乎找不到问题。

最初加载页面时，每5-15秒就会发生一次减速。但是，在与朋友聊天并与朋友聊天之后，奇迹般地停止了展示缓慢的下降。

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

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

我最初只有一个球弹跳，但我决定投入1000个球试试表现，对不起：P

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

警告警告癫痫警告 Link to live demo

Here's the code

Answer 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像素，您的增量时间也将以秒为单位表示（值大约为.016或.033）

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

更重要的是，您不必在页面加载后立即开始全速渲染。在游戏的情况下，他们将在实际游戏渲染之前拥有自己的加载屏幕和标题屏幕，玩家将无法分辨出30 fps和60 fps之间的差异。

Canvas / Javascript仅在开始时定期减速

1 个答案: