I'm programming a web version for our Android app, which is similar to Instagram. I chose this to create the feed:
<div *ngFor="let post of postList"> ... </div>
Inside that div tag is the HTML of a single post, like the image, the caption etc.
My question is if that is a good choice of architecture. In particular, I'm concerned if this works if the user keeps scrolling to the bottom and the array postList becomes arbitrarily big.
If I understand it correctly, the HTML code of the site will grow arbitrarily big too (for each new post, one clone of that div is appended, right?).
But doesn't that cause performance issues at scale? Coming from Android I know that when you use ListView you will get exactly those performance issues, so you use RecylcerView instead, which recycles views, so no matter how big the array is, you only have a "small" amount of views being used due to the recycling.
How to handle this in web dev? Am I good to go with my solution from above?
CodePudding user response：
In short, that will be a problem if you're not limiting the number of results returned. I would recommend researching pagination for limiting query results
CodePudding user response：
Another option you could try if you do not want pagination but want the list to be performant, would be cdkVirtualFor from angular material. With little setup this can turn a large list into something that performs very well.