Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update virtualScroll.component.ts #6

Merged
merged 5 commits into from
Dec 1, 2017
Merged

Conversation

zy-serguei
Copy link
Contributor

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.

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
Copy link
Owner

dinony commented Jun 12, 2017

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

@zy-serguei
Copy link
Contributor Author

zy-serguei commented Jun 12, 2017 via email

@dinony
Copy link
Owner

dinony commented Jun 12, 2017

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
Copy link
Contributor Author

zy-serguei commented Jun 12, 2017 via email

@dinony dinony added this to the Maintenance August 2017 milestone Aug 10, 2017
@BogdanPolitaiev
Copy link

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
Copy link
Owner

dinony commented Sep 21, 2017

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 dinony merged commit 4a282b5 into dinony:master Dec 1, 2017
@dinony
Copy link
Owner

dinony commented Dec 1, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants