javascript - Chrome DevTools 内存不一致

Question

我正在使用以 60 FPS 运行的 JavaScript 构建游戏，并注意到发生了大量垃圾收集（每 1.5 秒 7.2 MB，请参阅下面的 Chrome DevTools），这对帧速率有显着影响。

我使用分配时间线来查看每一帧添加到内存中的内容。正如您在下面看到的，每帧分配了 4.1 kB。所以我希望看到每 1.5 秒收集 369 kB 垃圾。

为什么两者之间存在数量级差异？我一直在使用分配时间线来减少使用的内存（最初是每帧 18 kB）。但是，在查看“性能”选项卡时，这几乎是零影响。

有什么方法可以知道什么是垃圾收集，因为分配时间线似乎不正确？

附加信息

• 这是游戏中两个时刻之间的堆快照比较。这似乎也不一致，它包括很多我不希望每一帧都改变的东西。

• 我尝试在我的游戏中删除对象的数量（在一个数组中），这确实对性能选项卡产生了很大的影响。但我真的很想在 DevTools 的某个地方看到这个数组，以便我可以优化它。

• 我尝试在屏幕上禁用渲染，但这没有影响。所以GC来自游戏代码。

• 在 Safari 中测量显示与 Chrome 的性能选项卡类似的结果。

标签： javascriptmemorygoogle-chrome-devtools

Answer 1

我想我找到了解决这个问题的方法：我删除了引擎中的循环，并在按下一个键时运行每一帧。

这样我可以拍摄一个堆快照，只进行一帧，然后快速拍摄另一个快照（在 GC 启动之前）。“快照之间分配的对象”视图似乎更加一致，并且显示了 JS 引擎的内部数据（如函数范围）占用的大量内存。