Is this solution correct or not to handle DOM memory leak

Question

All:

When I try to follow a JS DOM memory leak tutorial, there is one example of memory leak about OLD IE(7, 8):

<div id="myDiv">
    <button id="myBtn">Click Me</button>
</div>

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

And the solution it gives is:

<div id="myDiv">
    <button id="myBtn">Click Me</button>
</div>

<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){




        btn.onclick = null;





        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

My confuse here:

What is the leak: the myBtn DOM object or the onclick function?(my understanding: it tries to say the DOM, because that innerHTML tries to replace the whole button node with a text node)
If the DOM is the leak, then that btn variable still references to the DOM, which causes it can not be GCed, why this can be the solution?

Thanks

@ibrahimmahrir Thanks for reply. I guess I am a lil confused. What I am trying to ask is why that solution works, rather than why this is a memory leak — Kuan, Apr 26 '18 at 17:03
@ibrahimmahrir Could you talk a lil bit what cause circular ref in this specific example? I really have a hard time to understand why this is a circular ref — Kuan, Apr 26 '18 at 17:11
kuan Actually I think I'm wrong about that circular reference. There doesn't seem to be one in this example as it was in your other question. — ibrahim mahrir, Apr 26 '18 at 17:16
@ibrahimmahrir thanks for clear my thought. This memory leak recognizing stuff kills me. — Kuan, Apr 26 '18 at 17:19
@ibrahimmahrir Thanks for the link, I found that post too. The reason I try to ask this kinda question is more like I also works on Node Application, so just want to understand JS memory leak recognizing skill from a generic perspective. — Kuan, Apr 26 '18 at 17:22
@ibrahimmahrir that is the feel what I talked about "kills me" — Kuan, Apr 26 '18 at 17:24
Google searches yielded this [**related questions**](https://stackoverflow.com/a/12528067/6647153), — ibrahim mahrir, Apr 26 '18 at 17:33
Also [**this**](https://stackoverflow.com/questions/4337582/do-events-handlers-on-a-dom-node-get-deleted-with-the-node). — ibrahim mahrir, Apr 26 '18 at 17:41

score 2 · Accepted Answer · answered Apr 26 '18 at 17:02

2

The leak are in both cases. You have to free the btn variable pointing to a DOM object and the onclick event to stop listening that event.

answered Apr 26 '18 at 17:02

Angel Luis

322
4
14

Thanks, that is also what I thought, thanks for clear. It makes me confused, cos the second part code marked as solution in the post I read. – Kuan Apr 26 '18 at 17:04

Is this solution correct or not to handle DOM memory leak

1 Answers1