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

Use

$("#result-div").html(data);

html() utilizes jQuery's empty method which works very hard to prevent memory leaks.

have you tried:

delete data;

---

I'm thinking there are other performance issues in your code causing the sluggishness. Is your return data using png's with alpha transparency? I've seen that kill IE6 (when the alpha filter is applied) and slow down IE7 considerably.

Answer 2

Hi,

I was going to rewrite this but decided what Larry K has already written is good enough. So check out his post

Answer 3

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.