I am working on an embedded system that presents content in an iframe. It uses signalR (which is based on ajax) and jquery. The browser gets slower and slower, and the memory usage goes up and up, as the hours go by. So I am looking to remove all potential memory problems.

When the new page is loaded into the iframe, I attach click and focus event handlers.

Just before the iframe page is to be replaced, I un-attach them.

However, if I inspect $.cache (while testing on a PC with firefox, so not pletely the same as my real system) it still shows $.cache gaining more and more elements each time the iframe is reload.

Is this the correct way to do things? Is there anything else I can try? Why is $.cache growing?

(In case your are interested I am using a raspberry pi (runs linux) with the Midori browser, though there is a choice of other (mostly web-kit) browsers that I could use).

Javascript I use to change the iframe contents...

hubProxy.client.loadPage = function (pageFilename, pageType) {
    frameNode = $("#myIframe").contents();
    $("a", frameNode).off();  
    $("#myIframe")[0].src = pageFilename;
};

I am working on an embedded system that presents content in an iframe. It uses signalR (which is based on ajax) and jquery. The browser gets slower and slower, and the memory usage goes up and up, as the hours go by. So I am looking to remove all potential memory problems.

When the new page is loaded into the iframe, I attach click and focus event handlers.

Just before the iframe page is to be replaced, I un-attach them.

However, if I inspect $.cache (while testing on a PC with firefox, so not pletely the same as my real system) it still shows $.cache gaining more and more elements each time the iframe is reload.

Is this the correct way to do things? Is there anything else I can try? Why is $.cache growing?

(In case your are interested I am using a raspberry pi (runs linux) with the Midori browser, though there is a choice of other (mostly web-kit) browsers that I could use).

Javascript I use to change the iframe contents...

hubProxy.client.loadPage = function (pageFilename, pageType) {
    frameNode = $("#myIframe").contents();
    $("a", frameNode).off();  
    $("#myIframe")[0].src = pageFilename;
};

• javascript
• performance
• jquery
• iframe

• You are storing frameNode globally, is that intended? – Kevin B Commented Sep 5, 2013 at 19:34
• @kevinb: re-using globals would actually reduce un-collected garbage. – dandavis Commented Sep 5, 2013 at 19:35
• The only time entries get added to the cache are when events or data are added to an element, and it gets cleared when that element is removed by jquery. Since you are just changing the src of the iframe, most likely that cleanup isn't happening. That'd be my first guess, without seeing much more of your code or going to the src. A test for that would be to replace .off() with .remove() – Kevin B Commented Sep 5, 2013 at 19:37
• @Kevin B, no, wasnt meant ot be a global, thanks for spotting that – spiderplant0 Commented Sep 5, 2013 at 19:43
• @KevinB, I didnt understand your last ment. When you say "Since you are just changing the src of the iframe, most likely that cleanup isn't happening" Do you mean it is understandable cleanup is not happening and I should be doing more to promote clean up? Or are you saying that it it isnt happening but it should be happening? – spiderplant0 Commented Sep 5, 2013 at 19:45

1 Answer 1

Write a wrapper div to hold your iframe container, such as...

<div id="myIframeWrapper"></div>

Now you can clean up after the previous iframe page, and this can be done by pletely clearing out everything in the DOM related to the previous iframe, and then creating a fresh iframe by using a constructor when you invoke your loadPage function.

hubProxy.client.loadPage = function (pageFilename, pageType) {

    var myNewIframe = '<iframe id="myIframe" src="' + pageFilename + '"></iframe>';

    // Remove old iframe from the DOM and replace with new iframe
    if ($("#myIframe")) {
        $("#myIframeWrapper").empty().append( myNewIframe );
    }

    var frameNode = $("#myIframe").contents();
    $("a", frameNode).off();
};

You will notice that the original line assigning the iframe source has been removed, as it is already accounted for in the new constructor. This also has the benefit of being able to add other iframe attributes using the constructor, such as the iframe size, etc.