Really bad performance with scrolling in UITableView with subviews

Question

I'm just not getting what is going on here.

I have a UITableView where each cell contain some subviews and it works fine and all. Unfortunately, the performance is horrendous, scrolling is just way too choppy. I read that maybe you can subclass UITableViewCell and that could help performance, but I'm not sure on how to that or implement another solution that would fix the issue. I've posted the delegate method for the tableView below, any help would be greatly appreciated!

- (UITableViewCell *)tableView:(UITableView *)tableView
     cellForRowAtIndexPath:(NSIndexPath *)indexPath {


static NSString *CellIdentifier = @"Cell";
UIImageView* imageView;
UILabel* ttitle;
UILabel* ttitle2;
UILabel* ttitle3;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

    // Configure cell:
    // *** This section should configure the cell to a state independent of
    //  whatever row or section the cell is in, since it is only executed
    //  once when the cell is first created.


    imageView=[[UIImageView alloc]initWithFrame:CGRectMake(10.0, 11.0, 50.0, 50.0)];
    [imageView setContentMode:UIViewContentModeScaleAspectFill];
    imageView.layer.masksToBounds=YES;
    imageView.layer.cornerRadius=5.0;
    imageView.tag=1;
    [cell.contentView addSubview:imageView];

    ttitle = [[[UILabel alloc] initWithFrame:CGRectMake(70.0, 7.0, 200, 20)] autorelease];
    ttitle.textColor= [UIColor blackColor];
    ttitle.numberOfLines=1;
    ttitle.tag=69;
    ttitle.backgroundColor=[UIColor clearColor];
    ttitle.font=[UIFont fontWithName:@"Arial Bold" size:15.0];
    [cell.contentView addSubview:ttitle];

    if (indexPath.row==0) {

        CGSize size=[[[data objectAtIndex:indexPath.row] valueForKey:@"content"] sizeWithFont:[UIFont systemFontOfSize:14.0f] constrainedToSize:CGSizeMake(265.0f, CGFLOAT_MAX) lineBreakMode:NSLineBreakByWordWrapping];
        ttitle2 = [[[UILabel alloc] initWithFrame:CGRectMake(70.0, 27.5, 200, size.height)] autorelease];
        ttitle2.textColor= [UIColor darkGrayColor];
        ttitle2.backgroundColor=[UIColor clearColor];
        ttitle2.numberOfLines=0;
        ttitle2.tag=70;
        ttitle2.textAlignment = NSTextAlignmentLeft;
        ttitle2.lineBreakMode=NSLineBreakByWordWrapping;
        ttitle2.font=[UIFont fontWithName:@"Arial" size:14.0];
        [cell.contentView addSubview:ttitle2];

        ttitle3 = [[[UILabel alloc] initWithFrame:CGRectMake(70.0, ttitle2.frame.origin.y+ttitle2.frame.size.height-8.0, 210, 40)] autorelease];
        ttitle3.textColor= [UIColor darkGrayColor];
        ttitle3.backgroundColor=[UIColor clearColor];
        ttitle3.numberOfLines=1;
        ttitle3.tag=71;
        ttitle3.textAlignment = NSTextAlignmentLeft;
        ttitle3.lineBreakMode=NSLineBreakByWordWrapping;
        ttitle3.font=[UIFont fontWithName:@"Arial" size:11.0];
        [cell.contentView addSubview:ttitle3];


    }
    else{

        CGSize size=[[[data objectAtIndex:indexPath.row] valueForKey:@"content"] sizeWithFont:[UIFont systemFontOfSize:14.0f] constrainedToSize:CGSizeMake(265.0f, CGFLOAT_MAX) lineBreakMode:NSLineBreakByWordWrapping];
        ttitle2 = [[[UILabel alloc] initWithFrame:CGRectMake(70.0, 27.0, 200, size.height)] autorelease];
        ttitle2.textColor= [UIColor darkGrayColor];
        ttitle2.backgroundColor=[UIColor clearColor];
        ttitle2.numberOfLines=0;
        ttitle2.tag=70;
        ttitle2.textAlignment = NSTextAlignmentLeft;
        ttitle2.lineBreakMode=NSLineBreakByWordWrapping;
        ttitle2.font=[UIFont fontWithName:@"Arial" size:14.0];
        [cell.contentView addSubview:ttitle2];


        ttitle3 = [[[UILabel alloc] initWithFrame:CGRectMake(70.0, ttitle2.frame.origin.y+ttitle2.frame.size.height-9.0, 210, 40)] autorelease];
        ttitle3.textColor= [UIColor darkGrayColor];
        ttitle3.backgroundColor=[UIColor clearColor];
        ttitle3.numberOfLines=1;
        ttitle3.tag=71;
        ttitle3.textAlignment = NSTextAlignmentLeft;
        ttitle3.lineBreakMode=NSLineBreakByWordWrapping;
        ttitle3.font=[UIFont fontWithName:@"Arial" size:11.0];
        [cell.contentView addSubview:ttitle3];

    }


}
else {
    imageView = (UIImageView *) [cell viewWithTag:1];
    ttitle=( UILabel *) [cell viewWithTag:69];
    ttitle2=( UILabel *) [cell viewWithTag:70];
    ttitle3=( UILabel *) [cell viewWithTag:71];
}

//STUFFOUTSIDE

// Customize cell:
// *** This section should customize the cell depending on what row or section
//  is passed in indexPath, since this is executed every time this delegate method
//  is called.



imageView.image=[UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[[data objectAtIndex:indexPath.row] valueForKey:@"thumbnail"]]]];

[ttitle setText:[[data objectAtIndex:indexPath.row] valueForKey:@"name"]];
[ttitle2 setText:[[data objectAtIndex:indexPath.row] valueForKey:@"content"]];

NSString* first=[[[data objectAtIndex:indexPath.row] valueForKey:@"hashtag"] stringByAppendingString:@"     "];
NSString* second =[first stringByAppendingString:[[data objectAtIndex:indexPath.row] valueForKey:@"place"]];
NSString* third=[second stringByAppendingString:@"        "];
NSString* fourth=[third stringByAppendingString:@"¤ "];
NSString* conversion=[[[data objectAtIndex:indexPath.row] valueForKey:@"counter"] stringValue];
NSString* fifth=[fourth stringByAppendingString:conversion];
[ttitle3 setText:fifth];

return cell;

}

Answer 1

There are a lot of issues that can cause lag but I see three probable causes in this case:

1. The background color of cell subviews (your labels, etc) shouldn't be clear unless absolutely required. This kills scrolling performace.

2. If the image being set in the imageView is not the right size and has to be scaled, this will cause major lag. If this is the case, you will either need to save an appropriately sized image to display in the table, or load them asynchronously so that the table will scroll without waiting for the image to load.

3. As Fabian mentions in the comment below, since you are downloading these images from the web, you definitely want to load the images asynchronously. Every time that a cell is displayed, it has to wait for the image to download before moving onto displaying the next one. This is the biggest problem that you have with this code right now. The following question has a few different options for doing this: iOS - Asynchronous Image Downloading

Answer 2

You're synchronously fetching data from an URL for getting the image for each cell. This means that for each cell you're blocking the main thread until the data has been fetched from the internet.

You'll have to do the image loading asynchronously on a background thread and update the cells when the image is loaded. There are plenty of blog posts about this.

Update:
There's no way to tell whether the image URL is local or not, but I assume that it's a remote URL and the images are not stored inside your app.