Memory leaks when open/close tabs

[golden-layout]

Memory leaks when open/close tabs

[bfattori]

Take a look at my alternative way to avoid bootstrapping Angular each time in issue #54

[natcohen]

Thanks, but in my case bootstraping angular in each tab is necessary... Indeed, I use the tabs exactly as webbrowser tabs so my app can be opened many times (if I bootstrap it once, a lot of conflicts would appear (listeners, variables, etc...)!).

I started with iframes but got into troubles (#34) so I followed your advice and bootstrap each tab. This works great except for @media (#51) and the leaks.

[joshribakoff]

Do you have hanging DOM nodes? In modern JS browsers, DOM nodes can have "retaining paths". For example if you have a reference var foo = jQuery('.foo'), and then you remove the element from the DOM but do not cleanup the JS variable "foo", you retain "hanging DOM nodes" in memory.

I'm not familiar with your particular issue, but this article helped me solve similar problems in other code - http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

For example, you didn't mention if you tried to force GC in the devtools. GC only happens every so often, and memory may appear to steadily increase prior to a GC invocation, with no correlation to the presence/absense of memory leaks. GC can be delayed for a very long time due to any number of reasons such as the thread not being idle, or not enough garbage having accumulated yet, as far as I know the browser makes no guarantees about when the memory is actually free'd. Even after a GC cycle occurs or is forced, not all garbage may be processed. It may take multiple such cycles to free up all memory, as far as I know. Also, if you're able to compare snapshots before & after & find the specific DOM nodes or other type(s) of garbage that is left over, that should help expedite a fix for this.

I also second the notion about bootstrapping tabs multiple times. I've never encountered a need to bootstrap multiple apps, where I couldn't just write a new directive that wraps them into a single new app & bootstrap that 1x. It may work, its just not the "Angular" way IMO. If you need initialization logic, its best to insert a directive into each tab using the $compile service, and put the initialization logic in a directive's link/controller functions:

Here's a golden layout component:

myLayout.registerComponent( 'template', function( container, state ){
                $http.get(state.templateId, {cache:true}).success(function(html) {
                    html = $compile('<div>'+html+'</div>')($rootScope);
                    container.getElement().html(html);
                    container.on( 'resize', function(){
                        $(window).trigger( 'resize' );
                    });
                });
            });

Use like this:

var myLayout = new GoldenLayout({
                settings: {
                    showPopoutIcon : false
                },
                content: [{
                    type: 'row',
                    isClosable: false,
                    content: [{
                        type: 'component',
                        title: 'hello world!',
                        componentName: 'template',
                        componentState: { templateId: 'foo/bar.html' },
                        isClosable: false
                    }]
                }]
            });

It should fetch the template 1x per session via $http & cache it. It will "bring to life" any directives found in the template via running it through $compile service, and bind the resize events which should help with any AngularJS/jQuery plugins.

[Jmales]

@natcohen Did you manage to solve this?

[natcohen]

@Jmales No...

[Jmales]

@natcohen Ty for the answer. How come it was closed then?
2 years later and I'm also having memory leaks with GL when using angular: #216