On my current project I've noticed that IE uses a quite a lot of memory. Spent some time of investigation i found out that images are not removed from memory, but my site uses images quite intesively.
Finally I've created a simple test that dynamically loads images and then clears it using jQuery
My test js:
$(document).ready(function () {
$('#appendImages').click(append);
$('#removeImages').click(remove);
});
function append() {
$.post("http://localhost/TestService/GetImages", { key: $('#key').val()}, function (data) {
$.each(data.Data.items, function (i, v) {
$('#imagesContainer').append('<img src="' + v.imageUrl + '" />');
}); ;
});
}
function remove() {
$('#imagesContainer').empty();
}
Test html:
<input id="key" type="text" value="jeans" >
<div id="reset">Reset</div>
<div id="repeatableReset">Repeatable Reset</div>
<div id="stop">Stop</div>
<br />
<br />
<br />
<br />
<div id="appendImages">append</div>
<div id="removeImages">remove</div>
<div id="imagesContainer"></div>
<html>
</html>
While appending new images the IE memory is incresing. But after I remove all loaded images the memory is not cleared. For example, right after page loading IE process uses 20MB, after appending images it uses 35MB, after clearing - 30MB.
I've used sIEve tool to find any leand but it displyed no leaks. Does IE cache somehow the images? Is there any issues in IE to handle dynamically created image elements?
Update In Firefox memory level remains constant, but in IE it is increasing.
This appears to be an issue with IE. All browsers will cache content so it can be retrieved quickly when it's needed again. If it's clever enough, IE will clear the cache after a while, or on close at least.
One option is to use a no cache meta tag, but that would slow down all your pages as the images will have to be reloaded every time the page is.
As for the actual usage, it appears quite large for a website, but computers now have at least 2GB RAM (some still happy with 1GB), which is plenty enough. I don't think you'll run into memory issues.
As a side note, I sometimes FireFox has taken large chunks of memory after a long period of web-dev. I think it's just browsers being clever.
I reckon that browsers should clear their caches more often - if you're visiting loads of sites then it will get pretty large pretty quickly.
If you are doing a lot of ajax requests using jQuery then memory leaks can be caused by this:
http://bugs.jquery.com/ticket/6242
There is a bug in jQuery. See the link above for the details - fix is planned for 1.4.5 release, but you can find some code samples in the comments.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With