Reputation: 169
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
Upvotes: 2
Views: 266
Reputation: 968
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
Upvotes: 0
Reputation: 10596
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>";
Upvotes: 0