Memory leak when using iFrames with javaScript

Question

I have a strange behaviour in (at least) IE11 and Edge (minimaly in Chrome). I create an iFrame and detach it afterwards but memory keeps increasing. In this iFrame only an empty page with javaScript imports is loaded.

I found some suggestions to change src of iFrame to about:blank but it still isn't working. Has anyone an idea what is going wrong?

Edit:

I tried it with the jQuery purgeFrame plugin and changed speed and iteration count.

Since it seems to be mainly a IE11 and Edge problem we also posted it on https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8449104/

The new code for the outer frame is:

<!doctype html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script type="text/javascript">
        var counter =0;

        /*
        * jQuery purgeFrame
        * A jQuery plugin to clean up Iframes and make IE happy
        *
        * Copyright (c) March 2014 Tom Mooney
        * licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php
        */

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

                return deferred;
            };

            function purge($frame) {
                var len = $frame.length
                var deferred = $.Deferred();
                $frame.one('load', function () {
                    try
                    {
                        $(this.contentWindow).empty();

                        len -= 1;
                        if (len <= 0) {
                            $(this).remove();
                        }

                        $frame = null;
                    }
                    finally {
                        deferred.resolve();
                    }
                });

                //Set src to about:blank to so that contentWindow can be manipulated on cross-domain iframes
                $frame.attr('src', 'about:blank');

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

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

        $(document).ready(function () {
            var myTimer = setInterval(
                    function(){ 
                        var contentContainer = $("#contentDiv");
                        var iFrame = $('<iframe class="contentFrame" frameborder="0" name="bla" style="overflow:auto; width: 100%; height: 100%;" src="leere.html"></iframe>');
                        contentContainer.append(iFrame);
                        $(iFrame).purgeFrame().done(function() {
                            console.log("deleted frame");
                            iFrame = null;
                        });
                        if (counter == 1000) {
                            clearInterval(myTimer);
                        }
                        counter++;
                    }, 50
                );

        });
    </script>
</head>
<body>
    <div id="contentDiv" style="width:100%; height:100%"></div>
</body>
</html>

The loaded html (leere.html)

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
Test
</body>
</html>

Memory Usage in IE11 (3x 1000 cycles) Memory Usage in Edge (1x 1000 cycles)

did you find anything useful for this? My iframe I have, once it leaks and has the leak, reloading the window does not free the memory at top level or iframe level. The only solution I have in IE11 is to `window.open` a new window with a fresh memory space and that fails sometimes due to out of memory error or insufficient space error — Coty Embry, Oct 30 '20 at 18:12

score 0 · Answer 1 · answered Aug 10 '16 at 08:36

0

I ran the webpage and used Chrome's Task Manager to monitor the memory consumption of the tab. I changed the number of intervals to 150, memory went to 84MB, stayed there for a while and then dropped back to 20MB. Memory consumption also drops after a while in IE.

My guess is that when you remove the iFrame and set the variable to null memory is not released right away but only during garbage collection after a while. As far as I know there is no way for you to forcibly instruct the browser to do garbage collection from JS. So there's nothing you can do about it other than rewrite your code to not create too many new DOM objects constantly.

answered Aug 10 '16 at 08:36

1

Which version did you use? In my case with the new outer Frame Chrome goes up to 278MB after 1000 iterations (150ms) and releases memory only if i change the parent url. In IE it's the same it doesn't go down to initial - for every cycle (1000 iterations) it consumes 325-350MB private bytes. The reason for this is not visible in heap - the heap size is 270KB an total memory in my example after 2x1000 iterations 885MB in IE11 / Win7. In IE11 the browser collapses after it reaches 1.8GB memory. – Mhastrich Aug 10 '16 at 09:04
I use Chrome v52 and IE11 in Win 7. I meant 150 iterations. Didn't try with 1000. Will try again later. – Aug 10 '16 at 09:09
The problem in our real application is much worse. Here we use iframes to simulate tabs and realize different navigation trees. We have bigger javascript imports in our pages so in IE for every opened and closed tab (iframe) the browser keeps ~30MB in memory. The problem is our user work the whole day with this application an after 1-3hours the browser cannot be used anymore (in case of IE). Other browsers seem to keep a lot of memory, too. – Mhastrich Aug 10 '16 at 09:11
Hmm I just tried again with 1000 iterations in Chrome(300ms interval, frame removed after 150ms). Memory also went back to 20MB. From here: http://stackoverflow.com/questions/13950394/forcing-garbage-collection-in-google-chrome it seems that Chrome does gc on inactive tabs so if your users use the application constantly it may be difficult to release memory. Sorry for not being of much help. – Aug 10 '16 at 09:24
You are right - the first version seems to be memory-constant in Chrome. In IE11 the first version is also going constantly up in memory without freeing it. The actual version with purgeFrame logic keeps memory in Chrome, too in my case. So perhaps we have a little hint where we can look. – Mhastrich Aug 10 '16 at 09:52

Memory leak when using iFrames with javaScript

1 Answers1

Linked