在 JavaScript 中删除 DOM 节点以节省内存答案

【问题标题】：Deleting DOM nodes in JavaScript to save Memory在 JavaScript 中删除 DOM 节点以节省内存
【发布时间】：2011-02-22 11:53:51
【问题描述】：

我正在使用 Safari 浏览器查看我的网页，该网页包含丰富的 Javascript。我看到 Safari 在查看网页和执行各种操作时会占用大量内存（500-900 MB）。我想知道是否需要删除使用var elem = document.getElementById('Id1'); 创建的DOM 对象以优化内存利用率？如果有其他的指点，请提出建议。还有，我们怎样才能用最简单的方式删除这个 DOM 对象呢？

谢谢悉达多

【问题讨论】：

标签： javascript dom memory

【解决方案1】：

澄清一点。您的示例代码没有创建 DOM 节点；它只是检索对现有节点的引用：

var elem = document.getElementById('Id1');

一旦您可以访问该元素，您可以像这样删除它：

elem.parentNode.removeChild(elem);

【讨论】：

【解决方案2】：

删除 DOM 节点可能没有用，如果您正在创建内存泄漏（它们可能无法从内存中清除）。

如果您在代码中连接 DOM 节点和 javascript 对象（循环引用不会被 DOM 和 JS 垃圾收集器清除），就会发生这种情况。

如果你想摆脱这个问题：

使用提到的工具by this answer
如果您想避免将来发生泄漏并识别这种反模式，请阅读 DOM/JS memory leaks。

【讨论】：

取决于您连接它们的方式。如果它在函数中的某个变量中，那么不会发生任何不好的事情，但是如果它通过在全局中引用节点或以其他可以稍后访问的方式持续存在于内存中，那么它就是一个问题

【解决方案3】：

webkit 检查器有一个用于此类事情的分析器实用程序。我不确定它是否存在于 Safari 版本中，但它肯定存在于 Chrome 版本中。

见this question/answer。

Here 是一个很好的关于使用 Safari Inspector 实用程序的教程。

【讨论】：

感谢您的帮助。我已经在使用这个工具包，但我无法找到检测内存泄漏的确切方法或优化这些内存泄漏的方法。
您可以使用配置文件选项卡来配置页面，并使用配置文件中的“获取堆快照”功能来查看哪些元素、对象、变量正在使用大量内存。