Whats affecting the performance of the app ? inline css?

ionic-v1
1

I am developing an ionic app for android+ios and it’s reacting differently on different android devices in performance !

The device i am testing on (android 4.2) it works fine still lags sometimes !! I tested it on other android 4.2 device and it was lagging alot . The view was not loading at once… it loaded pixel by pixel making it ugly !

Not yet tested on ios device but i hope it works well on ios !

Question here is , what is affecting the performance ?

My app has

  • 7 to 8 states with only one state having complex list.

  • The main default route state has that complex list of cards. I read somewhere that cards make the ioni app slow.

  • Apart from normal content i am using ngStorage for my local storage…

Does inLine CSS affect ionic app’s performance?

I am using a separate css file for my css styles… stil i have lots of inline css used in html ,so does that affect?

OR

what is/can affect the performance? How to make it smooth.

Till now i have noticed that ionic apps are not as smooth as native apps and reacts differently on different devices !

Guidance and help is appreciated, Thanks

2

I am not sure if you can improve something in particular on ionic, but, you can really make faster your application by following some rules on angular :smile:

Like one time binding, ng-if, etc. Take a look on how to improve angularjs.
You can also compress your files, your css, etc.

If you are using angularjs in a wrong way, your ionic app will be really really slow !
Best,

2 Likes
3

Thanks for the suggestion i will research about one time bindings etc !

Do you mean slow performance is because of angular and not ionic ?

4

I guess, if you are doing bad (like slow) things with both, your application will be slow.

But you can really faster your application only with angular. I spent couple of days reading and trying things with angular (especially one-time binding, ng-bind), and my application was really faster (from only usable with iphone 6 to usable from iphone 4s and android )

Maybe you have some improvements on ionic that you could do, but I think it is only with libraries and plugins you are calling, and compressions.

5

ok :grinning: Thanks for the help @gensollen ! I will try the angular way…

6

Definitely do the angular way, but I would remove any inline-css. I was getting some slow down/flashes when I tried changing the style inline on ion-content. Its also best practice to separate your CSS from your HTML.

1 Like
7

Thanks @DaDanny i guess i will have to shift those inline css !! So far i was ignoring those since thr are so many to handle :smile: was little lazy :stuck_out_tongue: well for performance test i will have to do it. Thanks again !

8

You won’t see a ton of performance improvements with removing inline CSS, its just one thing you can do to improve performance.

The reason for removing inline CSS is to follow separation of concern principles. One example is imagine you are trying to fix a DIV, that just isn’t styled correctly. You changed your CSS file, but its still behaving weird. You spend hours searching through the CSS file to see if its getting anything else applied, you search on forums, but no luck.

Then you check the HTML file, and notice you had an inline CSS. It could be pretty frustrating. Thats why you keep all styling in a stylesheet.

9

Consider using Profiling in Chrome dev tools

10

@DaDanny

I agree !! But after reading few posts on the internet what i learnt was

One Scenario where we have single css file for single html page , here respective css is loaded once for the page.

Other scenario where we have multiple css grouped accrding to functionality like buttons tabs etc in separate css , I was going to try this but this would everytime load multiple css evrytime for single html.

Relating to our project structure , we have single index with multiple templates . Here , if i have a single css for index its loaded once . Still if i use inline css in template html’s this means it would load inline css every time the template/view is loaded.

I dont know if logic is 100% correct or not but i tried it is so i moved my all inline css from templates to that single css file. Guess what , it got rid of the blurred text which i was getting while testing on emulator.

this happened because i was using font-family in inline css so it would load only when the template is loaded. So my text appeared blurred and after fully loading it appeared right.

After moving all was fine and text appeared correctly at any moment you load the page ! Inline css does affect the performance correct me if i am wrong :grinning:

Your suggestion made me learn a lesson Thanks for that :stuck_out_tongue:

11

Thanks :grinning: I wil try that…

12

Haha, glad I could help. Theres lots of little things to learn about web/mobile dev, but it looks like you are on the right track.

As far as your concern about multiple CSS files, you are correct that you will need to load multiple files, but a work around, and whats commonly done, is to minify and concat your CSS into one file. Basically, you run your CSS files through a minifier, (I use a grunt library I can point you to) and it will spit out all your CSS into one file. You can also do this with Javascript!

It does make debugging a little more annoying, so I typically leave Concating/minifying/obfuscating until the end. Then I spend a painful night fixing all the issues that brings, then it runs smoothly :smile:

Heres an ionic article talking about that

http://blog.ionic.io/minifying-your-source-code/

13

Thanks for that ! :slight_smile: Checking… :+1:

14

Regarding cards:

If you’re using native scrolling on android, then I had to do this to get the cards smooth in all cases (suggestion from another thread):

.card {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

Especially if I was using pull to refresh.

15

We found a massive difference between two very low end devices. One was really quick. The other ran like a dog. Maybe the issue is more to do with the variance in Android devices …?
After all, the same is true for native Android apps, it’s not called the ‘matrix of pain’ for nothing.
So in practical terms, try to add logging and see if a pattern emerges as to which devices / OS versions are having issues.

16

@kstorstein Thanks for that i am adding that !! i am using ionic scroll and i have pull to refresh ! Should i use webkit transform with native scroll only ?

17

ya i am onto it ! both devices were running jellybean ! the only difference i could spot was pixel density ! so it confused me more …!!

18

I’m not sure if you need that trick if you don’t use native scrolling, but you can test it out and see if it has any effect :smile:

19

Well, i will just try it… :grin: