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

[tmtron]

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)