Ionic 4 slow performance on user interaction

Ionic Framework
22

What did you do to improve performance with Google Maps?

23

I have upgraded my project from ionic 3 to ionic 4.

I didnā€™t do full test because of another job.

But many said that ionic 4 platform solve the problem.

If you want to talk with ionic team engineer, Please join ā€œhttps://ionicworldwide.herokuapp.com/ā€
.

You can get direct response using slack channel from ionic team engineer.

24

As itā€™s said here

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.p

you donā€™t have to import Google Maps in your AppModule after youā€™ve installed it, rather just import it directly wherever you want to use it.

What I was doing wrong, was doing the same as all other Plugins, which was importing it in the AppModule. It was then taking way too much RAM.

Secondly, weā€™ve created a Component only for Maps and recreated it each time we were accessing the component, what isnā€™t a good idea.

Thereā€™s a method clear from the maps class which we use to do the same. It ā€œRemove all overlays, such as markerā€

25

Currently, I am still experiencing slowness in Ionic4 on Android device, havenā€™t tested on ios device yet. Using the latest updated ionic 4.1.2. The slowness is more evident when switch between tabs. The component seems to lag for 0.5 - 1.0sec before running ngOnInit() and ionViewDidEnter and so on and so forth. One thought for the problem above is that the my child component are lazy loaded in the tabs component, hence causing that slight lag. Other than that, usage of multiple animations in 1 action is causing performance issue on android device as well.

Any suggestion on this?

26

I am facing the same issue.

27

I find that using ionic cordova build <platform> --aot --minifyjs --minifycss --optimizejs --release is improving the performance of the app.

28

Using --aot, --minifyjs, --minifycss or --optimizejs may not work or change anything, as --prod is doing the same work since angular 5.

Just go through the code and find out what can be responsible of taking so much ressources.

What concern tabs, there normally should be lazy loaded, because the page itself take time to render and may not be ready if their tabs are eager loader.

29

Iā€™m experiencing a similar performance problem with Ionic 4.

So far, I have found that es5 build of @ionic/core feels much slower than es2017 build on the same machine.
If the appā€™s tsconfig.json is set to target es2015 or over, es2017 build gets selected.

Among many things, I suspect angularā€™s change detection is the root cause.
es2017 build is probably running many internal operations with async/await syntax instead of Promise, and exempted from Zone.js (https://github.com/angular/zone.js/issues/740) and consequently angularā€™s change detection.

30

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.

31
32

I was having some similar issues with the first app I built in ionic 4 when it would run the production build for Android. After a bit of debugging with the production build scripts I found that the app was compiling all theme SCSS files every time it was imported. This meant that the variables file where I had some SCSS colors defined, and where I was importing the rest of my root theme styles was then being compiled about 20-30 times due to it being imported in various components in order to use the SCSS color variables. Separating the colors into a separate SCSS theme file, and then importing that instead seems to have greatly improved performance for my production build. Not sure if this is going to help you guys, but if it does then great! This issue was especially a pain in the ass to come across, since the performance was only being affected during production builds. Hope that helps!

33

Hello everyone,

I also met a performance problem on ionic projects 4. to demonstrate this problem I created a repo that displays a list with 2000 item, the difference is quite important between ionic 3 and ionic 4, with ionic 3 list is displayed in less than a second on a mac book pro with ionic serve, but with ionic 4 the display of 2000 items takes 4 seconds. you can test it yourself on this repo.

according to the study that I realized the problem comes because of the shadow dom the shadow dom injects enormously elements in the dom contrary to ionic 3 or there is not the shadow dom.

you can do a simple test, in this file from my ionic-tests / modal-ionic / ionic-4-angular / src / app / pages / modal / modal.page.html repo,
replace this code:

<ion-list>
    <ion-item * ngFor = "let item of items">
      <ion-label> {{item}} </ ion-label>
    </ion-item>
</ion-list>

by this code:

<div>
    <div * ngFor = "let item of items">
       <div> {{item}} </ div>
    </div>
</div>

and look at the console.

with the div you will earn almost 3 seconds on a mac book pro.

34

Facing same very bad performance issues with version 4. With Ionic 1 and Cordova we did not have any slowness. With Ionic 4 the slowness is very bad. It takes several seconds to even use the side menu to get to a page.

Do you have any time frame on when we will actually get good performance with version 4? Overall it seems version 4 has some serious issues. I had problems with Android 4.4 and side menu causes error. This has been accepted as bug #18939 but not progress. Just got the new Android 7 tablet to overcome the other issue while Ionic team worked it out but now performance is so bad I am afraid to demo it to my CEO.

Please let me know if there is any workaround I can do to speed things up. I write code for a large company and have invested a lot of time moving to version 4 from version 1. The side menu issues I can deal with but the overall performance being what it is may cause the company to take a different direction once they see the new version. The first thing they will do is compare the old to the new and I hate to say but so far ionic version 1 out performs version 4.

I have made a small mpeg of the slowness. This happens with code even straight out of the box. Install an Angular Side Menu app and see for yourself. http://assets.ser.vi/ionic-menu-issue.mp4

Any ideas? Is there any other information I can forward?

Thank you and please help.

35

no solution is proposed by the ionic team and I do not think that a solution will be released soon.
these provinces are because of the shadow dom. You can test the test that I put on my repo. https://github.com/yoyo770/ionic-tests and since all the framwork ionic 4 is oriented towards the shadow dom I do not think that a solution will be presented soon. i had no response from the ionic team regarding this topic even after my multiple message on ionic slack

36

Consider using profiling tools in chrome

Or raising a ticket to ionic as that is the official support channel

And change detection strategy on push , helps sometimes

37

thatā€™s what I did but no feedback from them

38

Lists with potentially thousands of items sound like a great candidate for virtual scroll. Might it help your responsiveness problems?

39

of course it can help. but thatā€™s not the problem. what i wanted to show with my test is the slowness to display this list while with ionic 3 the same list is very fast to display. which proves that ionic components 4 are slower to display than component ionic 3. and as long as it is slower even on 10 items or with virtual scroll it will be slower than ionic 3 for the same rendering. from this observation I am more tempted to make my custom component than use the ionic components.

40

Hi

Your test bears merit. Tried it and indeed 4seconds to open on I4

If u use the AfterViewInit hook, the modal opens in 400ms but the items then even takes longer. More of an angular thing maybe

41

what takes time is writing in the DOM.

so with an afterViewInit or ioniViewDidEnter.
the modal opens quickly but with nothing in it. and the application is blocked during the injection of 2000 items in the dom.

The problem does not come from angular. I did my test with the version react of ionic, and the result and always the same.

on the other hand if one replaces ionic articles with divs. the modal will open very quickly (without the style, but adding this style in the global css on what should have been rendered with the best performance).
the problem is clearly of the shadow Dom and elements injected.
ionic component too heavy and poorly optimized.

I hope the ionic team will disabled the shadow dom of all component