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.

Sign up for GitHub

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

Jump to bottom

bug(Drag And Drop): Performance issues with zone-patch-rxjs #23248

Closed
tmtron opened this issue Jul 27, 2021 · 1 comment · Fixed by #23272
Closed

bug(Drag And Drop): Performance issues with zone-patch-rxjs #23248

tmtron opened this issue Jul 27, 2021 · 1 comment · Fixed by #23272
Assignees
@crisbeto
Labels
area: cdk/drag-drop P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent perf This issue is related to performance

Comments

@tmtron
Copy link

tmtron commented Jul 27, 2021

Reproduction

https://stackblitz.com/edit/angular-paeawh-zdxwqh?file=src%2Fapp%2Fdialog-overview-example.ts

Steps to reproduce:

  1. click the Generate button
  2. notice how long it takes until the list is rendered
  3. depending on the performance of your CPU you may need to increase the no of list items (in the 1. input)

Expected Behavior

A list with only 100 items should render very fast.

Actual Behavior

Rendering is very slow which makes the app unusable on low-performance devices (or when there are many list items).

On my PC (8 cores@4GHz), rendering of only 200 items takes about 5 seconds in the Stackblitz example.
Even in the production build, this problem persists (rendering of 200 items takes about 2 seconds)

Environment

  • Angular:
  • CDK/Material: 12.1.1
  • Browser(s): Google Chroem
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Notes

The issue only happens when we use both: cdkDrag and zone-patch-rxjs:

  • When we remove cdkDrag from the list items, rendering is fast.
  • When we remove (or comment out) the following line from polyfill.ts the rendering is very fast (as expected). 
    import 'zone.js/dist/zone-patch-rxjs';
    Unfortunately we need this patch, because otherwise the rest of the application has performance issues (RxJs is used a lot in the app)
@tmtron tmtron added the needs triage This issue needs to be triaged by the team label Jul 27, 2021
@crisbeto crisbeto self-assigned this Jul 28, 2021
@crisbeto crisbeto added area: cdk/drag-drop needs investigation A member of the team needs to do further investigation to determine the root cause P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent perf This issue is related to performance and removed needs triage This issue needs to be triaged by the team labels Jul 28, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 29, 2021
@crisbeto
perf(cdk/drag-drop): avoid excessive change detections with zone-patc…
e98185a 
…h-rxjs

The `CdkDrag` directive subscribes to `NgZone.onStable` on init and then unsubscribes after the first emit. This is usually fine, but it can cause change detections if the app is using `zone-patch-rxjs`.

These changes explicitly run a few sensitive calls outside the zone.

Fixes angular#23248.
@crisbeto crisbeto mentioned this issue Jul 29, 2021
Merged
@crisbeto crisbeto added has pr and removed needs investigation A member of the team needs to do further investigation to determine the root cause labels Jul 29, 2021
zarend pushed a commit that referenced this issue Aug 4, 2021
@crisbeto
perf(cdk/drag-drop): avoid excessive change detections with zone-patc…
0baca18 
…h-rxjs (#23272)

The `CdkDrag` directive subscribes to `NgZone.onStable` on init and then unsubscribes after the first emit. This is usually fine, but it can cause change detections if the app is using `zone-patch-rxjs`.

These changes explicitly run a few sensitive calls outside the zone.

Fixes #23248.
zarend pushed a commit that referenced this issue Aug 4, 2021
@crisbeto @zarend
perf(cdk/drag-drop): avoid excessive change detections with zone-patc…
7d29bc3 
…h-rxjs (#23272)

The `CdkDrag` directive subscribes to `NgZone.onStable` on init and then unsubscribes after the first emit. This is usually fine, but it can cause change detections if the app is using `zone-patch-rxjs`.

These changes explicitly run a few sensitive calls outside the zone.

Fixes #23248.

(cherry picked from commit 0baca18)
zarend pushed a commit that referenced this issue Aug 4, 2021
@crisbeto @zarend
perf(cdk/drag-drop): avoid excessive change detections with zone-patc…
53b34f9 
…h-rxjs (#23272)

The `CdkDrag` directive subscribes to `NgZone.onStable` on init and then unsubscribes after the first emit. This is usually fine, but it can cause change detections if the app is using `zone-patch-rxjs`.

These changes explicitly run a few sensitive calls outside the zone.

Fixes #23248.

(cherry picked from commit 0baca18)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: cdk/drag-drop P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent perf This issue is related to performance
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

perf(cdk/drag-drop): avoid excessive change detections with zone-patch-rxjs crisbeto/material2
2 participants
@crisbeto @tmtron