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

Question

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

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

我认为可能是程序使用了太多内存（考虑到游戏的开放性，有些世界可能涉及下载相当大的数据文件 - 尽管这似乎与崩溃实际发生的时间无关 - 虽然很大世界似乎更容易崩溃，加载世界数据时它们并不总是崩溃）。

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

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

Answer 1

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

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

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

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