Template being 'executed' multiple times


#1

Hi everyone,

we have an existing cordova app, that we want to migrate to ionic. We did some progress, but faced performance issues when migrating a list of items. This list can hold several hundred items. When the list is being displayed the app freezes for serveral seconds. When searching for a cause, we found that the template containing the list was ‘executed’ multiple times: we added expressions that output console.log and these log entries were written 5-9 times (the number seems to be constant for a certain app).
We created a test app from the Tabs-started sample and changed only one template and its controller:

<ion-view view-title="Account"> <ion-content> <span>{{Logging('rendering view')}}</span> <ion-list ng-repeat="item in items"> <ion-item> {{item}} <span>{{Logging('rendering '+item)}}</span> </ion-item> </ion-list> </ion-content> </ion-view>

Our app actually uses ion-list within another ion-list since we are grouping items, but i believe this is less important here.
Logging simply does a console log:

$scope.Logging = function(text) { console.log(new Date()+ ' : ' +text); }

Opening the view with a list of 3 items outputs the following on the console:
Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering view Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 1 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 2 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 3 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering view Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 1 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 2 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 3 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering view Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 1 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 2 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 3 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering view Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 1 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 2 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 3 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering view Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 1 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 2 Wed Aug 03 2016 22:12:30 GMT+0200 (CEST) : rendering Item 3
I would have expected to see ‘render view’ once and each ‘render item 1’ once. But instead it is ‘executed’ multiple times.

For a list of several hundred items that results is a severer performance decrease. Like mentioned this is working without significant delay in a cordova jquery app.
Has someone experienced something similar and found a solution, are we doing something wrong or has anyone an idea what we could try to improve the performance?

Many thanks!


#2

look at collection-repeat


#3

Thanks a lot for the suggestion! :slight_smile: We seem to have missed that.

Even though that might resolve the performance issue, is the multiple rendering something ionic is doing on purpose and if so why? Especially on a phone with limited resources i would want to avoid doing things multiple times unnecessarily.


#4

Same issue here… This “multiple rendering” issue really affects performance - makes the UI very laggy.

Any ideas on why this is happening?


#5

Have the multiple rendering as well for *ngFor …