将对象推入javascript数组表现怪异

时间:2014-05-21 08:11:37

标签: javascript arrays performance canvas requestanimationframe

我正在使用html5画布创建一个flock模拟,我试图从javascript中挤出每一点性能。我注意到了一个奇怪的"性能提升/打击取决于我在系统中添加boids的时间/地点。

如果我首先用400个对象填充boids数组,然后启动动画(使用requestAnimationFrame),我在Chrome和Safari中获得了非常不错的40-50fps,在Firefox中获得了大约30fps。

但是如果boids数组在动画期间(例如通过在屏幕上拖动)填充了对象(其中400个),那么无论浏览器的性能总是下降到大约15-20fps。

在这两种情况下,我都使用boids.push( new Boid() );来填充boids数组。在第一种情况下,我是在for循环中完成的,在第二种情况下,我是从mouseDown事件处理程序中完成的。

任何想法为什么第一个的表现会好得多?

您可以在此处找到这两个示例: Version AVersion B

1 个答案:

答案 0 :(得分:0)

如果您的reuestAnimationFrame回调执行所花费的时间超过〜10ms fps下降,则您会发呆。因此,第一种方法可能满足该预算,或者有时会花费更多,因为您无法获得〜60fps;但是第二种方法肯定会超过该帧的〜10ms,浏览器必须跳过2-3个帧才能完成该回调的执行,因此您可以获得〜20fps;

在google网络基础上查看这篇文章Rendering Performance