将对象推入javascript数组的性能异常

Pushing objects into javascript array performance weirdness

本文关键字：性能 异常 数组 javascript 对象      更新时间：2023-09-26

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

如果我先用400个对象填充boids数组，然后开始动画(使用requestAnimationFrame)，我在Chrome和Safari中得到一个非常不错的40-50fps，在Firefox中大约是30fps。

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

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

知道为什么第一部的表现会好得多吗?

你可以在这里找到两个例子:版本A和版本B

如果您的reuestAnimationFrame回调执行时间超过~10ms, fps下降，您将janks。所以第一种方法可能会满足预算，或者有时会花费更多，因为你没有达到60fps;但是第二种方法在那一帧上肯定超过了~10ms浏览器必须跳过2-3帧来完成回调的执行所以你得到了~20fps;

查看这篇关于google web fundamentals Rendering Performance的文章

相关文章：