How to dispose of DOM elements in JavaScript to avoid memory leaks

Question

I have an application that allows a user to view details on a specific case w/out a postback. Each time a user requests data from the server I pull down the following marku

Answer 1

I think the "always growing memory consumption" is somewhat misunderstood. It has to do with memory management inside the browser (and also on Windows in general) more than it has to do with your JS code. Memory managers typically keep allocating (or avoid releasing) until they have to. On systems based on pagefiles and memory mapping, allocating and releasing memory is very time consuming.

So even if your nodes are released from the actual document structure and DOM - there is hardly any way to measure it from Windows itself in "realtime".

Try this:

1. Start Taskmanager, switch to process tab and watch memory of your browser

2. Load in a HTML document that allocates 100.000 nodes, watch the memory consumption grow

3. Click a button in the page that releases all the nodes. Notice that little happens in terms of memory release.

4. Now minimize the browser-window, and maximize it again. In 90% of all cases the browser now dumps the memory if doesnt use and you will see how much it really consumes.

You can have a browser consume 500 megabytes of ram (not above mentioned example), but when you minimize and maximize it, it releases everything and suddenly it only uses 50 megabytes.