Performance loss when migrating from ionic/angular 6.0.1 to 6.4.0

Ionic Framework Ionic Angular
1

I have a production project compiled for web, android and ios and in the last update made to the latest versions of ionic, capacitor and plugins I have noticed that the pages are painted much slower than before.

For example, in a page with a list of 44 elements, it has gone from being painted in about 130 milliseconds, to being painted in about 3000 milliseconds, that is, now the painting is about 30 times slower.

Are there any known bugs for the configuration I’m giving you, in terms of performance?

I don’t know if it’s a problem with the ionic core, angular, etc., or the way I have implemented the application, but it seems very strange to me that the same code takes 30 more times to execute now (with the latest version everything) than with previous versions.

Any ideas?

You can check the problem by accessing these two websites, and clicking on the group called ‘New Year’s Eve dinner 2021’. Then you can check the slowness by clicking on the tab called ‘Balances’ and then on the one called ‘Notes’, where you can see that in the old version this transition is very fast and in the new version this transition is very slow. With the debugger we can see the loading time, when this warning appears:

[Violation]‘requestAnimationFrame’ handler took 3070ms

Fast version (old version):
https://app.splittheticket.com/#/invitacion/OU8xMk9OZXc=

Slow version (latest version):
https://splittheticket.iriscrea.com/#/invitacion/OU8xMk9OZXc=

Regards.

Fast version info

Ionic:

Ionic CLI : 6.20.4 (C:\Users\juanc\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.0.1
@angular-devkit/build-angular : 13.0.4
@angular-devkit/schematics : 13.0.4
@angular/cli : 13.0.4
@ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 3.3.3
@capacitor/android : not installed
@capacitor/core : 3.3.3
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run (update available: 1.7.1) : 1.6.0

System:

NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
npm : 8.3.0
OS : Windows 10

Slow version info

Ionic:

Ionic CLI : 6.20.4 (C:\Users\juanc\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.4.0
@angular-devkit/build-angular : 15.0.3
@angular-devkit/schematics : 15.0.3
@angular/cli : 15.0.3
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : not installed
@capacitor/core : 4.6.1
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
npm : 8.3.0
OS : Windows 10

2

Hi, I think the root cause might be the __Zone_disable_customElements = true zone flag setting is missing for the new version.

Here is the related issue that explain the details:

Debugging

The way I debugging this is to open the console, type __Zone_disable_customElements, then hit enter on each website:

Solution

You can try adding the following changes to your src/polyfills.ts file:

// ... skip ...

/**
 * Prevents Angular change detection from
 * running with certain Web Component callbacks
 */
(window as any).__Zone_disable_customElements = true; // Important: zone flag settings must be added before we import 'zone.js'

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js';  // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */

Hope this may help you :smile:

3

Thank you very much for your answer, jonz94. I have made the changes you indicate and they have not worked for me. I have tried uploading them to my production server (now you can see that the variable is true in both cases), but it doesn’t solve the problem either.

Any other suggestions?

image
image1920×331 52.6 KB

4

Any other ideas? I’m migrating all my applications so they don’t become obsolete and with all of them I’m running into this performance issue.

5

Did you find a solution for this issue? I am having the same problem and disabling custom elements did not work for me either.

6

Can you file an issue on GitHub - ionic-team/ionic-framework: A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.? Please be sure to include a runnable sample that reproduces the issue.