Which is the most memory leak safe approach

Question

I have a table of frequently updated information. This is presented using a container div with a div for each row, each row containing 10 divs.

I am using setInterval to call a an asmx webservice that returns some json formatted information.

On the success callback I call $("#myContainer").empty(); on the container div and recreate the rows and 10 nested divs for each row's columns.

This page may be left to run for a whole day, so I am wary of updating the DOM like this as I have noticed that memory does rise for the browser over time (IE8).

The other approach I am considering is to add an id to the row div. When new results process each item of data, look for the corresponding row, if it exists overwrite the data in each div. If it doesn't exist (new data for example), append the row.

What approaches have others used for this sort of long lived pseudo realtime information display.

TIA

Answer 1

In general, a very safe way to prevent memory leaks is to refrain from destroying and re-creating DOM elements. In situations such as yours, I always try to keep the initial DOM structure, and simply update the inner text of the elements when fresh data from AJAX requests is available.