I'm trying to imitate virtual scrolling (table cell recycling) in an Ionic app for performance reasons. In my app, I have some screens that have hundreds of items with images. For this reason, I can't display them all at the same time. The virtualScroll component in Ionic should do the trick but sadly there's a bug that doesn't allow it to work with dynamic pipes at the moment.
I'd like to build my own virtual scroll technique but I don't think I'm up for creating my own legit virtual scroll. My question is this: Can I imitate virtual scroll by doing display: none, along with a set height to the parent component on the items that are not in the viewport? Would this achieve some of the performance improvements that an all out virtual scroll would achieve?
To answer your question:
You'll achieve a graphical rendering performance benefit from setting display: none because it will remove those cells from the render tree. This may result in a smoother scroll.
However, you're still allocating all of your table cells onto the DOM, as opposed to true virtual scrolling where it only allocates as many cells as are visible. I would take this into consideration if you decide to do a custom implementation especially if you have a large dataset. 10 reusable cells on the DOM will always perform much better than 10,000 with 9,990 set to "display: 'none'" in terms of memory and CPU.
I would say your best bet is to weigh your options and figure out a workaround to using dynamic pipes (which will probably be easier than trying to implement your own virtual scroll) so you can use the built-in virtual scrolling.