Javascript 中的 iframe 和内存管理答案

【问题标题】：Iframes and memory management in JavascriptJavascript 中的 iframe 和内存管理
【发布时间】：2012-08-26 07:44:26
【问题描述】：

我有将页面加载到 iframe 中的链接。我一直在使用 Google Chrome 的内存堆分析器监控内存中的数据累积，我注意到内存中有一些泄漏。

我加载了页面并拍摄了第一个快照，总和为2.69 MB。我单击了在 iframe 中打开页面的链接，并拍摄了另一个快照，总共给了我14.58 MB。我使用以下 jquery sn-p 删除了 iframe：

$('#myframe').unbind();
$('#myframe').remove();
/*
* By the way, I also tried $('#myframe > *') as a selector. 
* It still didn't work. Even if it would, it doesn't look like a viable solution to me.
* It looks too resource intensive.
*
* I forgot to mention that I am not using Ajax to load my pages
*/

我又拍了一张快照，得到了5.28 MB，这表明2.59 MB与初始值有偏差，根据我的理解，这表明内存泄漏。

现在，我的问题是：如果我删除了一个 iframe（包括其中加载的文档），垃圾收集器是否发现有必要从内存中删除该文档中包含的所有对象？还是我必须手动执行此操作？

我认为如果我将文档加载到 iframe 中，它的大小不会影响父页面上的内存使用。虽然我认为它将被视为一个单独的窗口，但显然这不是我的一个明智的假设。

关于如何解决这个问题的任何建议？

谢谢。

【问题讨论】：

这个线程似乎是这个问题的一个很好的切入点：stackoverflow.com/questions/3785258/…。
父窗口卸载后内存会怎样？
谢谢。如果我刷新父窗口，内存会回到2.69 MB

标签： javascript jquery memory-management iframe

【解决方案1】：

在 iframe 中，在删除之前触发重新加载，然后将其删除。

<a href="#">Remove</a>
<iframe src="url" />

$('a').click(function(){
    $('iframe')[0].contentWindow.location.reload();
    setTimeout(function(){
       $('iframe').remove();
    }, 1000);
});

DEMO here.

此外，您也可以进行手动清理 - 即，如果您的 cookie 或 HTML5 localStorage 中有数据。

window.onbeforeunload = function(){
    $(document).unbind().die();    //remove listeners on document
    $(document).find('*').unbind().die(); //remove listeners on all nodes
    //clean up cookies
    /remove items from localStorage
}

【讨论】：

很遗憾没有解决我的 iOS 网页视图内存泄漏问题
感谢 Robin，您分享的第一个选项非常棒，而且效果很好。我打开 8 个 iframe，获得了 20 MB，在关闭所有 iframe 并按照您解释的方式进行清理后，我可以收回所有 20 MB。精湛的罗宾先生...
当我的 iframe 不加载实际 URL 而是将 HTMML、JS 和 CSS 脚本注入到生成的 iframe 中时，你知道我该怎么做吗？
解决方法对我有用！从 2012 年到现在，可能没有人向 Google 开过票……

【解决方案2】：

如果 iframe 中的任何对象在主窗口中的对象中被引用，则该对象不会从 DOM 中删除，因此，如果您有这样的事情：

主窗口：

var object = {};
function iframe_call(data){
    object.iframe_data = data.something
}

iframe：

function onClick(){
    parent_object.iframe_call(this);
}

尤其是当您引用 DOM 对象时会发生这种情况。

【讨论】：

谢谢Cuzzea。我明白你的意思，但在这个阶段我没有与 iframe 中的任何东西进行交互。我刚刚加载了随机页面。现在我还没有在 iframe 和父窗口之间建立任何联系。此外，我还删除了 iframe 及其内容。
您可以检查比较这两个配置文件的确切变化。你可以看到winmerge做一行一行的同情。不要忘记按构造函数排序，所以顺序是一样的

【解决方案3】：

var frame = document.getElementById("myframe");
frame.src = "about:blank";

这对我有用并防止了内存泄漏。 ig 你必须销毁 iframe 的父级，延迟执行以防止内存泄漏

【讨论】：