Ionic 4 slow performance on user interaction

Ionic Framework
1

Hello community,

our development Team stumbled above some performance issues after the switch from Ionic 3 to 4.
Some user interactions, that trigger animations, are now really slow and laggy. After some digging we found out, that the call

someelement.nativeElement.offsetLeft

and all the other offset Properties now costs round about 10x more time to get the value.

With the Chrome performance debugging we saw on the same line of code with ionic 3, a property read of about 0.8-0.9 ms and ported to Ionic 4 with about 9-10 ms. Whats going on, why is this under angular 6 so more time consuming?

Did someone else come across this problem?

Best regards
Fabiryn

2

Could you display some code to give more context and information?

I’ve now migrated my all app and for me it still look really smooth, but I may not manipulate the elements as you do etc., therefore would be cool to see a concrete code example.

Also I’ve got one parallax effect on native element which is still smooth on iOS, I’ve got a glitch with it on Android but that’s on me.

3

Assuming that this is just for reading the value and that you aren’t then using that value to modify something that would trigger a browser layout, see if running the read inside of Ionic’s DomController has any impact, e.g:

import { DomController } from '@ionic/angular';

this.domCtrl.read(() => {
  //read value
});

The DomController batches DOM read/writes and executes them at the most opportune time to avoid layout thrashing.

1 Like
4

This is the code snipped, I’ve mentioned above, that now needs about 9 ms to get a result.

(this.rightSliderValueBox.element().nativeElement.offsetWidth - this.slider.sliderButtonLeft.nativeElement.offsetWidth) * 0.5

It is a range slider with two interaction points. With Eventemiters we trigger some other animations, which then call this function above. I need to extract the slider code - so i can share it.

The Problem - the slider itself sets it’s new position and triggers a layout change. After that, the event triggers a bunch of layout changes and needs to get the new position of the slider, to align some items.
It wasn’t perfect, but know - the calculation where the items needs to go are more time consuming in resulting in low fps on some older devices.

On the browser without slowdown, this isn’t a issue. Except for the Edge Browser - there it is terrible too.

5

That’s slower

this.rightSliderValueBox.element().nativeElement

or that

this.slider.sliderButtonLeft.nativeElement

or the overall call to your function?

6

the overall function call with these two inside of it

7

have you been able to reproduce the same behavior (= slower performance) in a dummies apps (one v3 and one v4)?

if yes that could be a great thing to submit an issue, sure the team would love to improve the performance

if no (if you were not able to reproduce the same behavior in a dummy app), then there is something else lowering the performance in your app itself

p.s.: when you do your test, do you try multiple times and are you sure everything is loaded? maybe because of lazy loading while you test not everything is there yet

1 Like
8

We are still investigating and may have found the cause of the problem. I’ll test a little bit more and report back here.

1 Like
9

Ok, the performance decrease was coming from a terrible scss import, of big fonts and other stuff in our variables.scss. The styling recalculation, therefore took a long time and resulting in slow fps on all user interactions.

With some tweeks we have now gained more fps, so it’s better than before.
Thank you for your help and inputs. In the future we will keep the DomController in mind.

Have a nice weekend,
Fabiryn

3 Likes
10

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
11

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

12

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

2 Likes
13

how to link button in ionic framework??

14

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

15

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
16

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.

17

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.

18

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

19

+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
21

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