Iframes and memory management in Javascript

Question

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.

This thread seems to be a good entry point for this issue : stackoverflow.com/questions/3785258/… . — bperson
– bperson, Commented Aug 26, 2012 at 17:37
What happens to the memory after the parent window is unloaded? — Lee Kowalkowski
– Lee Kowalkowski, Commented Aug 28, 2012 at 15:30
Thanks. If I refresh the parent window, the memory goes back to 2.69 MB — Sthe
– Sthe, Commented Aug 29, 2012 at 12:55

Robin Maben · Accepted Answer · 2012-09-01 17:25:56Z

21

+50

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 }

answered Sep 1, 2012 at 17:25

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

andrewb Over a year ago

Unfortunately didn't resolve my iOS web view memory leak

Rupesh Kumar Tiwari Over a year ago

Thanks Robin, First option which you shared is fantastic and it worked. I open 8 iframes and I gained 20 MB and after closing all of them and cleaning the way you explained I could reclaim all of the 20 MB back. superb Robin sir...

JasonDavis Over a year ago

Do you know how I can do something like this when my Iframe does not load an actual URL but instead injects HTMML and JS and CSS scripts into a generated Iframe?

salvolds Over a year ago

The workaround is working for me! Nobody opened a ticket to Google from 2012 up to now probably...

strix25 Over a year ago

Warning! This does not work! In Chrome v116 this is even worse then calling just .remove() on iframe

donohoe · Accepted Answer · 2016-12-30 20:40:18Z

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:

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.

edited Dec 30, 2016 at 20:40

donohoe

14.2k4 gold badges40 silver badges61 bronze badges

answered Aug 29, 2012 at 13:00

cuzzea

1,51511 silver badges23 bronze badges

2 Comments

Sthe Over a year ago

Thank you Cuzzea. I see your point, but I am not interacting with anything within the iframe at this stage. I've just been loading random pages. Right now I have not made any connection between the iframe and parent window. Besides, I also remove the iframe along with it's contents.

cuzzea Over a year ago

you can check to see exactly what changed comparing the 2 profiles. You can see winmerge to do a line by line compassion. Don't forget to order by constructor so the order is the same

Antonis · Accepted Answer · 2016-11-27 16:49:15Z

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

Collectives™ on Stack Overflow

Iframes and memory management in Javascript

3 Answers 3

5 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Linked

Related