Question

100

Iframes and memory management in Javascript

rated 0 times [ 106] [ 6] / answers: 1 / hits: 18722 / 12 Years ago, sun, august 26, 2012, 12:00:00

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.

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:

$('#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.

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?

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.

Any suggestions on how to tackle this?

Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

micah

Add To Favorites

Follow

Total Points: 295

Total Questions: 104

Total Answers: 92

Location: Namibia

Member since Mon, Feb 21, 2022

2 Years ago

micah questions

1 How can I track and send custom events with the new Google Analytics 4 (gtag.js)?

Thu, May 12, 22, 00:00, 2 Years ago

1 Losing useState Value on Refresh in React.js

Mon, Jan 24, 22, 00:00, 2 Years ago

1 React Material UI modal not opening

Thu, Dec 31, 20, 00:00, 4 Years ago

1 How to get value from async function in react-native?

Thu, Aug 27, 20, 00:00, 4 Years ago

1 Webpack resolve alias and compile file under that alias

Wed, Apr 15, 20, 00:00, 4 Years ago

View All

answered 12 Years ago ronniem · Accepted Answer

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

<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.

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

}