使用 jQuery / .data() 避免内存泄漏答案

【问题标题】：Avoiding memory leaks with jQuery / .data()使用 jQuery / .data() 避免内存泄漏
【发布时间】：2013-11-15 21:17:10
【问题描述】：

我正在使用 jQuery 动态创建 HTML 元素，现在需要针对它们存储 JavaScript 数据。但是，我现在担心内存泄漏，因为我实际上从未对我的对象调用“删除”。我'.append'和'.detach'它们，但从不'.remove'。 jQuery 的文档似乎建议我应该调用 remove 来清理它在对象上的足迹 - 事件、数据等。

这在现代浏览器上是绝对必要的吗，或者对元素的任何引用的消失对我来说会这样做吗？

另一种表达我的问题的方式；这个脚本 sn-p 会泄漏内存吗？

function createElement()
{    
    var newDiv = $("<div>")
       .data("test", "test data")
       .appendTo(document.body)
       .detach();

    setTimeout(createElement, 10);
}

createElement();

就此而言，即使没有 .data() 调用，这是否也会泄漏内存？

我对支持非常旧的浏览器不感兴趣。基本上是 IE9 和更好的。

【问题讨论】：

您可以使用浏览器的开发者工具来监控页面使用的内存。在 Chrome 中，它位于“时间轴”下。
jQuery 创建一个它在内部调用 $.cache 的对象，这是存储您使用 .data() 附加的所有数据的地方，元素本身仅获得一个包含 ID 的新属性用作 $.cache 对象检索数据的键。因此，jQuery 的 remove() 将删除存储在 $.cache 中的所有数据，它会删除所有事件处理程序，并尽最大努力清理您造成的所有混乱。 detach() 显然不会这样做，因为这就是关键，以保持与元素相关联的所有数据。通常你根本不必担心这个，因为它没有那么多 kb
作为旁注，data() 以这种方式工作以确保它不会泄漏内存或导致循环引用问题，而且不，数据不会在现代浏览器中消失（也不会在旧浏览器中消失） ) 因为它由 jQuery 在内部存储在一个特殊的对象中。

标签： javascript jquery dom

【解决方案1】：

来自http://api.jquery.com/jQuery.data/：“jQuery.data() 方法允许我们以一种安全的方式将任何类型的数据附加到 DOM 元素，从而避免循环引用，从而避免内存泄漏。我们可以为单个元素一次一个，或者作为一个集合。”

另外，不要忘记您可以使用 HTML5 的 data-* 属性来存储数据。

【讨论】：

谢谢。似乎我想要这样做的方式会泄漏，但我可以使用 data() 来解决。您知道调用 detach() 而不是 remove() 是否会导致任何其他内存问题？
.detach() 方法与 .remove() 相同，不同之处在于 .detach() 保留与已删除元素关联的所有 jQuery 数据。当移除的元素稍后要重新插入到 DOM 中时，此方法很有用。