In my company we are working on a SPA with multiple iframes. Occasionally some of the frames would not load on IE 11 because IE ran out of memory (the iframe content could be quite heavy on the RAM but things are okay on Chrome and FF).
In fact we monitored the fact that each time we reload the page, the memory used (data taken from either IE memory analyzer or the windows task manager) kept increasing until it reaches a 1.6Gb threshold.
I've found this very interesting post and I thought that all my troubles would fly away. As we are not using jQuery I adapted this provided snippet to vanilla JS. My idea was to clear the frames before the page reload to check if the memory used would be reclaimed.
Here is the code I wrote :
window.addEventListener('beforeunload', function () {
[].slice.call(document.querySelectorAll('iframe')).forEach(function (frame) {
// remove all frame children
while (frame.contentWindow.document.body.firstChild) {
frame.contentWindow.document.body.removeChild(frame.contentWindow.document.body.firstChild);
}
frame.src = 'about:blank';
frame.parentNode.removeChild(frame);
});
// force garbarge collection for IE only
window.CollectGarbage && window.CollectGarbage();
});
I then opened the memory profiler of IE and reloaded the application. However very little of the memory was reclaimed and I ended up with something like this memory diagram
Am I missing something. Has some any information or piece of advice ?
Thank you.
