为什么将数据存储为元素的属性存在风险？ [英] Why is it risky to store data as an attribute of an element?

问题描述

我继续读同样的事情：

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

"Storing property values directly on DOM elements is risky because of possible memory leaks."

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

But can someone explain these risks in more detail?

推荐答案

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

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

Are custom properties on DOM elements safe?

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

Some browsers have not cleaned up DOM elements very well when destroyed. References to other elements, the same element, or large sets of data were therefore retained, causing leaks. I believe this is largely resolved in newer browsers.

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

In any case, storing small amounts of data on an element is innocuous, and can be very convenient, so take that warning with a grain of salt.

使用jQuery的 .data（）安全替代？

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

Not especially. Storing data using jQuery's custom data store has its own potential for memory leaks, and unfortunately they don't merely affect old browsers.

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

In order to avoid leaks, you'd need to be absolutely certain you clean an element's .data() when destroying an element. This is automatic when you use jQuery to destroy the element, but if you don't, you'll have memory leaks that affect every browser.

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

What are some examples that can cause leaks?

假设有一堆 .data（）链接到 #foo 元素。如果我们使用jQuery方法删除元素，我们是安全的：

Let's say that there's a bunch of .data() linked to the #foo element. If we use jQuery methods to remove the element, we're safe:

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

但如果我们这样做，我们会有一个交叉-browser兼容泄漏：

But if we do this, we have a cross-browser compatible leak:

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

或者如果 #foo 是后代的一些其他元素的内容在没有jQuery的情况下被清除，这将是同样的问题。

Or if #foo is a descendant of some other element whose content is being cleared without jQuery, it would be the same issue.

otherElement.innerHTML = "";

在这两种情况下，jQuery都不用于删除 #foo ，所以它的 .data（）永久地与元素取消关联，而我们的应用程序有泄漏。

In both cases, jQuery was not used to remove #foo, so its .data() is permanently disassociated from the element, and our application has a leak.

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

So if I never use the DOM API directly, I'm safe?

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

You're safer, but another way this can happen is if we load more than one DOM manipulation library. Consider that jQuery helps us do this with the following code:

var $jq = jQuery.noConflict();

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

Now we can allow $ to refer to prototypejs or mootools, and jQuery is referenced by $jq.

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

The trouble is that those other libraries will not clean up data that was set by jQuery, because they don't know about it.

所以如果jQuery在 #foo 上有一些数据，那么 mootools 用于销毁该元素，我们有内存泄漏。

So if jQuery has some data on #foo, and mootools is used to destroy that element, we have our memory leak.

如果我从不在jQuery中使用 .data（）？这会让我安全吗？

What if I never use .data() in jQuery? Does that make me safe?

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

Sadly, no. jQuery uses the same .data() mechanism to store other data, like event handlers. Therefore even if you never make a call to .data() to associate some custom data with an element, you can still have memory leaks caused by the examples above.

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

Most of the time you may not notice the leaks, but depending on the nature of the code, they can eventually grow large enough to be a problem.

这篇关于为什么将数据存储为元素的属性存在风险？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！