Chrome 内存占用量攀升至 3.554 GB，尽管 JS 堆内存为 20 MB

Question

我的应用程序由一个表组成，该表长时间接收和显示实时数据，因此不断在 DOM 中创建和销毁表行。

我注意到应用程序消耗的内存有所增加。尽管堆内存从 8.6 MB 增加到 20 MB，但 Chrome 任务管理器上的浏览器内存占用量（或 Windows 性能监视器上的提交字节数）增加到 3.55 GB，并且不断增加。这最终会导致浏览器崩溃。

从堆中我看到 Strings 的百分比不断上升，达到了 49%。除此之外，我无法创建堆转储，可能是由于内存占用较大。

问题：我还应该尝试优化堆吗？我无法理解为什么当堆大小只有 20 MB 时浏览器需要提交 3 GB 以上并最终崩溃。

我通过设置对 null 的引用并优化箭头函数的闭包来清除以前的一些泄漏。但与堆大小相比，浏览器占用空间似乎很大。这让我想知道我是否走在正确的方向上。

在 Edge 和 Chrome 浏览器中都可以看到这一点。

Answer 1

当我看到“在 DOM 中不断创建和销毁表行”时，我想到了分离的 DOM 树内存泄漏。

只有当页面的 DOM 树或 JavaScript 代码都没有引用 DOM 节点时，才能对 DOM 节点进行垃圾回收。当一个节点从 DOM 树中删除但某些 JavaScript 仍然引用它时，该节点被称为“分离”。分离的 DOM 节点是内存泄漏的常见原因。

我建议您可以按照此文档的使用堆快照发现分离的 DOM 树内存泄漏中的步骤来调试问题。