Управление iframe и памятью в Javascript

У меня есть ссылки, которые загружают страницы в iframe. Я наблюдаю за накоплением данных в памяти с помощью профайлера кучи памяти Google Chrome, и я заметил некоторые утечки в памяти.

Я загрузил страницу и сделал первый снимок, добавленный до 2.69 MB. Я нажал ссылку, открывающую страницу в iframe, и сделал еще один снимок, дающий мне 14.58 MB. Я удалил iframe, используя следующий фрагмент jquery:

$('#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, размер его не повлияет на использование памяти на родительской странице. Я, хотя это будет рассматриваться как отдельное окно, но, очевидно, это не было хорошо информированным предположением с моей стороны.

Любые предложения по тому, как справиться с этим?

Спасибо.

Ответ 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
}

Ответ 2

Если какие-либо объекты из iframe ссылаются на объект в главном окне, объект не будет удален из DOM, поэтому, если у вас есть что-то вроде этого:

Главное окно:

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

IFrame:

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

это происходит, особенно если вы ссылаетесь на объекты DOM.

Ответ 3

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

Это работало от меня и предотвратило утечку памяти. Ig вы должны уничтожить родителя iframe, сделайте это с некоторой задержкой, чтобы предотвратить утечку памяти