How can I speed up a UITableView?

Question

I have a UITableView with about 400 cells in 200 sections and it's a little sluggish in responding to user interaction (scrolling, selecting cells.) I've made sure the methods for retrieving cells and header views do the bare minimum as it's running, and I don't think I'm doing anything out of the ordinary to make it slow. The cells and headers just have a background image and text. Has anyone else had this kind of problem, and do you know any way to make it run a little faster?

Edit: I'm offering a bounty because I'd love to get some useful feedback on this. I don't think the answer lies in a problem in my code. Instead I'm looking for strategies to re-engineer the UITableView so that it runs faster. I'm totally open to adding new code and I look forward to hearing what you guys have to say.

Sluggishness is observed on both the simulator and my device, an iPhone 4. Here are my implementations of viewForHeaderInSection and cellForRowAtIndexPath, which are the only UITableViewDelegate methods implemented nontrivially. I am reusing cells and header views.

- (UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger) section
{
    HaikuHeaderView* view= [m_sectionViews objectAtIndex:section];
    NSMutableArray* array= [m_haikuSearch objectAtIndex:section];
    Haiku* haiku= [array objectAtIndex:0];

    [view.poetLabel setText:[haiku nameForDisplay]];

    return view;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];

        cell.backgroundView= [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cell gradient2.png"]];

        // (Set up a bunch of label attributes in the cell...)
    }

    NSMutableArray* array= [m_haikuSearch objectAtIndex:indexPath.section];
    Haiku* haiku = [array objectAtIndex:indexPath.row];
    cell.textLabel.text = [haiku.m_lines objectAtIndex:0];

    return cell;
}

Answer 1

Reuse cells. Object allocation has a performance cost, especially if the allocation has to happen repeatedly over a short period—say, when the user scrolls a table view. If you reuse cells instead of allocating new ones, you greatly enhance table-view performance. Avoid relayout of content. When reusing cells with custom subviews, refrain from laying out those subviews each time the table view requests a cell. Lay out the subviews once, when the cell is created. Use opaque subviews. When customizing table view cells, make the subviews of the cell opaque, not transparent.

Answer 2

The best thing you can do if you're looking to speed up your code is to profile it. There are two reasons for this:

1. You can read about some things that'll improve table performance in general, like using fixed-height cells and re-using cells, and it'll probably help to implement those things (looks like you've already done that). But when it comes to speeding up your code, you really need to know where you app is spending most of its time. It might be that there are a few methods that take a very long time, or a method that's relatively quick but gets called a lot more often than you'd expect.

2. It's impossible to know whether the changes you make in an effort to speed things up truly make a difference unless you have some numbers to measure against. If you can show that your code was spending 80% of its time in one routine and you cut that down to 35%, you know you're making progress.

So, break out Instruments and start measuring. If you can, it's a good idea to measure while you're doing each of the different activities that you want to speed up... do one profiling session while scrolling, one while selecting as many different cells as you can in a fixed period, etc. Don't forget to save the results so you can compare later.

Answer 3

Does the table view's delegate implement:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

If so you may wish to consider setting your UITableViewCell's rowHeight property instead.

Answer 4

This is a little off-topic here (because you have only one background image for all cells):

My app displays different images in each cell. After adding about 5 cells to UITableView - table is slowed down drastically. It takes about 1-2 seconds to process all images each time i open view controller.

if let image = UIImage(contentsOfFile: photoFile){
    // just set it and let system fit it
    //cell.imageView!.image = image

    // 1 - Calculate sized
    let DEFAULT_THUMBNAIL_WIDTH: CGFloat  = (cellHeight / 4) * 5;
    let DEFAULT_THUMBNAIL_HEIGHT: CGFloat = cellHeight;

    let aspectRatio: CGFloat = image.size.width / image.size.height
    var willBeHeight = DEFAULT_THUMBNAIL_HEIGHT
    var willBeWidth  = DEFAULT_THUMBNAIL_HEIGHT * aspectRatio

    if(willBeWidth > DEFAULT_THUMBNAIL_WIDTH){
        willBeWidth = DEFAULT_THUMBNAIL_WIDTH
        willBeHeight = willBeWidth / aspectRatio
    }

    let eps:CGFloat = 0.000001
    assert((willBeHeight - eps) <= DEFAULT_THUMBNAIL_HEIGHT);
    assert((willBeWidth - eps) <= DEFAULT_THUMBNAIL_WIDTH);

    // 2 - Create context
    var size:CGSize = CGSize(
        width: DEFAULT_THUMBNAIL_WIDTH,
        height: DEFAULT_THUMBNAIL_HEIGHT)
    UIGraphicsBeginImageContext(size)

    // one-to-one rect
    //var imageRect: CGRect = CGRectMake(0.0, 0.0, size.width, size.height)
    var imageRect: CGRect = CGRectMake(0.0, 0.0, willBeWidth, willBeHeight)

    // 3 - Draw image
    image.drawInRect(imageRect)
    var imageResult: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    cell.imageView!.image = imageResult

    UIGraphicsEndImageContext()
}else{
    DDLogError("Can not draw photo: \(photoFile)")
}

So i've ended up with generating small THUMBNAILS for all my images.

Answer 5

Even if your cell is actually that simple (background image and label) there are some things to consider

Image caching This is the obvious thing - if you are using the same image everywhere, load it once into the UIImage and reuse it. Even if the system will cache it on its own, directly using the already loaded one should never hurt.

Fast calculation Another rather obvious thing - make calculating height and content as fast as possible. Don't do synchronous fetches (network calls, disk reads etc.).

Alpha channel in image What's expensive when drawing is transparency. As your cell background has nothing behind it, make sure that you save your image without alpha channel. This saves a lot of processing.

Transparent label The same holds true for the label on top of your background view, unfortunately making it opaque might ruin the looks of your cell - but it depends on the image.

Custom cell In general, subclassing UITableViewCell and implementing drawRect: yourself is faster than building the subview hierarchy. You might make your image a class variable that all instances use. In drawRect: you'd draw the image and the text on top of it.

Check compositing The simulator has a tool to highlight the parts that are render-expensive because of transparency (green is ok, red is alpha-blending). It can be found in the debug menu: "Color Blended Layers"

Answer 6

1. use a shared image instance for the background (you alloc/init/release one for every time a new cell is created). When your table view is big , this means that the background X cells in memory takes much more memory than it should.

   instead of
   cell.backgroundView= [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cell gradient2.png"]];
   just use :
   cell.backgroundView= [SomeHelperClass sharedBackgroundUIImageResource];

2. If that doesn't help , use CG instead of labels and other subviews (a screenshot will help here.. to know what we're talking about).