Update virtualScroll.component.ts

[zy-serguei]

Hi Dinony,
We experience poor scrolling performance in IE even if we set vsDebounceTime to a large value. After some investigation we have discovered that Angular change detection is triggered on each 'scroll' event despite debounceTime(). This can be prevented by wrapping Observable.fromEvent(..., 'scroll') in zone.runOutsideAngular().
I couldn't figure out how to create a cold observable with Observable.fromEvent as if subscribe() is called outside of zone.runOutsideAngular() Angular change detection is still triggered on each scroll event. The proposed solution adds an intermediate scroll$ Subject.
Kind regards,
Serguei.

[dinony]

Hi Serguei, strange, can you tell me, which IE version you are using?

[zy-serguei]

I’m using IE11, v.11.0.10240.17354, but it doesn’t really matter. Angular change detection is triggered on each scroll event in all browsers. It’s just the performance degradation is more noticeable in IE in our case (depends on the complexity of the UI to be updated, of course).

[dinony]

Ok, thanks! On the component level I'm using ChangeDetectionStrategy.OnPush. In combination with Observables, this allows me to exactly mark for check when necessary and to avoid unnecessary checks. So, the virtual scroll component subtree should be optimized for change detection.
Are you measuring performance on an isolated scroll example, or are you experiencing the performance degradation when embedded in your current application?

[zy-serguei]

It’s when I’m using it in my application indeed. To be clear, the delays don’t come from the component but from the hosting application. I think most applications will use Default rather than OnPush most of the time, so it’s best if virtualscroll limits the number of times it triggers Angular change detection.

[BogdanPolitaiev]

We experience the same problem as well. Change detection is triggered for entire page from top to bottom on every scroll event. For big pages performance degradation is very noticeable, especially in browsers with slow Javascript engines.
We use od-virtualscroll in many different components and not all of them use OnPush strategy.

Is there a need to actually trigger change detection for scroll event?
Any plans to merge this pull request?
Thanks for your hard work!

[dinony]

Hi @BogdanPolitaiev. Thanks, yep it's planned that I will look into this issue in September - I'm already late though, but it will happen!

[dinony]

Thanks for the help and for your patience! Changes will be in the next release.