Ionic 4 slow performance on user interaction

Update:

I have found one performance fix so far, which pretty much resolved the slowness on newer devices for my app. I will detail this here. The app is still very slow on old devices and that may or may not be related to the fact es5 build has to be used on those devices. (We have decided to discontinue support for Android 4.4 devices. With Android 5 / iOS 10.3, ES2017 runs fine.)

The bottleneck was found to be customElement’s callbacks triggering Angular change detection. Before each Ionic 4 component is displayed on screen, their html element gets created and attribute set. Setting attribute causes attributeChangedCallback method to be called on the web component’s instance and that callback is made zone aware since zone.js 0.8.27 (https://github.com/angular/zone.js/pull/1133). That means for each Ionic element to be added on the page, several change detection runs are performed. Having hundreds of ionic components on a page results in several seconds delay before the page can be shown even on my Mac’s Chrome.

The fix is very simple. We just disabled zone.js’s custom elements support. Having following line in zone-flags.ts and importing it in polyfill.ts just before importing zone.js does the job. It seems Ionic 4 still runs fine even with patching customElements is disabled (as in it feels much faster but otherwise unaffected).

(window as any).__Zone_disable_customElements = true;

I hope this helps someone here.
I’ll submit an issue on github later and put a link here when I do.

4 Likes