bug: angular change detection gets triggered several times during element creation

[ippeiukai]

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:

• Ionic 4.2.0
• Angular 7.2.11
• zone.js 0.8.29

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.

(window as any).__Zone_disable_customElements = true;

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:

• performance issue reported in Performance issue in creating ion-select of 250 options #17641 may be related

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.3.6
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.4, browser 6.0.0, ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic 4.1.7, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.4.1, (and 21 other plugins)

System:

   Android SDK Tools : 26.0.2 (/■■■■■/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 7.0.0
   NodeJS            : v8.9.1 (/■■■■■/node/v8.9.1/bin/node)
   npm               : 6.8.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[liamdebeasi]

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!

[ippeiukai]

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.
https://github.com/ionic-team/ionic/blob/v4.2.0/angular/src/app-initialize.ts

[liamdebeasi]

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!

[ippeiukai]

@liamdebeasi I’ll give it a try over the weekend. When I experimented it, it reproduced even with 100 ion-items in a list; shouldn’t be too hard to make a sample app to publish.

[ippeiukai]

Example repository:

https://github.com/ippeiukai/ionic-issue18020

---

Without __Zone_disable_customElements

https://github.com/ippeiukai/ionic-issue18020/tree/master

Profile-20190415T105232.json.zip

---

With __Zone_disable_customElements

https://github.com/ippeiukai/ionic-issue18020/tree/with_zone_custom_elements_disabled

Profile-20190415T105300.json.zip

[JiaLiPassion]

@ippeiukai, @liamdebeasi, just like @ippeiukai said, zone.js patched all APIs of CustomElements from 0.8.27, and will cause additional change detection.
And because now all ionic component is WebComponent, so this issue occured.

I checked the source of ionic/stencil,
For example, https://github.com/ionic-team/stencil/blob/647a47d34631e3f5a7a5335cc7cacd0a75ba71b6/src/core/attribute-changed.ts
stencil basically will register such kind of callback to handle such as attribute/property mapping handlings.

So if those callbacks(connected/attributeChangedCallback/etc... which are registered by stencil or ionic, will not be invoked from outside of Angular, for example from some vanilla js on the same page. We can just disable zone.js patching Custom Elements. And if this is the common case in ionic, maybe we can deploy this zone-flag.ts with (window as any).__Zone_disable_customElements = true; inside with ionic together.

[liamdebeasi]

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 (window as any).__Zone_disable_customElements = true; for all Ionic/Angular users. While I don't think this is an Ionic bug, I do agree that the net result is undesirable in the situation you presented.

Thanks for bringing this to our attention! I'll post again here when I have an update. 🙂

[liamdebeasi]

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!

[LuizTokuhara]

Hi @liamdebeasi ,
Could you please provide the doc link for this fix.

[liamdebeasi]

The docs should be deployed soon, but here is the source that you can read: ionic-team/ionic-docs#651