Question

我在（至少）IE11和Edge（在Chrome中的极小）中有一种奇怪的行为。我创建了一个iFrame，然后将其分离，但内存不断增加。在这个iFrame中，只加载了一个带有javaScript导入的空页面。

我找到了一些建议，将iFrame的src更改为about：blank但仍然无效。有谁知道出了什么问题？

编辑：

我尝试使用jQuery purgeFrame插件并更改了速度和迭代次数。

由于它似乎主要是IE11和Edge问题，我们也在https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8449104/

上发布了它

外框的新代码是：

<!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>

加载的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>

IE11中的内存使用情况（3x 1000个周期） Edge中的内存使用量（1x 1000个周期）

Answer 1

我运行了网页，并使用Chrome的任务管理器来监控标签的内存消耗。我将间隔数改为150，内存变为84MB，在那里停留了一段时间然后又降到了20MB。在IE中一段时间后内存消耗也会下降。

我的猜测是，当您删除iFrame并将变量设置为null时，内存不会立即释放，而是仅在一段时间后的垃圾回收期间释放。据我所知，你无法强行指示浏览器从JS进行垃圾收集。所以除了重写代码以不经常创建太多新的DOM对象之外，你无能为力。

将iFrame与javaScript

1 个答案: