Ionic basic list is slow

ionic-v1
1

I did “ionic start myApp sidemenu” to create a new app, then copied several times the items in $scope.playlists to make the list size around 50. When deploying on android devices (4.4.2 -lg g2 mini and 4.1.2 samsung s2) the list is slow and definetely not native (a lot slower and shakier than a 300 element list with images in onsen-ui). Tried both with and without. Any ideeas?

2

You can try to add track by id in playlists ng-repeat and see if will be better…

3

Use collection-repeat instead of ng-repeat if you can. Also try to limit your Angular watchers if there are alot, or use angular’s bind-once syntax in front of your scope template vars for vars that dont need to be watched for changes.

JS scrolling on Android is slower than on ios, especially with the Android Browser. If you add the crosswalk project to your android platforms, your app will be forced to use a Chrome webview which will enhance the performance. Another option is to use Ionic’s native scrolling rather than JS, which is only available on Android.

4

Try some of the tips on this site… http://ng-perf.com/

5

This gives the angular error Duplicates in a repeater are not allowed. (as i copy pasted the same values).

6

collection-repeat doesn’t help either. There are no extra Angular watches, I just ran the sample sidemenu app provided by Ionic

7

…so please post your code here and tell us what would you get…

8

Thanks for your help! Basically I ran “ionic start myApp sidemenu”, and then modified the PlaylistsCtrl by copy pasting the existing 6 records several times:

.controller(‘PlaylistsCtrl’, function($scope) {
$scope.playlists = [
{ title: ‘Reggae’, id: 1 },
{ title: ‘Chill’, id: 2 },
{ title: ‘Dubstep’, id: 3 },
{ title: ‘Indie’, id: 4 },
{ title: ‘Rap’, id: 5 },
{ title: ‘Cowbell’, id: 6 },
[… several more times the same values as above]

]

What happens is that scrolling is pretty slow and shaky and doesn’t look native.

9

The LG device is a bit better than the S2. The S2 is old enough that rendering a list in a web view is just going to be slow, there is no way around that since the phone is not powerful enough.

If you’re just copying and pasting that list (and using ng-repeat) you’ll want to try “track by $index” because there will be duplicate ID’s, just to clear that up.

If you can post a code pen of your exact code we can create a project from that code pen and try it on our devices. I have a Nexus 5 and an iPhone 6 plus that I can test it on if you do that.

1 Like
10

Hi, maybe you need to enable the native scrolling, and it will fix your problem…