将对象推入javascript数组性能怪异

我正在使用html5画布创建一个群集模拟，并试图从javascript中挤出每一点性能。我注意到一个“奇怪的”性能提升/打击取决于我何时/何地向系统添加BOID

如果我先用400个对象填充boids数组，然后启动动画（使用requestAnimationFrame），我在Chrome和Safari中可以获得相当不错的40-50fps，在Firefox中大约是30fps

但是，如果在动画期间（例如，通过在屏幕上拖动），boids数组中填充了对象（再次填充400个对象），则无论浏览器如何，性能始终会下降到15-20fps左右

在这两种情况下，我都使用

boids.push（newboid（））

填充boids数组。在第一种情况下，我从for循环中执行，在第二种情况下，我从mouseDown事件处理程序执行

你知道为什么第一个的表现会更好吗

您可以在此处找到这两个示例：

---

并且

如果您的

reueStationFrame

回调执行所需的时间超过~10ms fps，您会发出刺耳的声音。因此，第一种方法可能满足预算要求，或者有时需要稍微多一些，因为你没有获得~60 fps；但第二种方法肯定超过了该帧上的~10ms，浏览器必须跳过2-3帧才能完成回调的执行，因此您可以获得~20fps

---

在谷歌Web基础< /P>中查看这篇文章，BOIDS在第二个版本中是否会均匀分布，从而导致每个BOID有更多的邻居需要考虑？第二个版本最终会平滑到更高的帧速率吗？它们最终都会在每个boid看到的邻居数量方面达到平衡。版本B并没有随着时间的推移变得更平滑。我的假设是垃圾收集和数组大小调整都有问题，但事实似乎并非如此。对于性能1）永远不要在init之外创建对象（没有新的，没有{}），一切都在原地进行。2） 对于群集更新，请使用旋转索引，而不是数组。不要每次计算总和：减去当前值，随机化，增加索引，如果需要，旋转索引。通过快速查看，您将节省大量的时间和g.c.：您的boids伪类上有一些繁重的方法。您可以将这些方法移到boids原型中。这样，每个新的boid实例就不需要自己的（繁重的）方法副本。相反，每个实例都共享原型方法。顺便说一句，你的应用在不同的浏览器中有着非常不同的性能水平：Chrome做得很好，FF还可以，即在两个版本中都很快降到10-15fps。再一次…快速看一眼：-）游戏炼金术士，我不想听起来很傻，但是你能详细说明旋转指数而不是数组吗？