gpt4 book ai didi

javascript - 将对象插入 javascript 数组性能异常

转载 作者:行者123 更新时间:2023-12-04 17:21:34 25 4
gpt4 key购买 nike

我正在使用 html5 canvas 创建一个群模拟,我正试图从 javascript 中榨取每一点性能。我注意到一个“奇怪的”性能提升/打击取决于我何时何地向系统添加类群。

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

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

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

知道为什么第一个的性能会好得多吗?

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

最佳答案

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

查看有关 google 网络基础知识的这篇文章 Rendering Performance

关于javascript - 将对象插入 javascript 数组性能异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23777578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com