Javascript中的iframe和內存管理

[英]Iframes and memory management in Javascript


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中。我一直在使用谷歌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 MB in 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 MB which indicated a deviation of 2.59 MB from 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.

謝謝。

3 个解决方案

#1


16  

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.

DEMO在這里。

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
}

#2


2  

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:

IFRAME:

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

this happens especially if you refer DOM objects.

如果您引用DOM對象,則會發生這種情況。

#3


0  

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

這對我有用,可以防止內存泄漏。你必須銷毀iframe的父級,做一些延遲以防止內存泄漏


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/08/26/720a84e3623e16c3588cf4b2dbf768c3.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com