-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
bug: angular change detection gets triggered several times during element creation #18020
Comments
Hi there, Thanks for the issue. We do not maintain development of zone.js. If you are running into an issue with zone.js, you can submit an issue on the zone.js GitHub. I am going to close this as this is not an Ionic issue. The changes made in zone.js affect Web Components in general, not just Ionic components. Thanks for using Ionic! |
Hmm. I’m not sure if this issue belongs to zone.js. zone.js is a vital part of angular ecosystem and @ionic/angular is supposed to work well with it. In fact, @ionic/angular deliberately initialises Ionic inside the angular zone excluding certain things. As such, it seems to me like this has more to do with how @ionic/angular integrates itself into Angular than how zone.js interacts with web components in general. |
Hi there, Thanks for the follow up. Can you provide an example repository where your app is slow as a result of having this zone.js change? Thanks! |
@liamdebeasi I’ll give it a try over the weekend. When I experimented it, it reproduced even with 100 |
Example repository:https://github.com/ippeiukai/ionic-issue18020 Without
|
@ippeiukai, @liamdebeasi, just like @ippeiukai said, I checked the source of So if those |
Hi @ippeiukai, What @JiaLiPassion said sums things up pretty well. On the Ionic side, we are going to look into a way we can automatically include Thanks for bringing this to our attention! I'll post again here when I have an update. 🙂 |
Hi @ippeiukai, I updated the Ionic starters to include this flag by default. Additionally, we will update the documentation to provide instructions for developers who already have Ionic apps/create Ionic apps outside of the CLI. Thanks! |
Hi @liamdebeasi , |
The docs should be deployed soon, but here is the source that you can read: ionic-team/ionic-docs#651 |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Bug Report
Ionic version:
[x] 4.x
Current behavior:
Having many Ionic 4 components on a page slows down the initial display significantly. Having investigated the performance profile, it was found that custom element callbacks such as attributeChangedCallback were triggered many many times and Angular's change detection (NgZone#onMicrotaskEmpty -> ApplicationRef#tick) gets triggered every time.
Expected behavior:
Unnecessary change detection should not run while each Ionic component's element are created.
Steps to reproduce:
Opening (i.e. navigating to) a page with many many Ionic components while taking profile on Chrome Inspector's Performance tab. Searching for 'detectChanges' will tell you a large number of change detection has run.
Related code:
Having following line in zone-flags.ts, which is imported in polyfills.ts just before zone.js is imported, resolves the issue.
Alternatively downgrading zone.js to 0.8.26 should have the same effect as zone.js only patches customElement v1 since 0.8.27 (see angular/zone.js#1133).
Other information:
I have given a quick search over existing issues:
Ionic info:
The text was updated successfully, but these errors were encountered: