IE8 image caching or error?

Question

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.

Bojangles · Accepted Answer · 2013-01-05T11:08:12.897

1

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.

edited Jan 05 '13 at 11:08

answered Nov 10 '10 at 22:20

Bojangles

91,543
47
160
197

The maximum memory limit we witnessed is 350mb for our site. Please correct me if i'm wrong but this is quite a lot. Most of sites didn't reach 100MB limit. – lostaman Nov 10 '10 at 23:45
@lostaman - Yes this is incredibly large. I'm really not sure as to how you'd fix the memory issue unless you used the no cache meta tag to not cache anything at all. Do you know what the memory usage is for other browsers? That would be handy - it would be obvious if it was an IE problem or a code problem. – Bojangles Nov 11 '10 at 00:20
Found out interesting thing. If I open Google site and try to intensively use instance search (no page refresh) the memory level in IE is increasing. I managed to reach 200MB level just typing different combinations. In Firefox everything works find. It may be just IE caches contents somehow if ajax components are intensively used. – lostaman Nov 12 '10 at 13:18
Looks like it! Maybe IE9 will fix that issue. And maybe be a bit standards compliant? ;-P – Bojangles Nov 12 '10 at 16:42

score 1 · Answer 2 · answered Nov 10 '10 at 22:28

1

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.

answered Nov 10 '10 at 22:28

Jakub Konecki

44,070
6
84
125

I've applied this fix but it didn't changed the situation. The memory limit continue to increasing. – lostaman Nov 10 '10 at 23:43

score 0 · Answer 3 · edited May 23 '17 at 10:33

It's possible that IE is not caching the images at all.

From jQuery docs:

$.post('ajax/test.html',
    function(data) {  
        $('.result').html(data);
});

This example fetches the requested HTML snippet and inserts it on the page.

Pages fetched with POST are never cached, so the cache and ifModified options in jQuery.ajaxSetup() have no effect on these requests.

You can do a test by taking measurement using this solution: How to force a web browser NOT to cache images

IE8 image caching or error?

3 Answers3