Question

我有以下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>

Answer 1

尝试以下操作：

将iframe网址设置为空白页，例如“”；
破坏页面的引用，可能引用iframe页面的对象；
将iframe页面创建的所有对象设置为null或未定义。

仅当iframe页面是由您自己开发时，操作2和3才可用。

如果您执行了1和2，则chrome将立即释放由iframe页面分配的js堆。

如果您执行了1、2和3，则Firefox也将立即释放js堆。

但是，即使您执行了上述所有操作，Safari也不会在一段时间内释放js堆。

Answer 2

我写了这个片段，它可以帮助在删除 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 不需要那个。

添加/删除IFrame时IFrame内存泄漏

2 个答案: