4

I have an Ionic app that uses the latest versions of angular 4 and ionic 3.

The app contains a scrollable list of many pretty big images.

I had a memory crash on IOS because of those huge textures all piling up in memory.

Now I'm using VirtualScroll and ion-image in order to try and solve that problem.

I also plan on using wkwebview.

Do any of these handle unloading textures from memory when they are not within the viewport?

If not - how do I manually do that?

Royi Bernthal
  • 882
  • 4
  • 17
  • 45
  • For performance reasons, not every record in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls. https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/ – Sarantis Tofas Jun 27 '17 at 23:21
  • Thanks for the reply. Yes, that much I read in the docs, but does only the subset of records that fills the viewport occupy memory? For instance - Images 1-4 are within the viewport and therefore are rendered. I scroll down. Now images 5-8 are within the viewport and rendered. Are the textures of images 1-4 destroyed and unloaded from GPU? Or do they still occupy memory even though they are no longer rendered? If they still occupy memory, then the more I scroll the closer I get to a memory crash, regardless of whether everything was rendered at once or not. – Royi Bernthal Jun 28 '17 at 01:37
  • The thing is that i have dealt with memory crashes, mainly GPU memory crashes in the past and the `VirtualScroll` or `VirtualRepeat` and similar techniques always solved the problem. The image is saved in cache not in memory, thats what i think. – Sarantis Tofas Jun 28 '17 at 10:36
  • also read here https://stackoverflow.com/questions/17348058/how-to-improve-performance-of-ngrepeat-over-a-huge-dataset-angular-js – Sarantis Tofas Jun 28 '17 at 10:37

1 Answers1

2

What VirtualScroll is all about:

The basic idea is that we only create enough elements in the DOM to display the list data that is currently on screen, and we recycle those DOM elements to display new data as they scroll off screen.

The benefits from using VirtualScroll are huge in terms of performance. DOM can be really heavy when you have 1000 items rendered not to mention the danger of a possible memory crash.

What ion-img does :

The ion-img component is similar to the standard img element, but it also adds features in order to provide improved performance. Features include only loading images which are visible, using web workers for HTTP requests, preventing jank while scrolling and in-memory caching.

Also:

with ion-img the app is able to dedicate resources to just the viewable images

The benefits from this approach are also huge towards a better performance because images that are not viewable are not going to be rendered.

And last:

ion-img has a property named cache

After an image has been successfully downloaded, it can be cached in-memory. This is useful for VirtualScroll by allowing image responses to be cached, and not rendered, until after scrolling has completed, which allows for smoother scrolling.`

You can set this property accordingly.

I will try to enrich my answer even further, please suggest me anything i have missed or anything that is unclear.

sources:

https://ionicframework.com/docs/api/components/img/Img/, https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/, https://www.joshmorony.com/boosting-scroll-performance-in-ionic-2/

Sarantis Tofas
  • 5,097
  • 1
  • 23
  • 36