Ionic 4 slow performance on user interaction

Awesome, cool to hear you solved it!

And definitely something worth noticing, I mean specially for me with a lot of custom style

1 Like

how to use ionic framework. for beginner?? help me

Here are the Ionic docs, a good place to start: https://ionicframework.com/docs/intro/installation/

2 Likes

how to link button in ionic framework??

how to link the pages to another pages in ionic framework??

I have the similar issue.
In iOS and Browser the performance is OK

But In Android The performance is too slow after switching 3 to 4.

I have a view with 4 tab Childs that includes ion-lis of cards.
The ion-list’s scroll and tab switching is too slow.
And the more modal popup in the tab child view work not good.

I need to touch the row two or three times to popup modal custom view.

And one more , in android modal popup up break tab child’s scrollable-view(ion-scroll). so I changed it to infinite loop.

But in IOS ion-scroll and modal popup woks fine…

If anybody have some hint, please let me know it.

4 Likes

Hi !

I’m having the same problem here. I don’t know if it’s an issue with RAM, but when I increase it on virtual machines, it works better. Thought on my own personal phone (android) it’s still very slow.

If there’s any new update about it, please let us know.

Having the same performance issue on android.

We don’t have much SCSS styles, just some simple component styling.
The only “special” thing in scss is a custom font face, imported in variables.scss (ttfs).

On ios, everything is smooth, you can’t tell it’s a web based app.

We solved it. It was Google Maps, which was imported in the AppModule and was causing everything.

+1. I am also experiencing much slower performance with user interaction on Android devices. Angular navigation Sometimes takes up to 1000ms to execute, and the slowness has been pointed out by end users.

Ionic CLI: 4.5.0

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 7.1.1
Node: 10.13.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.11.1
@angular-devkit/core         7.1.1
@angular-devkit/schematics   7.1.1
@schematics/angular          7.1.1
@schematics/update           0.11.1
rxjs                         6.3.3

Did you solve this problem? I’m having this same problem right now and my app has the same structure as yours!

What did you do to improve performance with Google Maps?

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.

1 Like

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

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?

1 Like

I am facing the same issue.

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

1 Like

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.

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.

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