Huge performance spikes on scroll

ionic-v1
1

Hello everyone,

I have an application that holds a list, which right now contains something like 20 elements, with 2 of them fitting in the screen at once. In my Galaxy Nexus running Android 4.4.3 the scroll is very slow and the application often freezes if I swipe to scroll. Each element in this list has roughly 10 bindings, but I’m already using bind once to optimize that.

The code looks something like this:

<ion-content>
  <div class="list card" bindonce ng-repeat="campaign in campaigns track by campaign.id">
  ...code to render each element...
 </div>
<ion-content>

I have looked into ion-scroll but I can’t even get that to work.

It should also be noted that even when running on the browser there are huge memory spikes when I simulate a swipe scroll. Is there a way I can optimize this? I’m pretty damn lost.

EDIT:
Just tried experimenting with overflow-scroll set to true. Silky smooth scroll, until, for some reason, content stops showing up and I get a white avoid when I’m halfway through the list.

2

Hmm, never heard of this before. You could always try collection repeat

http://ionicframework.com/docs/api/directive/collectionRepeat/

Any chance you put together a codepen or plunker example of what you have?

3

Thanks for the sugestion, but I ended up fixing by fixing 2 things: set overflow-scroll to true and by using lighter images, since my API was providing the app with some heavy images. I might try collection-repeat sometime so I don’t have to use overflow-scroll though.

4

Glad to see you got it resolved. I’d still suggest checking out collection repeat. The big benefit is that you will not be rendering all the items all over again. Just some food for thought

5

I had the some issue @JSFernandes…
I end up using overflow-scroll, the performance are 10x better…
but you lose the infinite scroll, pull to refresh, and the nice scroll bar…