How to remove DOM elements without memory leaks?

Question

How to remove DOM elements without memory leaks?

My JavaSript code creates a list of LI elements. When I update the list, memory usage grows and never drops. I tested sIEve and it shows that the browser saves all the elements that should have been deleted using the $.remove() or $.empty jQuery $.empty .

What to do to remove DOM nodes without memory leak?

See my other question for specific code.

+43

javascript jquery dom memory-leaks

podeig Sep 24 '10 at 8:09

source share

5 answers

Andrew Dunn · Answer 1 · 2010-09-24 08:18

The DOM saves all DOM nodes, even if they were deleted from the DOM tree itself, the only way to delete these nodes is to refresh the page (if you put the list in an iframe, the update will not be noticeable)

Otherwise, you can wait until the problem becomes so bad that the browser garbage collector will be forced to use (hundreds of megabytes of unused nodes are said here)

Best practice is reusing nodes.

EDIT: Try the following:

 var garbageBin; window.onload = function () { if (typeof(garbageBin) === 'undefined') { //Here we are creating a 'garbage bin' object to temporarily //store elements that are to be discarded garbageBin = document.createElement('div'); garbageBin.style.display = 'none'; //Make sure it is not displayed document.body.appendChild(garbageBin); } function discardElement(element) { //The way this works is due to the phenomenon whereby child nodes //of an object with it innerHTML emptied are removed from memory //Move the element to the garbage bin element garbageBin.appendChild(element); //Empty the garbage bin garbageBin.innerHTML = ""; } }

To use it in your context, you would do it like this:

 discardElement(this);

FK82 · Answer 2 · 2010-09-24 12:04

This is more FYI than the actual answer, but it is also quite interesting.

From the W3C DOM core specification (http://www.w3.org/TR/DOM-Level-2-Core/core.html):

The Core DOM APIs are designed to be compatible with a wide range of languages, including common-use scripting languages and more complex languages, used primarily by professional programmers. Thus, the DOM APIs must work with various memory management philosophies, from language bindings that don’t provide the user with memory management at all through those (in particular Java) that provide explicit constructors but automatically provide an automatic mechanism for garbage collection to return unused memory those (especially C / C ++) that usually require the programmer to explicitly allocate object memory, keep track of where it is used, and explicitly free it for reuse. To provide a consistent API on these platforms, the DOM does not address memory management issues at all, but instead leaves them for implementation. None of the explicit language bindings defined by the DOM API (for ECMAScript and Java) require any memory management methods, but DOM binding for other languages (especially C or C ++) may require such support. These extensions will be responsible for adapting the DOM API to a specific language, and not to the DOM workgroup.

In other words: memory management remains to implement the DOM specification in different languages. You will need to study the documentation for implementing the DOM in javascript to find out some method to remove a DOM object from memory, which is not a hack. (However, the MDC website has very little information on this topic.)

~~As a note to jQuery#remove and jQuery#empty : from what I can say, none of these methods does anything except remove the Object from the DOM node or remove the DOM node from document >.~~ ~~They just delete.~~ ~~This, of course, does not mean that there is no memory for these objects, although they are no longer in document .~~

Edit: The above snippet was superfluous, because obviously jQuery cannot work wonders and work with the DOM implementation of the browser used.

Skilldrick · Answer 3 · 2010-09-24 08:11

Are event listeners deleted? Something that may cause a memory leak .

Mic · Answer 4 · 2010-09-24 09:04

The code below does not apply to my IE7 and other browsers:

 <html> <head></head> <body> <a href="javascript:" onclick="addRemove(this)">add</a> <ul></ul> <script> function addRemove(a) { var ul = document.getElementsByTagName('UL')[0], li, i = 20000; if (a.innerHTML === 'add') { while (i--) { li = document.createElement('LI'); ul.appendChild(li); li.innerHTML = i; li.onclick = function() { alert(this.innerHTML); }; } a.innerHTML = 'remove'; } else { while (ul.firstChild) { ul.removeChild(ul.firstChild); } a.innerHTML = 'add'; } } </script> </body> </html>

Maybe you can try to identify some differences from your code.
I know that IE flows much less when you first insert a node into the DOM before doing anything with it, for example: attach events to it or populate its innerHTML property.

Jens · Answer 5 · 2010-10-06 15:27

If you need to "strengthen" the leak and do it without rewriting all your code for closing, circular links, etc. In your account, use the Douglas Crockfords Purge-method before uninstalling:

http://javascript.crockford.com/memory/leak.html

Or use a workaround to close:

http://laurens.vd.oever.nl/weblog/items2005/closures/

How to remove DOM elements without memory leaks?

More articles: