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]

https://github.com/driftyco/ionic/pull/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? https://github.com/driftyco/ionic/pull/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.

[zelphir]

@ajoslin any news? I've tried also using background-image... but I have still problems... and the app crashes

[MartinDueren]

I have the exact same problem, but I noticed that scrolling is completely fine if I remove the pull-to-refresh part.

[zelphir]

Not for me.. still buggy also without PTR :disappointed:

[EnchanterIO]

Mobile: Samsung Note 2 Android: 4.3 Ionic: "version": "1.0.0-beta.9",

I have just simple ion list with array of size 15 and the scrolling looks horrible totally bad (no images!). When I remove the PTR it's working good. Any idea?

[rotorgames]

@TrkiSF2 I have been twitching, using PTR, on the animation preloader (ion-loading-d). Try to use static image or gif.

[muze-net]

any news?

[stvhanna]

Has anyone tried http://angular-ui.github.io/ui-utils/#/scrollfix "Scroll till you drop" for reusing elements? So you'd use ng-scroll instead of ng-repeat. This should provide better memory management for the DOM and improve scrolling speed.

[gauravdhiman]

I am also facing the same issue. Spent my last two days in figuring out the fix for it, but still have no clue. Facing 3 issues, scroll is one of them .. probably all three are connected.

1. Scroll is very slow and shaky. Its not at all smooth
2. modal show/hide transitions are really jerky
3. side menu show/hide transitions are also jerky

As far as I understand (after reading lot many threads on it) I think the issue is use of translate3d.

I think overall ionic is very nice framework but it need to get the transition / animations make smooth on android to make it acceptable to developers. I earlier tried LungoJS and that does not have such issues, but that has some other lagging points compared to Ionic.

Desperately looking for Ionic to work smoothly on Android (at least 4.0+)

[ajoslin]

Can everyone post the exact device they're using? On Aug 16, 2014 8:18 AM, "Gaurav Dhiman" notifications@github.com wrote:

I am also facing the same issue. Spent my last two days in figuring out the fix for it, but still have no clue. Facing 3 issues, scroll is one of them .. probably all three are connected.

1. Scroll is very slow and shaky. Its not at all smooth
2. modal show/hide transitions are really jerky
3. side menu show/hide transitions are also jerky

As far as I understand (after reading lot many threads on it) I think the issue is use of translate3d.

I think overall ionic is very nice framework but it need to get the transition / animations make smooth on android to make it acceptable to developers. I earlier tried LungoJS and that does not have such issues, but that has some other lagging points compared to Ionic.

Desperately looking for Ionic to work smoothly on Android (at least 4.0+)

— Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic/issues/1322#issuecomment-52394338.

[dbaq]

Hey @ajoslin, I also can confirm lag issues. I am fighting everyday to have a smooth app on android 4.4 at least. To test, I am using my nexus 5/android 4.4.4.

What I can say: Super slow transitions (slide-left-right) (even with a really tiny controller with almost no op at the loading time and a small view. I think it is related to templateCache, the first time you load a view, there is a flicker. I need to dig it but I am thinking about caching most of my templates at the beginning. And if there is a map display, it is terrible, the lag is really visible.

Modal: same thing as above, I had to cache it to have nice and acceptable results.

Pull-to-refresh: some flickers are noticeable but it is acceptable.

But overall it is getting better and better since the first beta. I am trying to fix the transition issue, I'll keep you posted if I find something.

Cheers

[rotorgames]

@dbaq Hi. Try to use https://github.com/rotorgames/angular-rg-cache-view. This DIRECTIVE caches dom, and does not re-compile, it again.

[ajoslin]

@dbaq we are pushing out auto-caching of templates by default in the newest version.

PTR: we are working on this using collide.io animations.

The map: could you post a codepen reproducing the lag problems?

[dbaq]

On my side, I have cached all the templates at the running time, there is definitely less flicker, it is really noticeable. @ajoslin are you going to do something similar?

regarding to the map, I am pretty sure it comes from my directive, nothing related to ionic (normally).

[rajatrocks]

I'm also experiencing janking in scrolling with ionic's scrolling, on a Moto X running Android 4.4.4. Setting overflow-scroll="true" removes the janking (but then I lose PTR and $ionicScrollDelegate, as noted). Using Ionic v1.0.0-beta.11.

[Floriangomis]

@dbaq Could you be more explicit about this ? What do you mean by caching the template ? Or at least some webPage about it ? ;) I Improved a lot my app with collection repeat but if there is a way to improve it again i'll take it !

[mihirparekh]

@dbaq try using Crosswalk Cordova project. We tried our Ionic app with Crosswalk Cordova on Nexus 5 (Android 4.4.4) and performance significantly improved. https://crosswalk-project.org/#documentation/cordova

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