Description

We have a situation where there are 3 levels of nested iframes. The 3rd iframe initializes few heavy size objects, but this iframe is discarded and rebuilt in the DOM whenever user navigates across the application.

A memory leak is noticed where heap size of the application keeps on increasing whenever a new iframe at 3rd level is discarded and constructed.

Link to test case

Gotohttps://vamsikrishnach90.github.io/ in Chrome. Open developer tools (Hit F12) and navigate to Memory Tab. Pay attention to the JS heap size which is arppox 5 MB.

1. Click on 'Load Child Page' button. A child page is loaded inside the iframe of parent page.
2. Click on 'Bombard the page!' button on the child page. This will initialize 1 global variable of custom type with a huge json. Open devtools and check for the heap which is now 75 MB.
3. Click on 'Remove Child Page' button. The child page (iframe) is removed from the DOM.

Repeat steps 1 - 3 for about 2 more times. After step 2, note down the heap size. You'll notice that the heap keeps on increasing every time we add a child iframe and bombard it. Even though at step 3, we discard the frame, the heap is not claimed by the garbage collector.
Usecase demo help (Picture)

Observations

After repeating above 1-3 steps for 3x times, take a heap snapshot. Notice that the 3 instances of custom class 'Vamsi' that were created every time we added the child page and bombarded it still exist in the heap, even though the corresponding iframes are deleted from the DOM.

Notice in the object graph, that an unloadHandler() has been bound to the Window object belonging to the discarded iframes.Heap Memory Snapshot

Root Cause

The child page has a jquery lookup statement in the parent page:
$('div.msg-banner', window.parent.document).show();

This one line statement is causing the issue for memory leak.

$('div.msg-banner', window.parent.document)

The above part of the statement, calls JQuery find api. This find API is overridden bySizzle, a pure-JavaScript CSS selector engine adopted by JQuery. This find api from JQuery calls Sizzle's setDocument functionSee Picture which registers an unloadHandler() with the requested document's(window.parent.document) window object. This is leading in the parent page's unload event bound to unloadHandler() callback function sitting in the child page. Hence, even though the child page iframe is removed from the DOM, the window object is never eligible to be garbage collected and is the reason for memory leak.

Link toStackoverflow thread:https://stackoverflow.com/questions/76579826/iframes-memory-leak-with-jquery-and-sizzle