Android perfomance (list scroll - ng-repeat)

[zelphir]

I'm having performance issues on android devices (HTC ONE, HTC ONE M8, so top gamma) and android emulators (official one using GPU and x86 as cpu arch and genymotion).

Basically I have just a simple list of ten elements with an image (different images). On iOS is super fast and smooth (both simulator and iphone), on Android is super slow, buggy and randomly crashes the app (if I scroll too fast).

The images are 800x800px scaled with css width:100% to fit the list width.

[adamdbradley]

I think this is more of an Android issue than it is Ionic. Having ten 800x800 images all be scaled down by the browser dynamically is a huge burden on the GPU. That's great iOS handles it fine, but the bottle neck is the image size and them being downsized by the browser.

I'd recommend using smaller images, along with collection-repeat, and remove any css3 effects which would also bog down the GPU, like rounded corners and box shadows.

[zelphir]

How do you handle the images for retina and HD displays? You have to use the double of the size, haven't you?

Any ideas?

[ajoslin]

You could try using SVGs?

[fredgalvao]

Have you tried using overflow-scroll="true" on your ion-content to use native scrolling? I've tested about a hundred images of 400x400 in a grid list using native scrolling and the performance ranges from almost good enough to perfect on some devices.

[zelphir]

@fredgalvao if I use overflow-scroll="true" I can't use ion-refresh and the ion-infinite-scroll because I get these errors:

Error: [$compile:ctreq] Controller '$ionicScroll', required by directive 'ionRefresher', can't be found!
Error: [$compile:ctreq] Controller '$ionicScroll', required by directive 'ionInfiniteScroll', can't be found!

@ajoslin do you think that using an SVG with the same image as background can solve the problem?

@adamdbradley I'm trying to use collection-repeat but my for loop is empty (I'm using the same array that I've used in the ng-repeat)

What do you suggest as html tree? I need to use a slide-box with 4 slides and in each slide an infinite scroll with ion-refresher.

is this good?

<ion-slide-box>
  <ion-slide>
    <ion-content>
        <ion-refresher
           pulling-text="Pull to refresh..."
           refreshing-text="loading..."
           on-refresh="doRefresh()">
        </ion-refresher>
        <ion-list>
            <ion-item ng-repeat="item in data.images">
                <img ng-src="{{item.location}}" style="width: 100%;">
            </ion-item>
        </ion-list>
        <ion-infinite-scroll
            on-infinite="loadMore()"
            ng-if="moreDataCanBeLoaded"
            distance="5%">
        </ion-infinite-scroll>
    </ion-content>
  </ion-slide>
  <ion-slide>
    <!-- 2nd slide -->
  </ion-slide>
  <ion-slide>
    <!-- 3rd slide -->
  </ion-slide>
  <ion-slide>
    <!-- 4th slide -->
  </ion-slide>
</ion-slide-box>

For the other slides I use the same service, just with different images. So same ion-content.

Where data.images is something like that:

$scope.data = {images: [
    {location:'/path/to/image.jpg', name:'xxx'},
    {location:'/path/to/image.jpg', name:'xxx'},
    {location:'/path/to/image.jpg', name:'xxx'}
]};

[zelphir]

forum topic

[FreakTheMighty]

I'm seeing performance issues on Android scrolling as well - lots of janking. There seem to various problems, but the timeline profiler doesn't indicate that image resizing is one of them. I've included a link to the timeline recording I made in Chrome. I can upload more if that's helpful.

https://bitbucket.org/jvanderdoes/inretro/raw/39ac1cab530e277760313c97c948106d8222f813/assets/TimelineRawData-20140602T220734

This is the project https://bitbucket.org/jvanderdoes/inretro. It was created for a hackathon. I've been playing around with it since because I was surprised by the scrolling performance and would love to get the slickness of ionic + performance for future projects.

So far my only workable solution has been to set scroll="false" and use the built in scrolling.

[zelphir]

@ajoslin and @adamdbradley
It's definitely not an image scaling problem... I've tried to use the ion-content with overflow-scroll="true" (disabling of course infinite-scroll, pull to refresh and collection-repeat) and instead of using 640x640px images I've used 1024x1024px images and scroll it's perfect, maybe too fast! (Instead of collection-repeat I've switched back to ng-repeat).

So it's something wrong with your scroll! Could yo have a look? Or at least enable the use of infinite-scroll, PTR and collection-repeat with overflow-scroll="true"?

Thanks

[marcsyp]

I am having the same issue on a galaxy s5, with about 50 thumbnail files that are 128x128... would love to see improved performance.

[FreakTheMighty]

@zelphir @marcsyp I think it would be helpful if you provided performance profiles. At very least I would be interested in seeing them. I imagine it will be difficult or impossible to debug this issue without clear measurements.

[ajoslin]

collection-repeat is getting a lot faster very soon, you could try it again then.

[ajoslin]

#1597

[marcsyp]

@FreakTheMighty I'm happy to do so (assuming collection-repeat optimizations don't make the point moot), but I'm pretty new to this stuff so I don't know how to go about generating a "performance profile". Any tips appreciated.

[zelphir]

@FreakTheMighty @ajoslin

Here you go: dropbox link

[zelphir]

@ajoslin any news? Using the nightly is just a bit better... but still laggy the scroll

[ajoslin]

Did you try collection repeat?

[zelphir]

I'm using it... did you check the performance profiles? It's under 30fps!

[ajoslin]

I didnt download anything, and won't have time to this week. Next week I'll be back on issues, this is definitely a high priority one to look at.

There is also a pull request open that uses native transitions for scrolling, that may help things a lot.

[zelphir]

Cool! Is this one? #1543

