Question

我继续读同样的事情：

“直接在DOM元素上存储属性值是有风险的，因为可能存在内存泄漏。”

但有人可以更详细地解释这些风险吗？

Answer 1

（根据属性，我假设你指的是DOM元素的属性。）

DOM元素的自定义属性是否安全？

有些浏览器在销毁时没有很好地清理DOM元素。因此保留了对其他元素，相同元素或大量数据的引用，从而导致泄漏。我相信这在较新的浏览器中已基本解决。

在任何情况下，在元素上存储少量数据都是无害的，并且可以非常方便，所以请大家注意这个警告。

使用jQuery的.data()是一种安全的选择吗？

不是特别的。使用jQuery的自定义数据存储来存储数据有其内存泄漏的可能性，不幸的是它们不仅仅会影响旧的浏览器。

为了避免泄漏，您需要绝对确定在销毁元素时清理元素的.data()。当您使用jQuery来销毁元素时，这是自动的，但如果不这样做，您将会有影响每个浏览器的内存泄漏。

有哪些可能导致泄密的例子？

让我们说有一堆.data()链接到#foo元素。如果我们使用jQuery方法删除元素，我们就是安全的：

$("#foo").remove(); // associated .data() will be cleaned automatically

但是如果我们这样做，我们就会遇到跨浏览器兼容的漏洞：

var foo = document.getElementById("foo");
foo.parentNode.removeChild(foo);

或者如果#foo是其他元素的后代，其内容在没有jQuery的情况下被清除，那么问题也是如此。

otherElement.innerHTML = "";

在这两种情况下，jQuery都没有用于删除#foo，因此它的.data()永久地与元素无关，并且我们的应用程序有泄漏。

所以，如果我从不直接使用DOM API，我会安全吗？

你更安全，但另一种方法是，如果我们加载多个DOM操作库。考虑到jQuery帮助我们使用以下代码执行此操作：

var $jq = jQuery.noConflict();

现在我们可以允许$引用prototypejs或mootools，jQuery由$jq引用。

问题是那些其他库不会清理jQuery设置的数据，因为他们不知道它。

因此，如果jQuery在#foo上有一些数据，而mootools用于销毁该元素，那么我们就会发生内存泄漏。

如果我从未在jQuery中使用.data()该怎么办？这会让我安全吗？

可悲的是，没有。 jQuery使用相同的.data()机制来存储其他数据，比如事件处理程序。因此，即使您从未调用.data()将某些自定义数据与元素相关联，您仍然可能因上述示例而导致内存泄漏。

大多数情况下，您可能没有注意到泄漏，但根据代码的性质，它们最终会变得足够大而成为一个问题。

Answer 2

根据jQuery documentation：

在版本9之前的Internet Explorer中，使用.prop（）设置DOM element属性除了简单的原始值以外的任何值（number，string或boolean）如果属性是，则可能导致内存泄漏在删除DOM元素之前不删除（使用.removeProp（））从文件。在没有内存的情况下安全地设置DOM对象的值泄漏，使用.data（）。

为什么将数据存储为元素的属性存在风险？

2 个答案: