Javascript中的iframe和内存管理

Question

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

我加载了页面并拍摄了第一张快照，最多增加了2.69 MB 。 我点击了将页面打开到iframe的链接，并拍了另一张快照，总共给了我14.58 MB 。 我使用以下jquery代码段删除了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中，它的大小不会影响父页面上的内存使用。 我虽然它将被视为一个单独的窗口，但显然我不是一个明智的假设。

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

谢谢。

Answer 1

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

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

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

DEMO在这里 。

另外，您也可以进行手动清理 - 即，如果您的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
}

Answer 2

如果在主窗口的对象中引用iframe中的任何对象，则该对象将不会从DOM中删除，因此，如果您有类似这样的内容：

主窗口：

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

IFRAME：

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

如果您引用DOM对象，则会发生这种情况。

Answer 3

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

这对我有用，可以防止内存泄漏。 你必须销毁iframe的父节点，做一些延迟以防止内存泄漏