UICollectionView scroll lag

Question

I have setup a collection view with 10 subviews in a cell.

The subviews are -imageview with label on it -text view -imageview -uilabel -imageview -uilabel

Initially the collection view have 15 cells displayed at the time on an iPad. No when I scroll the scroll pauses when it is time to replace the cells at the bottom or top(reusing cells). I removed the shadow but still the same issue.

So the problem happens when the old cell is reused causing a lag.

Btw, no images loaded via the network.

Answer 1

I had the answer to this long time ago but for the benefit of others and who may be in the same issue.

Apart from removing shadows, you also need to remove "clear color" backgrounds. Any additional drawing that will require additional processing should be removed or replaced with an alternative. Any heavy lifting, text formatting, date formatting should be done before even showing the collection or table views. Make sure you cell only does the presenting and not processing. If you can't avoid it do the processing at another thread.

To measure the rate of the scroll you will need to use the instruments > graphics > core animation tool to measure the frame rate.

Try it and you will notice a difference.

Answer 2

EDIT: No need to experiment with autoresizing masks, just read this short article about UICollectionView performance boost http://noxytrux.github.io/blog/2014/09/25/ios8-weirdness-part3-laggy-uicollectionview/

It is probably an autolayout overhead. Consider trying autoresizing masks instead.

You can just commit everything and make an experiment:

1. turn off autolayout on your cell xib file
2. run an app to test performance (don't worry about messed up layout)
3. setup autoresizing masks (and do layout in code if needed) instead of autolayout if the effect is noticeable

I fixed my UICollectionView performance problems this way. It helps most when you have a lot of visible cells at a time.

Also, if you have image views, please see this answer Setting image property of UIImageView causes major lag

Don't forget about Instruments: run Time Profiler and see what eats your main thread time most.

Answer 3

I guess the issue can be also because of ImageView.

Using Kingfisher 5 for prefetching, loading, showing and caching images will solve the issue.

let url = URL(fileURLWithPath: path)
let provider = LocalFileImageDataProvider(fileURL: url)
imageView.kf.setImage(with: provider)

https://github.com/onevcat/Kingfisher/wiki/Cheat-Sheet#image-from-local-file

Answer 4

fileprivate func downloadForPerformance()->void{
   for i in urlToFetchImageArray {
       var image: UIImage = dowloadImageFunc(link: i.urlString() );
       imageArray.append( image );
   }
}
fileprivate func dowloadImageFunc(link: String)->UIImage {
    let url = URL(string: link)
    let data = try? Data(contentsOf: url!)
    return UIImage(data: data!) ?? UIImage(named: "default.png")!;
}


cell?.mainImage.image = self.imageArrayPerformance[indexPath.row];

Usually the problem is slow download as each cell is dequeue.

1. Call downloadForPerformance func before the view has appeared.
2. This will fill an array called imageArray as a global variable
3. Then use that array in cellForItem func

basically have an array of already downloaded images you will need, make this a [UIImage] array, then use theImageArray[indexPath.row]