Detect when IE11, with its built-in memory leak, runs out of memory (1.5GB recyclable pool)

Question

IE11 has a well-documented iframe memory leak. In a SPA, if you are using iframes the memory will grow to about 1.5GB after which time it will slow down until a crash.

My task is to detect when the browser is about to crash and restart the page soon enough. The application is Vue.JS that is embedded inside ASP.NET MVC.

What kind of memory/performance detection is available in browser in IE11?

Some kind of used memory measure library?
Some kind of performance measuring library?
Counting created javascript objects?
Counting created iframes?

Other ideas? Thanks. :)

Sources: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10186458/ https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8449104/ http://support.sas.com/kb/60/514.html

"*well-documented iframe memory leak*" - could you add a link to this documentation, please? — Bergi, Feb 13 '19 at 20:02

score 3 · Answer 1 · answered Feb 12 '19 at 18:43

As far as my experience with this goes, your best bet to mitigate this is to reduce re-creation of iframes and reduce total memory used so the leak is small (for example by code-splitting unused code, removing large libraries, etc). You can then do a test to approximate how much memory you expect to leak per page load (or whatever relevant metric in your case) and come up with a heuristic to reload the app (for example, after 50 page loads).

Keep in mind that sometimes reloading the app will not help IE reclaim memory. There is a weird workaround for this - you can open a new tab, navigate to your app, switch to that tab, and close the old tab. Obviously not an ideal user experience, but it is more reliable than a page refresh.

In other cases memory is leaking because you have a reference to the iframe from somewhere in the main window, or did not clean up event handlers within the iframe before removing it - I assume you have checked for this from the description, but I thought it wouldn't hurt to mention it :).

score 1 · Accepted Answer · answered Feb 18 '19 at 11:59

1

This is what I ended up using to detect IE11 running out of memory.

Main idea: Timer every 1 second. If 1 second timer takes 1 minute, we just froze.

var startTime, endTime;

function start() {
    startTime = new Date();
};

function end() {
    endTime = new Date();
    var timeDiff = endTime - startTime; //in ms
    // strip the ms
    timeDiff /= 1000;

    // get seconds 
    var seconds = Math.round(timeDiff);
    console.log(seconds + " seconds");

    if (seconds > 60)
        console.log("IE11 just froze. We need to refresh.");
}

start();

setInterval(function () {
    end();

    start();
}, 1000);

answered Feb 18 '19 at 11:59

Edza

1,364
3
14
24

1

You might want to stop the checking when the tab goes inactive though, as browsers are known to delay timers on background tabs. (I don't know about IE11 specifically, but this code doesn't seem to do browser detection). – Bergi Feb 18 '19 at 12:05
Great point! I have not released this to testing yet. Any tips on how could I know if the tab is being active? – Edza Feb 18 '19 at 12:56
We are using only IE11. :( – Edza Feb 18 '19 at 12:56
See https://stackoverflow.com/q/1060008/1048572, but you'll need to figure out which way you need for IE11 specifically. Also [this (*very* old) test](https://stackoverflow.com/a/16033979/1048572) suggests that IE might not pause `setInterval` at all, so it might work ok, but you should try it out. – Bergi Feb 18 '19 at 14:17
I did some testing, and IE11 does not seem to care. Thx anyways! :) – Edza Feb 19 '19 at 08:25

Detect when IE11, with its built-in memory leak, runs out of memory (1.5GB recyclable pool)

2 Answers2

Linked