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

我是研究僧i 提交于 2019-12-21 12:04:18

问题


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


回答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.




回答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.




回答3:


Some great reading on the subject:

Memory leak patterns in JavaScript



来源:https://stackoverflow.com/questions/2744360/why-data-function-of-jquery-is-better-to-prevent-memory-leaks

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!