Chrome DevTools 内存不一致 附加信息

问题描述

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

>

我已经使用分配时间轴来查看每帧添加到内存中的内容。如下所示，每帧分配了 4.1 kB。所以我希望看到每 1.5 秒收集 369 kB 的垃圾。

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

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

附加信息

• 这是游戏中两个时刻之间的堆快照比较。这似乎也不一致，其中包含许多我不希望每一帧都改变的内容。

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

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

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

解决方法

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

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