Memory leaks in virtual scrolling mode

[Alex-Tsyganok]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Grid control has huge memory consumption when works in virtual scrolling mode.

Here example memory consumption after scrolling several times from top to bottom.

Expected behavior
No memory leaks in component.

Reproduction of the problem
Open demo page http://swimlane.github.io/ngx-datatable/#
Switch to 10k rows example.
Use some memory profiler to verify browser memory consumption.
Scroll grip up and down several times.

What is the motivation / use case for changing the behavior?
Improve component performance, in case of SPA such memory leaks are critical.

Please tell us about your environment:

• Table version: 0.7.x
  6.0.0

• Angular version: 2.0.x
  2.4.4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[amcdnl]

Are you seeing this in angular prod mode too?

[Alex-Tsyganok]

Correct me if i'm wrong, demo page runs in production mode http://swimlane.github.io/ngx-datatable/#
My example was created from demo page.

[adammedford]

I've recently run into this issue as well. Virtual scrolling was the primary reason my team took interest in this project; our use case necessitates large amounts of data being displayed/scrollable at once.

Without virtual scrolling (and using the default templates) an average page displays 25k-68k elements at once. With virtual scrolling this same metric averages 1500 elements.

The problem is that with virtual scrolling, scrolling from top to bottom sees memory usage steadily climb several MB at a time. If a cell template is provided (still relatively low frills) the same usage sees memory usage quickly reach 300MB. Further attempts to profile after this point usually result in crashing the browser. This has all been done in production mode.

[amcdnl]

@adammedford - Any clues to what it might be. I gave it a run last night and didn't see anything obvious.

[adammedford]

@amcdnl I rechecked and I think I was mistaken before when I reported memory leaks with the vanilla templates. Having spent more time with it, I now suspect this might be an issue with Angular itself; I've found another 3rd party component that appears to leak exclusively when a TemplateRef is provided. My personal experience has been that profiling Angular 2 apps is a nightmare and my best guess points at an issue with ZoneTasks.

Edit:
Possibly related angular/angular#14919

[marjan-georgiev]

I took a look at this, and noticed it happens only if we use custom templates for the columns.

If I remove the templates in the demo page, the memory leak does not happen.

https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/virtual.ts#L26-L28

I believe it is caused by the issue @adammedford linked to.

[marjan-georgiev]

Pushed a fix in master. Will be in 8.0.0 release. I used the workaround described here: angular/angular#14835 (comment)

[amcdnl]

This was released just now in 7.1.1