Javascript 中的 iframe 和内存管理

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12128458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 15:24:04  来源:igfitidea点击:

Iframes and memory management in Javascript

javascriptjquerymemory-managementiframe

提问by Sthe

I have links that load pages into iframes. I have been monitoring the accumulation of data in memory using Google Chrome's memory heap profiler and I noticed some leaks in memory.

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

I loaded the page and took the first snapshot which added up to 2.69 MB. I clicked the link that opens a page into an iframe and took another snapshot giving me 14.58 MBin total. I removed the iframe using the following jquery snippet:

我加载了页面并拍摄了第一个快照,该快照加起来为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
*/

I took another snapshot and got 5.28 MBwhich indicated a deviation of 2.59 MBfrom the initial value, which according to my understanding indicates memory leackage.

我又拍了5.28 MB一张快照,发现它2.59 MB与初始值有偏差,根据我的理解,这表示内存泄漏。

Now, my question is: If I remove an iframe (which includes the document loaded in it) doesn't the garbage collector find it necessary to also remove all the objects contained in that document from memory? Or will I have to do this manually?

现在,我的问题是:如果我删除一个 iframe(其中包括加载到其中的文档),垃圾收集器是不是也需要从内存中删除该文档中包含的所有对象?还是我必须手动执行此操作?

I thought that if I load a document into an iframe, it's size will not affect the memory use on the parent page. I though it will be considered a separate window, but obviously that wasn't a well informed assumption on my part.

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

Any suggestions on how to tackle this?

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

Thank you.

谢谢你。

采纳答案by Robin Maben

In the iframe, trigger a reload before removing it and then remove it.

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

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

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

DEMO here.

演示在这里

Addionally, you can do a manual cleaning up too - i.e. if you have data in your cookies or HTML5 localStorage.

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

回答by cuzzea

If any objects from the iframe is referenced in a object in the main window that object won't be removed from the DOM, so, if you have something like this:

如果主窗口中的对象引用了 iframe 中的任何对象,则该对象不会从 DOM 中删除,因此,如果您有这样的内容:

Main window:

主窗口:

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

iframe:

框架:

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

this happens especially if you refer DOM objects.

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

回答by Antonis

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

This worked from me and prevented memory leaks. Ig you must destroy the parent of the iframe, do it with some delay to prevent memory leak

这对我有用并防止了内存泄漏。ig 你必须销毁 iframe 的父级,做一些延迟以防止内存泄漏