我正在使用html5画布创建一个flock模拟，我试图从javascript中挤出每一点性能。我注意到了一个奇怪的＆＃34;性能提升/打击取决于我在系统中添加boids的时间/地点。
如果我首先用400个对象填充boids数组，然后启动动画（使用requestAnimationFrame），我在Chrome和Safari中获得了非常不错的40-50fps，在Firefox中获得了大约30fps。
但是如果boids数组在动画期间（例如通过在屏幕上拖动）填充了对象（其中400个），那么无论浏览器的性能总是下降到大约15-20fps。
在这两种情况下，我都使用boids.push( new Boid() );来填充boids数组。在第一种情况下，我是在for循环中完成的，在第二种情况下，我是从mouseDown事件处理程序中完成的。
任何想法为什么第一个的表现会好得多？
答案 0 :(得分：0)
如果您的reuestAnimationFrame回调执行所花费的时间超过〜10ms fps下降，则您会发呆。因此，第一种方法可能满足该预算，或者有时会花费更多，因为您无法获得〜60fps；但是第二种方法肯定会超过该帧的〜10ms，浏览器必须跳过2-3个帧才能完成该回调的执行，因此您可以获得〜20fps；
在google网络基础上查看这篇文章Rendering Performance