0

From my understanding, any memory allocated for a local variable is released at the end of the function. The only time this memory release does not occur (and a detached DOM node or memory leak occurs) is when that variable is referenced in a closure created within that local scope, and not properly nulled out inside the closure.

For example, the variable originalThing below (source - https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/):

var theThing = null;
var replaceThing = function () {
  var originalThing = theThing;
  var unused = function () {
    if (originalThing)
      console.log("hi");
  };
  theThing = {
    longStr: new Array(1000000).join('*'),
    someMethod: function () {
      console.log(someMessage);
    }
  };
};
setInterval(replaceThing, 1000);

I have recently been told that capturing an element with a jQuery object and storing that reference in a local variable will cause a detached DOM node after that element is removed, even when the scope of the function that captured the jQuery object has ended.

i.e.

function myFunc() {
    var $div = $( 'div' );

    return;
}

This does not seem right to me, I thought all local variables are released at the end of their scope unless there is some persistent reference, and therefore the removed DOM nodes should not have anything keeping it in memory and it will be garbage collected.

I was hoping someone could shed some light on this topic, preferably with sources.

NewbornCodeMonkey
  • 198
  • 1
  • 13
  • detached is global and therefore never goes away... – Kevin B Mar 09 '17 at 19:28
  • The problem with the `detached` variable is that [it is not local at all](http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html). – Bergi Mar 09 '17 at 19:28
  • Also from that page you linked: "*it can be observed, that the detached DOM tree is referenced […] from […] the `detached` window property*" – Bergi Mar 09 '17 at 19:31
  • As far as the last example, yes, that *should* clean up properly, however older versions of jquery stored element data (events, data, etc) on it's own internal array/object that didn't get automatically cleaned up if the element was removed by anything other than a jquery method. – Kevin B Mar 09 '17 at 19:32
  • I just pulled that example from google's dev docs, let me come up with another example that actually uses a local variable in a closure. My question is do jquery objects automatically causing detached dom nodes if they are not nulled out, even if they are only stored in a local (not global) scope. Will update for clarity – NewbornCodeMonkey Mar 09 '17 at 19:32
  • 1
    If they go out of scope, they should clean up just like anything else. If you find otherwise, you should submit a ticket. – Kevin B Mar 09 '17 at 19:33
  • @KevinB Ok, this must be what I had been hearing. Do you by chance know which version of jQuery this was fixed in? – NewbornCodeMonkey Mar 09 '17 at 19:34
  • It would have been one of the major versions, 1.7, 1.8, 1.9, etc – Kevin B Mar 09 '17 at 19:34
  • 1
    What you are describing though does often happen if you're selecting elements using a chain of jquery selecting/filtering methods and then storing the result of that chain in a variable that doesn't get cleaned up often. For example, `var foo = $("#foo").find(".bar").filter(".baz");` if any .bar elements are removed, they'll still exist because variable `foo` contains a reference to it. Once `foo` is no longer referenced, it'l be cleaned up. that's usually easily fixable by not using chaining to get your selection. – Kevin B Mar 09 '17 at 19:43
  • That last part is that part that I was told that does not happen (but I thought it does). If that variable foo is a local var, then once that local scope has ended the element #foo should be cleaned up (if removed), but I was told it would not. – NewbornCodeMonkey Mar 09 '17 at 19:46
  • 2
    Old, but still relevant: http://stackoverflow.com/questions/1462649/jquery-memory-leak-with-dom-removal and http://stackoverflow.com/questions/5046016/jquery-memory-leak-patterns-and-causes – Kevin B Mar 09 '17 at 19:46

0 Answers0