I would like to try it!

[rotorgames]

@zelphir Build for test http://clip2net.com/s/ilyY0Y

[zelphir]

@rotorgames Thanks, already tried changing the bower.json to https://github.com/rotorgames/ionic.git#wip-transition-scroll

It was a bit better, but the app crashed several times... on IOS is better without has-transition="true"

Thanks for your help

[ajoslin]

@zelphir, changing the bower target won't work, since the release folder is only updated on releases.

[zelphir]

@rotorgames @ajoslin I've tried the bundle made by rotorgames and it's definitely better! Smoother and more fluid... but not perfect.. there are still lags and jerks... I found it a bit better using ng-repeat instead of collection-repeat. And it looks fine also on iOS!

Looking forward to seeing a better version merged into ionic!

[rotorgames]

@zelphir About your problem. Try to use css property background-image to <div> place for <img>. As far as I know, background-image if it is not drawn out of the field of vision must improve performance.

[perrygovier]

@dbaq Ionic now auto-caches templates. With that, is this still an issue?

[gauravdhiman]

@mihirparekh may I know why you used Crosswalk for 4.4.4 Android as it by default comes with chromeview run environment so even with packaing your will with crosswalk, the Ionic app should run fine on 4.4+ Android. As per my understanding crosswalk is good solution for 4.0 to 4.3 versions of Android, right ?

[mihirparekh]

@gauravdhiman I don't have a logical answer for your query and we also thought same way earlier. However after trying out, we are seeing significant difference in performance even with 4.4.4 (Nexus 5). Can you try for your app and let us know?

[perrygovier]

Android 4.4.4's version of chrome is significantly better than the old android browser, but at this point, it's still outdated. Assuming we can implement crosswalk, we may choose to also use it for KitKat projects so we can take advantage of things like scroll events, sub-pixel borders, and better canvas support.

[arsenslyusarchuk]

Any updates about fixing infinite-scroll? Using beta-13 - still very laggy

[brugnara]

I'm having huge performance issues with the demo app (ionic start myApp sidemenu).
Navigating the app is almost impossible. Menus change after about 1-3 seconds...
The back button responds after 10 seconds.. I have another cordova app on it that runs fine...
This android is a 4.0.4. Am I missing something?

[arsenslyusarchuk]

Actually Ionic was created to work fine on IOS but not on Andriod. Since andriod 4.4 (kitkat) it has really better and faster browser which speeds up Ionic very noticeable. But still it is funny that on IPhone4 it works smoothly while on nexus5 it lags.
In my case I have just refused from infinite scroll and created 'Show more' button.
So u can also try to remove some effects (I mean additional directives) from your app one by one to improve performance. Plus, for Ionic it's very important to follow the page structure, so read the docs carefully.

[arsenslyusarchuk]

Ionic app takes from 50 to 150 mb of Ram. So maybe your lags are because of lack of RAM ?

[ajoslin]

Have you guys tried crosswalk?

[Ionitron]

Sorry, but his issue has become too vague and is not narrowed into one specific problem. The team recently removed JS scrolling for Android (testing requested: http://forum.ionicframework.com/t/native-scrolling-android-testers-wanted/17059), and made it easy to use Crosswalk from the CLI: http://ionicframework.com/blog/crosswalk-comes-to-ionic/

Additionally, there have many releases since this issue was created with performance improves, caches views, caches templates, and has had a pull to refresh overhaul. Since everyone's app is different, I'm going to close this topic. I'm not denying there aren't any issues, but please create any recreate an issue focused to specific and reproducible problem.

[karneaud]

Been having the same issue using .14-beta build ....built this trail demo http://kendallarneaud.me/mobile/android/AATT/version/0.0.2.3/ using ion-content ion-infinite-scroll and ng-repeat with at most 300 items loading 10 at a time. On an iPhone4 safari it crashes and on a Android 4 tablet android browser(not chrome) it is sluggish. So there is mos def something wrong with the framework. Looking through this issue i'm going to try some of your suggested workarounds and see if it helps

[Alexintosh]

I'm having huge scroll problems too, just 30 items list with images. Actually using
collection-repeater
overflow-scroll="true"
PTR (seems better without)
crosswalk
on
Cordova CLI: 4.3.0
Ionic Version: 1.0.0-beta.14
Ionic CLI Version: 1.3.11

[oaleynik]

Crosswalk works way better for me. Tested on Xperia Z, Android KitKat 4.4.4

[karneaud]

@Alexintosh what version test devices you use? although it gets buggy with Android 4.0 and iPhone 4 iOS 7 it was noted to work fine with iPhone 5s with iOS 8

[Alexintosh]

I'm using Nexus 5 stock rom with android 5.0.1

[karneaud]

Wow....that really is bad...i suggest a new framework

[Fayozjon]

karneaud

http://ongpasoaldesarrollo.org/capital_opciony

19.03.2015, 20:09, "karneaud" notifications@github.com:Wow....that really is bad...i suggest a new framework

—Reply to this email directly or .

[Fayozjon]

Alessio

http://www.baltdivision.ru/pamm

19.03.2015, 18:14, "Alessio Delmonti" notifications@github.com:I'm using Nexus 5 stock rom with android 5.0.1

—Reply to this email directly or .

[Fayozjon]

Oleg

http://goohoo.net/strategii_robot

14.03.2015, 20:25, "Oleg Aleynik" notifications@github.com:Crosswalk works way better for me. Tested on Xperia Z, Android KitKat 4.4.4

—Reply to this email directly or .

[mbossX]

...

[juan-orca]

@Alexintosh I am on Nexus 5 as well and am having issues with ~10 items of images. However, my friend has the iphone6 and it works great on his