HN Explorer

DOM nodes do not clear after remove(). Is there a memory leak?

1 points by jikuri ↗ HN
We have noticed huge DOM Nodes count and memory increase on our Angular app and in our effort to debug it we stripped down everything. In the end, we were left with the following pure html and javascript code which demonstrates the problem.

Please follow through the following simple code snippet.

<!DOCTYPE HTML> <html> <head> </head><body></body></html> Load this snippet on Chrome and open up the Chrome Performance monitor, click on the Collect garbage icon and see the DOM Nodes counter. It should be 6.

Let's just add an <input> like this:

<!DOCTYPE HTML> <html> <head> </head><body><input></body></html> Reload the snippet on a new tab and count the DOM Nodes, it should be 9.

Then, run this in the console to remove the <input>

document.getElementsByTagName('input')[0].remove() The count should be 6, which is as expected.

Finally, reload the snipped on a new tab again. Make sure the DOM Nodes show 9 and then type some text in the <input> field. You will notice that DOM Nodes increase by one, reaching 10, this is the entered #text that is added into the DOM tree. So far so good.

Now let's remove the <input> as before with:

document.getElementsByTagName('input')[0].remove() See the DOM Nodes, they are still 10 as if nothing was removed.

Any thoughts?

4 comments

[ 5.1 ms ] story [ 20.1 ms ] thread
oregontechninja
Lol, wrong site. You might get an answer but try stack overflow or something similar. Hope that helps..