Question

I’ve developed a webpage showing some statistics.
These statistics are refreshed periodically by AJAX requests using mootools 1.4.5.

Here ist the basic code:

<script type="text/javascript">
   var statisticRequest = new Request.HTML({
      url: theURL,
      noCache: true,
      onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript) {
         $(responseTree[0]).replaces($('statisticContainer'))
      }
   })

   function getCurrentStatistics() {
      statisticRequest.get()
   }

   window.addEvent('domready', function(){
      getCurrentStatistics.periodical(2000)
   });
</script>

On FF all works fine but the IE9 continuously allocates memory until the machine is nearly freezed.
It looks like the garbage collector didn’t remove the old DOM elements.

Using sIEve, I can see the increasing number of DOM elememts and the resulting memory usage.

What can I do to force the IE to remove the unused elements?

Edit:

Using destroy() as shown below will slow down the memory consumption but will not stop it completely. Removing Request.HTML had no further effect.

<script type="text/javascript">
    var statisticRequest = new Request({
        url: theURL,
        noCache: true,
        onSuccess: function(responseText, responseXML) {
            var newStatistic = Elements.from(responseText)
            var oldStatistic = $('statisticContainer')
            newStatistic.replaces(oldStatistic)
            oldStatistic.destroy()
        }
    })

    function getCurrentStatistics() {
        statisticRequest.get()
    }

    window.addEvent('domready', function(){
        getCurrentStatistics.periodical(2000)
    });
</script>

Answer 1

yes you can. look at the code for this:

https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L743-747

it will just replace it in the dom. it won’t really do much in terms of GC – the old element still ‘exists’ – in case you want to re-attach it.

http://jsfiddle.net/rE3JH/

var foo = document.id('foo');
new Element('div').replaces(foo);
console.log(foo); // still an element, though not in the dom

call foo.destroy(); to properly GC – see https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L802-807

alternatively, update the parent of staticContainer – applying a change to innerHTML direct. also, keep in mind .empty() will dispose child nodes and not destroy them – for periodical stuff like yours, you need to be thorough as it can avalanche over time.