ios - UITableView 滚动时滞后，每个单元格包含 4 个 UIButtons 和 4 个 UILables

Question

在我的应用程序中，我有一个 UITableView。表中的每一行包含 4 个 UIImages 和 4 个 UILabels，图像大小约为每张图像 50k。在大约 10 行之后，该表似乎有点滞后。我知道图像占用了一些空间，但如果我使用单元格重用标识符，它不应该很流畅吗？代码如下:

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

    FriendViewCell *cell = (FriendViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];


    for(int i =0; i<4; i++) {



        if((int)indexPath.row*4+i<[self.currentUser.friends count]) {


            UIButton *button = cell.buttons[i];
            [button setTag:(int)indexPath.row*4+i];
            button.layer.cornerRadius = button.frame.size.width / 2;
            button.clipsToBounds = YES;
            UILabel *label = cell.labels[i];
            [button addTarget:self action:@selector(friendTapped:) forControlEvents:UIControlEventTouchUpInside];

            UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPressFriend:)];
            [button addGestureRecognizer:longPress];

            //to unhide the hidden buttons and labels if it's a reused cell
            [button setEnabled:YES];
            [button setHidden:NO];
            [label setHidden:NO];

            //set username and profile pic
            PFUser *user =self.currentUser.friends[(int)indexPath.row*4+i];
            label.text=user.username;
            PFFile *userImageFile = user[@"profilePic"];
            [userImageFile getDataInBackgroundWithBlock:^(NSData *imageData, NSError *error) {
                if (!error) {
                    UIImage *image = [UIImage imageWithData:imageData];
                    [button setBackgroundImage:image forState:UIControlStateNormal];

                }
            }];

        }


}

内循环设置按钮的背景图像，这些图像是从 Parse.com 下载的图像。我最初使用 UIScrollView 并在其上放置按钮，但现在转而将它们放在表格中，这样我就可以利用单元格重用来获得内存优势。效果比以前好，但仍然滞后。有什么建议可以帮助我改进它吗？

编辑:我现在添加了一个图像缓存来在本地存储图像，图像现在只下载一次。它们存储在名为 images 的 NSMutableDictionary 中。代码如下:

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

    FriendViewCell *cell = (FriendViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    NSLog(@"offset %f",self.tableView.contentOffset.y);
    for(int i =0; i<4; i++) {



        if((int)indexPath.row*4+i<[self.currentUser.friends count]) {



            UIButton *button = cell.buttons[i];
            [button setTag:(int)indexPath.row*4+i];
            button.layer.cornerRadius = button.frame.size.width / 2;
            button.clipsToBounds = YES;
            UILabel *label = cell.labels[i];
            [button addTarget:self action:@selector(friendTapped:) forControlEvents:UIControlEventTouchUpInside];

            UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longPressFriend:)];
            [button addGestureRecognizer:longPress];

            //to unhide the hidden buttons and labels if it's a reused cell
            [button setEnabled:YES];
            [button setHidden:NO];
            [label setHidden:NO];

            //set username and profile pic
            PFUser *user =self.currentUser.friends[(int)indexPath.row*4+i];
            label.text=user.username;

            UIImage *cachedImage = self.images[@(indexPath.row*4+i)];
            if (cachedImage) {
                NSLog(@"Have image");
                [button setBackgroundImage:cachedImage forState:UIControlStateNormal];
            }

            else {
                NSLog(@"Download image");
                //download code
                PFFile *userImageFile = user[@"profilePic"];
                [userImageFile getDataInBackgroundWithBlock:^(NSData *imageData, NSError *error) {
                    if (!error) {
                        UIImage *image = [UIImage imageWithData:imageData];
                        self.images[@(indexPath.row*4+i)] = image;
                        [button setBackgroundImage:image forState:UIControlStateNormal];

                    }
                }];

            }

现在看起来好一点了，尽管仍然有点滞后。将这样的图像存储在字典中可以吗？现在不会占用50kb*内存中的图像数量吗？另一种方法是将其写入文件，然后根据需要提取图像，但这需要将文件数据转换为图像，这会占用资源，就像我之前不断从 Parse.com 下载的数据进行转换一样。

编辑:

对于任何感兴趣的人，我解决了这个问题:

button.layer.cornerRadius = button.frame.size.width / 2;
button.clipsToBounds = YES;

这导致了延迟。似乎使用图层是系统密集型的。删除该代码，区别就像白天和黑夜。谢谢大家

Answer 1

延迟和内存使用是不同的问题。您只能通过分析应用程序来确定，但我认为您的主要问题是您在委托(delegate)方法中使用 imageWithData: 创建了 4 个 UIImage 实例。这意味着设备每次需要显示新行时都会花费大量时间来解压缩下载的图像数据。这里需要注意的一点是，当您调用 imageWithData: 方法时，不会发生解压缩。它发生在您在屏幕上显示图像时(UIKit 执行延迟加载)。

有几种方法可以解决这个问题。如果可能的话，最好的选择是在那里使用较小的图像。如果没有，那么您可以在单独的线程中预先下载很有可能可见的图像。

编辑: 将所有图像存储在缓存中当然会导致内存问题。您可以使用 NSCache 类缓存它们，它会在内存不足时自动清除缓存。在这种情况下通常的方法是使用 2 级缓存，第一个是 NSCache，第二个是基于磁盘的缓存。为了不减慢速度，基于磁盘的缓存当然应该在一个单独的线程中完成，否则它基本上和你之前做的一样。甚至还有一个名为 SDWebImage 的库可以执行此操作，但您使用的是 Parse，因此您不能直接使用它。

您可以使用一个技巧让 iOS 在图像数据显示在屏幕上之前对其进行解码。它涉及解压缩数据，在新的上下文中绘制它，然后在单独的线程中从中创建一个新的 UIImage。 SDWebImage 使用了类似的方法。