Poor performance of short list with ng-repeat and ng-click


#1

Hi all!
While waiting for virtual lists and caching, I’ve a problem with a quite short list.
My list is of about 70 items (much less than the 2000 items always cited), markup is this one:

<ul class="list">
  <li class="item item-button-right"
      ng-repeat="item in items"
      on-finish-render="repeatFinish()"
      ng-click="open(item.Name,$event)>
    <button class="button button-icon button-large">
      <i class="icon ion-android-star"
          ng-click="favorite(item.Name,$event)></i>
    </button>
    {{item.Name}}
  </li>
</ul>

(ps: on-finish-render directive is used to measure render time http://stackoverflow.com/a/15209318)

With 70 items (that are objects with only the Name property for now), this take about 1 second to render. It is too much, especially when switching between tabs.
If I remove both ng-click, it take half the time to render, about 520ms. Better, but not yet excellent. And I need both of them.

How can I improve this?
My device is Samsung Galaxy S2.


#2

Bindonce will probably help in any list. It’d be good if you could post a working sample on CodePen as well.


#3

Thank you @Calendee, I’ll try bindonce.
Meanwhile, here it is a working sample.


#4

I just tried bindonce, but performance are the same, if not worse.
If I understood correctly, bindonce gives a speedup in user interface lags while scrolling, not really on the first render.

EDIT:
Well, I think problem is the same as here: List re-rendered when switching tabs with bad performance

I’ll wait for caching and virtual-lists…