How can I prevent memory leaks in IE Mobile?
I wrote an app to be used offline (with Google Gears) on devices using IE Mobile. Devices are experiencing memory leaks at such a rate that the device becomes unusable over time.
The issue page fetches records from Gears local database and displays a table of each record with a link in the last column of each row to open the record (the link only has onclick = "open ('myID") ", When they are done with the record, they are returned to the table that is displayed by RE. This is rebuilding this table which appears to be the problem. Mainly onclick events.
The table is created basically 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 read about common causes of memory leaks and tried setting up an onclick event for each reference to "null" before re-rendering the table, but it still leaks.
Does anyone have any idea?
In case it matters, the function called from each link looks like this:
function afunction(){
document.getElementById('view').style.display="none";
}
Will this represent a circular link in any way?
Jake
source to share
I don't know if this helps with memory, but instead of concatenating your strings, you can push them to 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>";
source to share
If you are doing a lot of scripts that change the content of the page, there is an IE memory leak that was mentioned in an old AJAX book that I have used in the past (and it might be lucky for you here). When you unload the page, you need to clear any div / spans / etc changes that you 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 you want to set innerHTML to "" when cleaning up. When I get home I will try to find the book and update my answer if there is anything else there, but that should give you something to check in the meantime
source to share