如何找出导致我的 Javascript 使浏览器选项卡崩溃的原因？

Question

我正在使用 Javascript 制作rather extensive game。它是一种允许玩家上传媒体文件并使用它们来创建世界的在线游戏制造商。不幸的是，它很容易在不可预知的时刻崩溃浏览器选项卡。到目前为止，我还没有发现任何规律——有时它会在几分钟内发生，有时它可以运行几个小时而没有问题。

我已尝试在 Chrome 中启用日志记录，但崩溃似乎并未在 chrome_debug 文件中生成错误报告。

我认为这可能是程序使用了过多的内存（鉴于游戏的开放式性质，某些世界可能会涉及下载相当大的数据文件 - 尽管这似乎与崩溃实际发生的时间无关 - 而大型世界却有似乎更容易崩溃，它们并不总是在加载世界数据时崩溃）。

我尝试使用 Electron 将其转换为可执行应用程序，但该应用程序仍然崩溃。如果是内存问题，那不应该发生，对吧？

有什么方法可以找出导致代码崩溃的原因吗？

Answer 1

Javascript 中大多数不可预知的崩溃是由内存泄漏引起的 - 对象仍然存储在内存中并且没有被垃圾收集器拾取。 Javascript 中的每个对象都存储在全局范围内的某个变量中，或者与另一个本身连接到全局范围的对象相关联。当“树”的“分支”被移除且全局范围无法再访问时，垃圾收集器将其销毁。

但是，如果一个对象没有在应该从全局范围中删除时，它会保留在内存中。这通常发生在对象被添加到数组但不再使用时没有从该数组中删除时。随着时间的推移，这些对象会不断累积，直到进程因内存过载而崩溃。

要在 Chrome 中查找内存泄漏，请按 F12 并打开“性能”选项卡。通过随时间记录页面，您可以查看正在使用的内存量。绿线（节点）在这里是最重要的——它指的是内存中对象的数量。如果节点随着时间的推移不断增加（总会有增加和减少，但如果整体水平不断上升），这通常意味着存在内存泄漏。

要查找导致问题的特定对象，请打开“内存”选项卡以获取内存堆的快照或时间线配置文件。这为您提供了在任何给定时间在内存中的特定对象的计数。如果某种对象的数量超过了应有的数量，那就是泄漏的地方。