Ionic 4 slow performance on user interaction


#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.


#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


#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.


#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


#10

Awesome, cool to hear you solved it!

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


#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/


#13

how to link button in ionic framework??


#14

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