How can I force Javascript garbage collection in IE? IE is acting very slow after AJAX calls & DOM manipulation

Question

I have a page with chained drop-downs. Choosing an option from the first select populates the second, and choosing an option from the second select returns a table of matching results using the innerHtml function on an empty div on the page.

The problem is, once I've made my selections and a considerable amount of data is brought onto the page, all subsequent Javascript on the page runs exceptionally slowly. It seems as if all the data I pulled back via AJAX to populate the div is still hogging a lot of memory. I tried setting the return object which contains the AJAX results to null after calling innerHtml but with no luck.

Firefox, Safari, Chrome and Opera all show no performance degradation when I use Javascript to insert a lot of data into the DOM, but in IE it is very apparent. To test that it's a Javascript/DOM issue rather than a plain old IE issue, I created a version of the page that returns all the results on the initial load, rather than via AJAX/Javascript, and found IE had no performance problems.

FYI, I'm using jQuery's jQuery.get method to execute the AJAX call.

EDIT This is what I'm doing:

<script type="text/javascript">
function onFinalSelection() {
  var searchParameter = jQuery("#second-select").val();
  jQuery.get("pageReturningAjax.php",
  {SEARCH_PARAMETER: searchParameter},
  function(data) {
    jQuery("#result-div").get(0).innerHtml = data;
   //jQuery("#result-div").html(data); //Tried this, same problem
    data = null;
  },
  "html");
}
</script>

I want to note that this only becomes an issue when the return data is quite large. It is directly related to the size, as I am able to see moderate slowdown for medium size results and only major slowdown when it is a few hundred records + being returned.

Answer 1

You can force garbage collection in IE by using the CollectGarbage function, e.g.

if (typeof(CollectGarbage) == "function")
    CollectGarbage();

The JScript garbage collector is described in detail in this blog entry: http://blogs.msdn.com/ericlippert/archive/2003/09/17/53038.aspx

As the blog says, the GC is not predictable, so delete data or data = null will not reclaim the memory immediately, but it eventually will reclaim it.

---

But I doubt that your performance penalty is really caused by the memory usage; I think that it is a problem with DOM rendering.