How Can I Prevent Memory Leaks in IE Mobile?

Question

Hi All,

I've written an application for use offline (with Google Gears) on devices using IE Mobile. The devices are experiencing memory leaks at such a rate that the device becomes unusable over time.

The problem page fetches entries from the local Gears database and renders a table of each entry with a link in the last column of each row to open the entry ( the link is just onclick="open('myID')" ). When they've done with the entry they return to the table, which is RE-rendered. It's the repeated building of this table that appears to be the problem. Mainly the onclick events.

The table is generated in essence like this:

var tmp="";
for (var i=0; i<100; i++){
 tmp+="<tr><td>row "+i+"</td><td><a href=\"#\" id=\"LINK-"+i+"\""+
  " onclick=\"afunction();return false;\">link</a></td></tr>";
}

document.getElementById('view').innerHTML = "<table>"+tmp+"</table>";

I've read up on common causes of memory leaks and tried setting the onclick event for each link to "null" before re-rendering the table but it still seems to leak.

Anybody got any ideas?

In case it matters, the function being called from each link looks like this:

function afunction(){
 document.getElementById('view').style.display="none";
}

Would that constitute a circular reference in any way?

Jake

Answer 1

I don't know if it will help with memory, but instead of concatenating your strings, you can push them onto an array and join them for better performance. Something like:

var tmp=[];
for (var i=0; i<100; i++){
 tmp.push("<tr><td>row "+i+"</td><td><a href=\"#\" id=\"LINK-"+i+"\""+
  " onclick=\"afunction();return false;\">link</a></td></tr>");
}

document.getElementById('view').innerHTML = "<table>"+tmp.join('')+"</table>";

Answer 2

If you are doing a lot of scripting that changes the content of the page there is an IE memory leak that was mentioned in an old AJAX book I have used in the past (and it may well be hitting your here). When a page unload, you need to clear any divs/spans/etc that you have changed, or their contents will remain in memory. Try something like

<script type="text/javascript">
window.onunload = clearAJAXContent;

function clearAJAXContent() {
/* clear any dynamic content placeholders here*/
}
</script>

I believe, when clearing, you want to set the innerHTML to "". When I get home next I'll try to find the book and update my answer if there's anything different, but that should give you something to test in the meantime

Answer 3

... by never, ever turning it on ;-) (Sorry... my inner cynic couldn't resist.)