CODEWITHSUNDEEP
performanceangularcordovaionic-frameworkionic2
Royi Bernthal
Royi Bernthal

Reputation: 462

Ionic - Scrollable list of big images - Memory Usage

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?

Upvotes: 4

Views: 1336

Answers (1)

Sarantis Tofas
Sarantis Tofas

Reputation: 5167

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/

Upvotes: 2

Related Questions