Ionic 4 page perfomance

Capacitor
1

Hey, y’all,

I have a big problem that I’m looking for a solution to.
I created an ionic application, which works well. The problem I’m having, is at the level of the application’s performance.

Here are the problems I’m encountering:

  • When I scroll the page, sometimes the scrolling gets stuck, and the app crashes.
  • Pages take time to display while most of the information I display is stored locally.
  • Moving from one page to another is not smooth.

So I’m here to ask you if there is a possibility that I can have a fluid application (a bit like if I created this in java) with ionic?

Or what should I do to optimize the rendering of my application and pages?

Thanks to all of you

2

Performance is all about the code your write.
So I first would suggest looking your app and inspecting where the bottle necks could be.

If you’re using Angular, go look at the angular best practices listed on the angular site.
If React, go check look at the react best practices.

For more ionic specific stuff, make sure you utilizing page life-cycle hooks


Also connect your app to chrome/safari and run some performance metrics.

Without more details, hard to know what exactly is the issue.
Just start debugging your app and see what stands out.

1 Like
3

Thank you for your prompt response.

I uploaded the code of my HTTP service, which is the biggest service in my application.

link : https://codepen.io/torskint229/pen/xxVRbLP

Maybe you can help me to fix the problem…

4

There is no way any one can help you without being able to see at least what you’re talking about.
Even better is having a repo that other people can clone and run to see if they get the same results.

There are so many variables here at play:

  • What device
  • What O/S version
  • How you are loading your data - e.g. lifecycle hooks
  • How you are binding e.g. unnecessary 2 way model binding

Upload some gifs of the behaviour along with the code snippets responsible for each ‘bug’ you’re referencing at the very least.

5

One thing that really concerns me about this code is that it seems to be written in a manner that implies that many requests can be out at once (which is natural for something like a service that sends network requests), yet everything is internally dependent on singletons: postData and onPostProcess.

I haven’t actually traced the code extensively, but I can’t see any way that onPostProcess could possibly do its job correctly: it has no way of knowing which request it’s reacting to.

There a lot of things I would change here (die Promizer, die), but the most important thing is that I would eliminate all properties in this service that aren’t injected: headers, postData, and onPostProcess. Not having them exist will guide you towards designs that will safely support multiple active requests at once.