Mitigating IE 11 Memory Leak

[Karrow]

Hello! I've been developing a game using Babylon for our client for a few months now. It has essentially developed into a 360 video player with interactive components, but I probably shouldn't reveal much more than that.

For a few weeks now, I've been looking into IE 11's memory leak issue. For those who don't know, IE 11's garbage collector is broken, and reloading the page will not remove quite everything from memory. The memory will continue to pile up each page reload, until eventually the browser crashes. See https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10186458/  and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11106982/ . Microsoft doesn't support IE 11 anymore, but the browser is used by the majority of our client's users.

I have researched it and gained a better understanding of it, but have had no luck in mitigating it. Other JS libraries have bug reports on the issue, and individuals have come up with solutions that work for that library:

Polymer: https://github.com/Polymer/polymer/issues/3430#issuecomment-248034098

AngularJS: https://github.com/angular/angular/issues/17637#issuecomment-387801113

Webcomponents (comments point back to the Polymer solution): https://github.com/webcomponents/webcomponentsjs/issues/541

 

I added only the library-agnostic code from the Polymer thread to my code, which removed document and window event listeners that may have been stuck in memory. It doesn't seem to have impacted the leak on my site, but it can't hurt so I left it in.

I'm having trouble figuring out what hacks to apply in my project to help, or what methods I should change or avoid. All I could think of was to add `scene.dispose()` on unload. I know this isn't a Babylon issue per se, but has anyone come across this and attempted to solve it? What did you try?

Here is my current cleanup script:

// https://github.com/Polymer/polymer/issues/3430#issuecomment-248034098

var wrapper = function( name, fn, opts) {
  // add events to cache/queue
  addEventToQueue(this, name, fn, opts);
  this.__oldAddEvent( name, fn, opts);
};

function addEventToQueue( obj, name, fn, opts ) {
  console.log('EVENT ADDED TO CLEANUP LIST: ' + (obj.nodeName ? obj.nodeName : 'window') + '/' + name);
  
  obj.__eventListeners = obj.__eventListeners || {};
  obj.__eventListeners[name] = obj.__eventListeners[name] || [];

  obj.__eventListeners[name].push({fn: fn, opts: opts});
}

function initListener() {
  document.__oldAddEvent = document.addEventListener;
  document.addEventListener = wrapper;

  window.__oldAddEvent = window.addEventListener;
  window.addEventListener = wrapper;
};

function cleanupApp() {
  cleanupListeners();
  cleanupScene();
}

function cleanupListeners() {
  cleanupListener(document);
  cleanupListener(window);
}

function cleanupListener (obj) {
  for (var k in (obj.__eventListeners || {}) ) {
    var fns = obj.__eventListeners[k];
    for ( var i = 0; i < fns.length; i++ ) {

      obj.removeEventListener(k, fns[i].fn, fns[i].opts);
    }
  }
}

function cleanupScene() {
  if(scene) scene.dispose();
}

initListener();
window.onunload = cleanupApp;

 

Thank you!

[Guest]

Interesting question. I did not work on that but would like to see if others can help here

 

One thing you should try would be to also dispose the engine itself

[Karrow]

Thanks for the response! I saw your early article on memory leak and optimization thoughts while developing Babylon, but obviously the fixes you've developed over time only help in browsers that... work properly ?

Most sites don't exactly have a fix for this. You can refresh the MSN site (IE11 default home page I think) over and over, and watch the memory usage climb. It eventually crashes. Unfortunately though, since I'm loading both a large 360 video and rendering 3D data, the memory usage of this site is high in general and there isn't as much available memory to waste.

We've informed our clients that they just need to close and re-open IE11 if they have memory issues, and that it's IE11's fault, but we said we'd look into "fixing" it.

2 hours ago, Deltakosh said:

dispose the engine itself

Gotcha, I'll add `engine.dispose()` to the unload functions and get back to you about it.

[Karrow]

Alright, I added `engine.dispose()` to unload, and... wasn't seeing a change.

I thought about it more, and remembered that someone had mentioned the IE 11 Dev Tools may have its own memory leak issue. Since I used IE 11's memory profiling to test for issues, it may have messed with my conclusion the site had a leak. I switched to Task Manager instead and did a few tests; here were the steps:

 

For each numbered step, I reloaded the page at least 9 times, then recorded the memory used after the page loading settled.

1. With scene and engine dispose methods: Memory remained relatively stable, no specific increase or decrease.

-> Close IE 11 and clear cache, then

2. Without scene and engine dispose: Memory remained relatively stable, no specific increase or decrease.

-> Close IE 11 and clear cache, enable Dev tools, then

3. Without scene and engine dispose: Memory climbed steadily, about 40-50MB per reload.

-> Disable Dev tools (no closing browser), then

4. Without scene and engine dispose: Memory seemed to climb, yet more sporadically and not as severely.

 

So, it's very possible IE 11's Dev tools caused the memory leak just by being open. The last test showed it's also possible the leak continues after Dev tools are closed (if you don't restart the browser). I may continue to check if Javascript efforts to dispose/remove objects will help when Dev tools are open, but I will most likely not waste any more time on it.

Thanks anyway!

[Guest]

Well what a mess! Sorry about all your burden

[Karrow]

Haha, that's okay! Boss agrees I can drop the issue ?

(Thanks for developing Babylon by the way!! It was pretty much the only solution we found when our client demanded an in-browser 3D game that had to work in IE 11, and it works great! I hope someday I can share details on the project with you!)