Android performances ionic2/Angular much worse than iOS

Ionic Framework ionic-v3
1

Android is consistently slower (much sometimes) than iOS both in emulator and real devices. Is there any way to improve those performances? What are the expectations ? Is it due to Android OS version, Hardware version or Ionic/Angular Beta status ?

I heard about crosswalk and I was wondering what kind of improvement should I expect…

Thanks

Patrice

1 Like
2

This really depends on what Android device are you testing on. Is this an older android 4.4 device, or a newer 5x/6x device?

Also worth noting that both Ionic2 and Angular2 are nowhere near production ready. Both still have a lot of work to do to be much faster (a lot of which is in the works.)

3

Old version 4.4.2. I understand the state of Ionic2 and Angular2 but to be frank it is strange that Angular2 is faster on iOS than Android. Of course I am using the latest iOS. Android devices are much more limited in their capacity of upgrade.

Looking forward to your progress.

Cheers,

Patrice

4

There’s a pretty long discussion about this in the following topic:

5

Understood Ionic2 and Angular2 is not yet in production which Ionic2 is now in beta and angular2 is in rc1. But I am a bit worry on the performance even in production release later after a try on current build. I only try on Android only not the IOS. I followed the example found from http://ionicframework.com/docs/v2/getting-started/tutorial/. The sample displays 11 items and works perfectly. I changed to 1000 to test the performance, and got problem.

    for(let i = 1; i < 1000; i++) {
      this.items.push({
        title: 'Item ' + i,
        note: 'This is item #' + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }

When it ran on Genymotion emulator, it took ~15 seconds to show 1000 items. When it ran on real device (where I am using samsung note 2 with v4.4.2 and I believe there are still many people using this class device), it tooks 64 seconds. I think 1000 items are reasonable not too many. Anyone has sample or measurement for display 1000+ items on mid-class device so that it could be used as reference.

I tried to measure the time of the loop which only took 0.002s. So the slowness is on page rendering. I am new to ionic2 and not sure how to go deeper to measure it. I used ionic/angularV1 and got the performance issue and looked forward to move to ionic2 but now I am not sure if there is any better way to have good performance. I just wonder what is the performance expectation on rendering ie 1000 items to the page - 1 to 3 seconds? If there is no expectation on the reasonable time for many items, I wonder if I should wait for ionic2 to be in production or try native development. Please kindly advice as I want to get started early rather than waiting for another 3 to 6 months with unclear performance expectation.

6

Interesting… By the way, I think. you can improve your code.

let _items = [];
for(let i = 1; i < 1000; i++) {
  _items.push({
    title: 'Item ' + i,
    note: 'This is item #' + i,
    icon: this.icons[Math.floor(Math.random() * this.icons.length)]
  });
}
this.items = _items;

PS javascript works slow on Android OS. Maybe It’s not a Angular 2 problem

7

Thanks for reply. Understood and expected javascript works slow but need to know how much slow 10 times or 100 times slow than native app for showing 1000 items?

But I think the issue here might not necessary purely on javascript. As you saw from the benchmark, above loop only take 0.002s. So the 64 seconds must spend on somewhere like the framework or generating UI, I believe.

Since the requirement of my app really need to load ie 1000+ items, I am trying to do the PoC to see if I should stay in hybrid or move directly to native. I personally like to stay with hybrid app and stay with ionic and I think max ie 2s is reasonable to show simple 1000+ items not complex items

So need ionic team or any expert to tell if what is expected performance on the final release, or there is a way to get around it.

8

Usually you no need to show 1000 rows. Maybe ~10-20 items and you are adding a next group items then user is scrolling down.

Update: Implement 1000 items on native Android, it’s not trivial task too. You need put elements to cache, then reset item content…

9

Do you have sample to share? Really interested to see the solution. I believe you mean using ion-infinite-scroll where I use it on ionic V1.

However, let’s say load 20 items each time as you suggested. User keeps scroll down and eventually the view still hold up the 1000 items. When there are 1000+ items on the view, everything gets slow down. Very bad on the responsive. Navigating to item-detail view take few seconds which makes you feel not responding. You could quickly to download the http://ionicframework.com/docs/v2/getting-started/tutorial/ and just change to 1000. You will feel the performance.

FYI: I did a PoC using native. Loading 1000+ items (even 2000+) only take ~1s on my same Samsung Note 2 device.

10

Definitely give Crosswalk a try. It’s really helped on some older devices we’ve tested it on. It also gives you a stable API to target against.

11

Since Google is actively pushing mobile web one could hope that this will change to the better.

12

I guess that there are some optimizations that could be made to the Android OS however I won’t expect any miracles because the main problem is not with the Android OS but in the cheap hardware that most Android phone manufacturers use:

codinghorror: It seems the Android manufacturers are more interested in slapping n slow CPU cores on a die than they are in producing very fast CPU cores. And this is quite punishing when it comes to JavaScript. I am no longer optimistic this will change in the next two years, and there are untold millions of slow Android devices out there.

13

This topic has about two month. Today Ionic is in beta 10 and angular2 in rc4. However performance on android seem to be very bad… and not only for page with lot of item, juste opening a new page with on or two static card was very long.

And say that this problem came from android seem very strange because Ionic 1 had pretty good performance on simple page … have some news about this problem ?

14

This topic has about two month. Today Ionic is in beta 10 and angular2 in rc4. However performance on android seem to be very bad… and not only for page with lot of item, juste opening a new page with on or two static card was very long.

Both ionic2 and angular2 are still in Beta and RC respectively.

15

are there any updates or progress about this issue?