Is it possible to use iframes in IE without memory leaks?

Question

All versions of IE (including 10) appear to hold on to a significant amount of memory allocated by iframes until window.top.unload occurs. This creates quite the challenge for long-lived pages that may create a number of iframes throughout their lifetime. A simplified example of the problem can be found here:

http://pastebin.com/FmZ7iMHB

That example uses a Wikipedia page for the iframe to magnify the problem, but even a simple page with a single image will leak.

In a nutshell, after you destroy an iframe in IE you get some but not all of the memory back the next time a page triggers a garbage collection (typically about 25% of the memory used by the iframe gets stuck in limbo). Refreshing or navigating to a new page (window.top.unload) will free up most or all of the remaining memory.

This particular leak is not detectable in tools like sIEve and Microsoft's JS Memory Leak Detector. I've read everything I can find about leaky iframes in IE, but have had no luck with the solutions I've come across.

Does anyone know a solution or workaround to this problem? The only mitigation strategy I have is to do as much cleanup as you can from within the iframe before the parent page destroys it, but that doesn't help when you don't control the page being framed in.

Answer 1

I put together a jQuery plugin for cleaning iframes that prevents memory leaks in some cases:

(function($) {
    $.fn.purgeFrame = function() {
        var deferred;

        if ($.browser.msie && parseFloat($.browser.version, 10) < 9) {
            deferred = purge(this);
        } else {
            this.remove();
            deferred = $.Deferred();
            deferred.resolve();
        }

        return deferred;
    };

    function purge($frame) {
        var sem = $frame.length
          , deferred = $.Deferred();

        $frame.load(function() {
            var frame = this;
            frame.contentWindow.document.innerHTML = '';

            sem -= 1;
            if (sem <= 0) {
                $frame.remove();
                deferred.resolve();
            }
        });
        $frame.attr('src', 'about:blank');

        if ($frame.length === 0) {
            deferred.resolve();
        }

        return deferred.promise();
    }
})(jQuery);

This code handles cross-origin frames by updating the frame src to "about:blank" before cleaning its content. To use the plugin, call $frame.purgeFrame() where you would otherwise call $frame.remove().

As Josh points out, iframes that display an image seem correlated with memory leaks. For example, creating iframes pointing to google.com will produce a memory leak in IE7 and IE8. Using the plugin above prevents those leaks.

Unfortunately that plugin is not effective in all cases. It does not seem to help much with iframes pointed at //en.wikipedia.org/wiki/Memory_leak.

The code that I used for testing memory leaks and for testing the above plugin is at https://gist.github.com/3125807

As Josh says, the memory leaks are actually pseudo-leaks in IE8. However in IE7 memory is not reclaimed, even when the parent window unloads.

Answer 2

In IE 11, just setting iframe.src = 'about:blank' seems to fix this. Otherwise, you can watch the memory grow forever in the F12 Memory tab, even if you're removing iframes from the DOM and letting them be garbage collected. If you blank the iframes first, you see the memory go up and down as you'd expect.

Answer 3

Have a try with this:

collectGarbageForIframe: function() {
  var $iframes = $("*[tag='iframe']");
  $iframes.each(function() {
    var $target = $(this);
    if($target.length>0) {
      $target[0].src = "about:blank";
      $target[0].contentWindow.document.write('');
      $target[0].contentWindow.close();
      $target.remove();
      if( typeof CollectGarbage == "function") {
        CollectGarbage();
      }
    }
  });
}

Answer 4

You are missing one important step: After setting the src to 'about:blank', you need to listen to the load of 'about:blank', and only then remove your iFrame.