Why .data() function of jQuery is better to prevent memory leaks?

Question

Regarding to jQuery utility function jQuery.data() the online documentation says:

"The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. "

Why to use:

document.body.foo = 52; 

can result a memory leak -or in what conditions- so that I should use

jQuery.data(document.body, 'foo', 52);

Should I ALWAYS prefer .data() instead of using expandos in any case?

(I would appreciate if you can provide an example to compare the differences)

Thanks,

burak ozdogan

Answer 1

It's better precisely because of something it says in the quote you gave: "safe from circular references."

Say you have variables nodeOne and nodeTwo, which reference nodes.

Say you then put this in a function (whose reference you don't store):

jQuery.data(nodeOne, 'item', nodeTwo);
jQuery.data(nodetwo, 'item', nodeOne);

After the function runs, there's a circular reference: nodeOne has a ref to nodeTwo, and vice versa.

By using jQuery.data, that circular reference won't prevent those two variables from being garbage collected.

However, if you were to do the same thing but without using jQuery.data, the nodeOne and nodeTwo variables would not be garbage collected, even if the variables are no longer needed.

--

Should I ALWAYS prefer .data() instead of using expandos in any case?

Unless you're doing large amounts of data setting and need any extra drops of performance (and you could tell by using profiling) and are sure you won't create circular references (or at least a number that would matter), then yes, you may as well only use jQuery.data.

Answer 2

I'm pretty sure you can't introduce a memory leak with a primitive value like 52. Memory leaks with expandos usually occur when a value is applied that contains an object with a reference back to the element.

I suggest reading the contents of the Circular Reference heading at http://msdn.microsoft.com/en-us/library/Bb250448. Even better, read it all :-)

That being said, I think most people recommend against using expandos if possible (and it usually is possible). Using jQuery's data() is a good alternative, in any case.

---

Just realized I didn't answer your question lol. jQuery's data() provides a method that goes something like the following:

1. jQuery computes a unique ID for the data
2. The data is stored in an object available to the data() method, using the unique ID
3. An expando property is applied to the element with the unique ID as a primitive value

Whenever you call data() to fetch the data, jQuery accesses the expando property for the unique ID and uses that ID to fetch the data from the caching object. Because the expando contains a primitive value and has no attachment to the caching object, no circular references occur.

Answer 3

Some great reading on the subject:

Memory leak patterns in JavaScript