如何跟踪 Javascript / Chrome 中的内存分配？

Question

显然，已经有人问了很多关于此问题的问题，但我找不到答案，所以如果这确实是重复的，请关闭此问题并将我重定向到答案。

我正在开发一个浏览器游戏，并试图通过使用预先分配的数组、不返回对象、避免分配的语言函数、尽可能使用数字等来将分配保持在最低限度。

尽管如此，在进行 10 秒性能记录后，我在 Chrome 中的内存图表如下所示：

我的问题很简单：如何找出导致每帧分配的原因？当然，还有比仅仅在代码库上进行文本搜索以查找“已知嫌疑人”（例如new从函数返回对象、创建新数组等）更好的方法。

理想情况下，我还能够确定是什么导致了最多的分配以及对这些尖峰和锯齿波的贡献最大，因此我可以首先从容易实现的目标开始。这可能吗？

Answer 1

Chrome 开发者工具在内存选项卡下提供了更多内存分析选项。

除了更多人熟悉的快速内存快照之外，您还可以运行两种不同类型的录音。分配采样用于对每个函数的内存分配（在整个记录过程中收集）和分配检测进行简单粗略的概述，这将为您提供一个时间表来检查一段时间内的分配情况。不要忘记选中“记录分配的堆栈跟踪”（因为这就是您最初要查找的内容），然后您将找到导致在“分配堆栈”下的底部面板中创建选定对象的堆栈跟踪标签。

查看图表，我预计您不会在时间线上看到任何分配峰值，堆增长率似乎相当恒定。峰值可能是由于垃圾收集率造成的，而锯齿波要么是游戏的滴答率（如果您的游戏有同步中央循环），要么是分析器的采样率。只是需要考虑的事情。仍然可能有一些内存优化的空间。