(*ngFor) Performance issues when getting a long list of items

Ionic Framework ionic-v3
1

I am not sure if this is angular 2 or ionic 2 related, but when I make a long list of a certain array (let’s say over a hundred but I am unsure) there is a huge performance issue when I ‘run’ it or ‘serve’ on the browser.

I used a service in order to get mock data of a arrays (JSON formatted) of over 100 ingredients (unsure of the tolal number but there is a lot) and put it on the ionic @Page iterating through the array using ngFor. When I noticed the issue I even put the array on the same component and while it ran a little better there was still an issue of performance when iterating through the array.

What I mean by performance issues is after the list is downloaded the ion-icon don’t appear on the button, the button (click) don’t do anything, it takes forever to scroll down on device, even though it gives me a list of items it takes forever to get the list.name and after everything is downloaded and try to get to the next page sometimes I might get the White Screen of death for no reason. etc…just imagine playing WOW using a computer with Intel Celeron core duo. That slow.

I tried the same thing (minus ionic2) on a webpage I am doing and it iterated just fine.

So it was designed this way for test purposes:

  1. mock-data with the array
  2. SERVICE (get mock-data by using a Promise.resolve)
  3. the COMPONENT will get the data from the service.
  4. iterate using ngFor

==Performance bad===

Then I tested doing this:

  1. make a local variable with the data inside the component
  2. iterate using ngFor

==Performance a little better but still horrible==

Now to clarify; I didn’t expect to get the data that quick, what I didn’t expect for it to be so slow when I tried to do things after downloading the data…like scrolling down to see all my items are there etc…

EDIT:
Completely forgot that I had it on github…

Here is the html:

here is the ts:

EDIT:Just noticed the github quote functionality…nice implementation on the forum #ionic!!!

1 Like
3

@brandyshea
I isolated the issue, it had to do with .

When making a list of items

<ion-list>
<ion-item *ngFor="#stuff of moreStuff">

<ion-checkbox>

<ion-checkbox>

</ion-item>
</ion-list>

when creating a lot of ion-checkbox the performance it just horribly bad. I tested it with my code in the OP and it runs fine without it. In other words it iterated through the list in milliseconds as opposed to minutes.

EDIT:

took out <ion-label> and <ion-checkbox> and replace with a <p> and <input type=checkbox /> and it iterates through the list instantly so there is an performance issue with the ion-checkbox

4

Could you create an issue for it here: http://ionicframework.com/submit-issue/

We will look into it, thanks!