添加/删除 IFrame 时出现 IFrame 内存泄漏答案

【问题标题】：IFrame Memory Leak when adding/removing IFrames添加/删除 IFrame 时出现 IFrame 内存泄漏
【发布时间】：2018-06-28 03:11:47
【问题描述】：

我有以下 HTML 可以重现我看到的问题。随着我随着时间的推移添加/删除 IFrame，浏览器永远不会释放 IFrame 内存。结果，内存会随着时间的推移而增长和增长，从而导致性能下降。我已经在 Safari/IE11/Edge 上看到了这种影响，而 Firefox/Chrome 处理得更好。有人对如何规避 IFrame 内存泄漏有任何提示吗？

<html>
<body>
<button onclick="add()">ADD</button>
<button onclick="remove()">REMOVE</button>
    <script>
  function add() {
    var ifrm = document.createElement('iframe');
    ifrm.setAttribute('id', 'ifrm');
    ifrm.setAttribute('src', 'http://somewebsite.com');
    document.body.appendChild(ifrm);
  }
  function remove() {
    document.body.removeChild(document.getElementById('ifrm'));
  }
    </script>
</body>
</html>

【问题讨论】：

我遇到了同样的问题。尝试更改为打开 IE11 的新窗口。

标签： javascript iframe memory-leaks safari internet-explorer-11

【解决方案1】：

试试这些操作：

将iframe url设置为空白页，如“”；
打破您页面的引用，这些引用可能引用到 iframe 页面的对象；
将 iframe 页面创建的所有对象设置为 null 或未定义。

操作2和3只有在iframe的页面是自己开发的情况下才可用。

如果你做了1和2，那么chrome会立即释放iframe页面分配的js堆。

如果您执行了 1、2 和 3，那么 firefox 也会立即释放 js 堆。

但是，即使你做了上面所有的操作，Safari也不会在一段时间内释放js堆。

【讨论】：

【解决方案2】：

我写的这个 sn-p 可以在删除之前帮助清理 iframe：

(function () {
    var beforeKeys = []
    for (var k in window) {
        beforeKeys.push(k)
    }

    function wipeCreatedKeys() {
        for (var k in window) {
            if (beforeKeys.indexOf(k) !== -1) {
                continue
            }
            window[k] = null
        }
    }

    window.wipeCreatedKeys = wipeCreatedKeys;
})();

尽快将其添加到您的iframe，并在卸载/删除之前致电wipeCreatedKeys。

Firefox 的主要性能改进。不过，Chrome 不需要。

【讨论】：