CODEWITHSUNDEEP
javascriptjquerydommemory-leaks
mydi
mydi

Reputation: 65

Very small jsfidlle of DOM leak with jquery

I'm starting to track some memory leak I've got in my web game. I've found a recurring pattern that's leaking DOM nodes, but I can't figure out why. I'm not an expert at using chrome's dev tools but I'm learning.

The smallest example I could set up is this:

<div id = "main">
</div>

<button onclick ='reset();'> test </button>

<script>
function reset()
{
    var Div = "<select></select>";
    $("#main").html(Div);
}
</script>

JSFIDDLE LINK

In chrome, when I use the dev Tools and use the timeline, we can see that:

These nodes never get GC'ed and I can't understand why. The issue is worse when you use <option> inside the <select> (that seem coherent with the fact that the parent node doesn't get GC'ed). The issue is also the same with <input> as far as I can see (with checkbox & radio at least).

It seems so simple that I'm obviously missing something easy, but what is it is beyond me.

Do you have any ideas how could I solve this? I've tried to use the heap snapshot, but since I'm not fully understanding it yet, I've gotten no results.

Edit : Edit to bump the question since I haven't found an answer as of yet.

Upvotes: 1

Views: 127

Answers (2)

Nick H
Nick H

Reputation: 26

I have also recently come across this issue using Chrome 43. It appears to be a bug in chrome itself and is fixed in Chrome 46 (Chrome Canary)

Upvotes: 1

noobed
noobed

Reputation: 1339

This generates elements in the deatached DOM tree - better explanation here . This elements are C++ objects and not js ones.enter image description here

I agree that nodes are being created on each click but as soon as I force GB with the approriate button, one could observe it plummeting.

Upvotes: 1

Related Questions