Updating cell content using GCD causes stuttering while scrolling about gmgridview

[steipete]

I don't believe that's a grid issue, that's more one of your updating code. You may hook up the the scrollview to delay those changes (e.h. with using an NSOperationQueue and pausing it while scrolling) - or move more code over to a background thread. (e.g. when you "load" an image in a background thread, you don't really decompress it unless you use some arcane knowledge like this https://gist.github.com/1144242)

[leberwurstsaft]

This has nothing to do with AFNetwork. With the cache I meant a RAM cache that simply keeps thumbnail images that I already loaded from flash once.

The issue seems to be that the UI updates are happening while the scrollview still scrolls, causing it to stutter.
I have offloaded everything to the background thread, preparing all the objects and loading the image.

I followed steipetes tip and further reduced the amount of work on the main thread to a minimmum. Now, the only things I actually send to the main queue are:

[label removeFromSuperview];
imgView.image = snapshot;
[cell.contentView addSubview:labelLeft];
[cell.contentView addSubview:labelRight];

When the cell is initially created I add a placeholder UIImageView and a "loading" label. Before I return the cell, I add a job to the dispatch_queue in the background, which will get the real image, and prepare the two UILabels. An on the main thread I only update the image in the UIImageView, remove the "loading" label and add two data labels.

I found that this updates the image quickly, but the labels take 1-2 seconds to show up, or sometimes don't show up at all. I wonder what's up with that. Anyway, removing the two labels alltogether made performace bearable. Still not quite what I wanted, i.e. no UI updates while scrolling.

[steipete]

"prepare the two UILabels" ... don't do that in the background. UIKit is totally only usable from the main thread. Not even creating UI* objects on the background is a good idea.

Have you tried my image decompression code? I totally bet this solves all your stuttering problems.

[leberwurstsaft]

I see, thanks for this insight. So basically I had it more correct before - and now again, since I found the labels not showing up a bit odd.

Yes, I tried your decompression, and unfortunately it didn't help.
I made a quick video of what I'm experiencing during scrolling. It shows stuttering while scrolling slowly, and also shows how the cells get updated while inertial scrolling is going. This leads to a rather distinct hiccup once in the video.

http://vimeo.com/36936059 (password is "123", I didn't want to spam my channel)

[timeuser]

I'm having a very similar experience, except the stuttering is even worse for me than what's shown in leberwurstsaft's video. I'm displaying a grid of JPG images loading using AFNetworking. There are about 12 square images on screen at once and they are retina resolution size. The really odd thing is that scrolling is very smooth on an iPhone 3GS running iOS 4.2.1, however it stutters really badly on an iPhone 4 running iOS 5.0.1?! I can mitigate it a bit using the suggestion by steipete above to suspend an operation queue while scrolling, but that seems like a really heavy and unsatisfying solution since nothing updates at all during scrolling then. I'm not sure exactly what is being discussed regarding the compression issue or how I would use that though.

[steipete]

very smooth on an iPhone 3GS running iOS 4.2.1, however it stutters really badly on an iPhone 4

That totally sounds like image decompression on the main thread. Did you actually try my code?

Also, firing of network calls can be expensive too... do that on a background thread.

[timeuser]

I tried the decompression code. It didn't help too much. Good suggestion on the network calls, I'll try that. Thanks.

[timeuser]

Turns out it was the image decompression happening on the main thread. I thought I had moved it off the main thread, but I didn't realize the success callback of AFNetworking's AFImageRequestOperation, is dispatched to the main thread and that's where I was trying to force the image decompression. Thanks steipete!

[steipete]

:)
I also submitted a pull request, you can now change the success and/or failure callback to any dispatch_queue you want.

[timeuser]

Nice. That makes fixing it even easier. Thanks!

[blackgold9]

Wow. The forced decoding and success callback queue in AFNetworking made this buttery smooth.

[leberwurstsaft]

Just wanted to tell that I got rid of the stuttering, the cause was mainly me using the cornerRadius and shadow* parameters of the cell views layer. Wow, what a performance monster. Now with a simple image, rendered just once, I get all the great shadows and corners I want and there is no more stuttering.

That said, steipetes preloading code is also helpful now :)

[kylefox]

Wow, I've been beating my head against my desk all day trying to figure out why my images were lagging -- even though I'm loading them asynchronously from disk.

@steipete's preloading code instantly made things super smooth! Thanks!