CollectionView with lots of data Swift

Question

I have collection view which is filled with lots of data from server:

Structure of cell:

• One image
• And 2 Lines of text in each cell

Basically my collection layout is like - 3 cells in one row(multiple rows) with rounded corners and shadows. The problem I face is that when I have 30+ products received from server, my memory usage increases up to 200 MB and on older devices (iOS 10.*) my screen with collection view lags.

The way I'm receiving data is:

• In Interactor I request all text data of products together with links to image files,

• In my collection view cellForItemAt I display this data and there I start loading images using this library - Kingfisher

  if url != nil {
      productsCell.productImage.kf.indicatorType = .activity
      productsCell.productImage.kf.setImage(with: url)
  } else {
      productsCell.productImage.image = clipImage
  }
  

• Size of images I receive vary from 4-6 Mb.

I'm using VIPER as architecture of my app and checked for memory leaks but everything seems to be fine. When I start app on other screens my memory usage is around - 30 MB. So the main issue I face is with loading image data. I have Googled allot and read many articles about optimizations but they provide mostly general advices and do not reflect such case as I have here. What they offer is:

• Use memory management principles - done
• Pagination - nope

While testing I found out, that if I populate collection view with clip image that is static - memory usage drops to ±100 MB

I would like to ask:

• Are there any ready made solutions for collection views that are already optimized to handle lots of image data? I have searched github, but most of collection views frameworks are related to Cutom Layouts.
• How can I reduce memory usage when dealing with lots of data?
• Can size of image cause such memory load?
• Can I avoid using pagination, since collection view reuses cells?

Thanks in advance for your help and have a nice weekend!

Answer 1

• Kingfisher already contains all features what you need
• You can use several levels of cache, e.g. if you reached limits of memory usage then it will cache data on a disk
• Yes, if you save in memory a lot of images
• You can disable downloading image if cell did end displaying on screen.

I think you need implement UITableViewDelegate func tableView:didEndDisplayingCell:forRowAtIndexPath

func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.imageView.kf.cancelDownloadTask()
}

Kingfisher allows to configure image cache parameters (ImageCache) like:

maxCachePeriodInSecond, maxMemoryCost, maxDiskCacheSize

Therefore you can configure maxMemoryCost so that the memory won't more than 50mb.

Also Kingfisher clear memory cache automatically when a memory warning notification is received.

Answer 2

Your problem is most likely that the image's size is big, try to compress them to JPEG format. You can play around with the compression quality to find a sweet spot.

guard let imageRep = UIImageJPEGRepresentation(image, 0.3) else { return }