iOS性能优化---tableView懒加载图片

发表于 | 分类于 | 阅读次数 | 次


关于tableView的性能优化问题一直都是iOS开发者必备的一项优化技能, 可以好不夸张的说, app里面半数以上的页面都需要用到tableView; 对于它的优化网友也总结的非常详细, 鄙人就不详细解释了, 附个链接:
关于tableview的优化

本文主要介绍一下如何在tableView中实现懒加载图片, 别怪我多嘴, 一些初学者对懒加载的印象可能是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
@interface ViewController()
@property (nonatomic,strong) NSMutableArray *lazyLoadArr;
@end
@implementation ViewController
- (NSMutableArray *)lazyLoadArr
{
    if (!_lazyLoadArr) {
        _lazyLoadArr = [NSMutableArray array];
    }
    return _lazyLoadArr;
}
@end

实例中定义了一个懒加载的可变数组, 重写数组的getter方法, 在该方法中判断是否存在lazyLoadArr, 如果存在就返回, 不存在就初始化, 这样保证数组只加载了一次; 而这个只是懒加载中比较常见的一种用法;
那么什么是懒加载呢?

懒加载也叫延迟加载, 或者通俗来讲就是用到时再去加载对象

也就是说用到这种思想的基本上都属于懒加载;

其实在tableView懒加载图片也是app中比较常见的功能; 它可以可以减轻服务器的压力, 节约流量, 提高页面的加载速度等等, 费这么大劲儿, 最终也是为了更好的用户体验;
先附上实现效果图, 让大家感受一下:

效果图.gif
这个例子节选自苹果的官方例子LazyTableImages实现图片懒加载;
LazyTableImages下载

OK, 现在我们开始剖析一下代码;
附上工程目录:

工程目录.png

首先说一下细节部分, 其实也不是什么大问题, 留意一下:
①工程里面的AppDelegate类被替换成LazyTableAppDelegate, 其实在函数入口main.m替换下类就行;
②pch文件导入了Foundation, UIKit框架全局调用, 所以出现了以下情况:

AppRecord.h

一般对对象的基础操作都放在了Foundation.h, 为了方便, 通常也就直接引入;

数据请求

为了减少数据延迟加载的卡顿感, demo里直接把数据请求写在了LazyTableAppDelegate文件中; 选一小段代码说一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
__weak ParseOperation *weakParser = self.parser;
self.parser.completionBlock = ^(void) {
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
    if (weakParser.appRecordList != nil)
    {
        dispatch_async(dispatch_get_main_queue(), ^{
            RootViewController *rootViewController =
                (RootViewController*)[(UINavigationController*)weakSelf.window.rootViewController topViewController];
            rootViewController.entries = weakParser.appRecordList;
            [rootViewController.tableView reloadData];
        });
    }
    weakSelf.queue = nil;
};
[self.queue addOperation:self.parser];

  • block循环引用问题, 这个经常遇到, 就不多说了;
  • 数据请求是在子线程里进行了, 然而要想对UI进行操作, 需要回到主线程, 刷新数据;
  • 对于networkActivityIndicatorVisible, 这个是UIApplication的一个属性, 用于在状态栏上显示菊花转的图标，表明网络状态, 而我们平常都是用MB或者SVP来表示网络加载的, 有可能没见过, 说明一下;

UI部分(tableView)

看了示意图我们发现只有在tableView松开的时候才加载图片, 那这个是怎么实现的呢, 我从tableView的cellForRowAtIndexPath:代理方法中选了一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
if (!appRecord.appIcon)
   {
       if (self.tableView.dragging == NO && self.tableView.decelerating == NO)
       {
           [self startIconDownload:appRecord forIndexPath:indexPath];
       }
       cell.imageView.image = [UIImage imageNamed:@"Placeholder.png"];
   }
   else
   {
      cell.imageView.image = appRecord.appIcon;
   }

当没有下载好的图片, 即!appRecord.appIcon时, 判断是否停止拖拽(self.tableView.dragging == NO)或者加速度为0(self.tableView.decelerating == NO), 都满足的话就下载图片, 这样就实现了图示效果;
但是光这样处理是不够的, 如果连续拖动, 不让tableView停止, 里面的图片是空的, 所以还要进行下面的操作:

1
2
3
4
5
6
7
8
9
10
11
12
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (!decelerate)
	{
        [self loadImagesForOnscreenRows];
    }
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self loadImagesForOnscreenRows];
}

由于tableView继承了scrollView, 所以才在dragging和decelerating结束的时候加载图片, 最终实现了图示效果;

优化亮点

一. 图片圆角优化

一般在开发中我们是这样给图片切圆角的:

1
2
myImage.layer.cornerRadius = 50;
myImage.layer.masksToBounds = YES;

其中masksToBounds(CALayer)表示视图的图层上的子图层,如果超出父图层的部分就截取掉；还有clipsToBounds(UIView)，是指视图上的子视图,如果超出父视图的部分就截取掉。
在iOS9.0之前这样设置会触发离屏渲染，比较消耗性能。尤其是tableView中(处理了大量图片)，会明显的感到页面有轻微卡顿。
那要怎么处理呢, 一般我们用Core Graphics绘制圆角, 附上工程里的代码:

1
2
3
4
5
6
CGSize itemSize = CGSizeMake(kAppIconSize, kAppIconSize);
UIGraphicsBeginImageContextWithOptions(itemSize, NO, 0.0f);
CGRect imageRect = CGRectMake(0.0, 0.0, itemSize.width, itemSize.height);
[image drawInRect:imageRect];
self.appRecord.appIcon = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

二. model的小技巧

我们发现在工程中, 无论对于tableView来说, 还是下载图片来说, 都是对同一个对象进行操作, demo中把tableView数据里面的对象扩展了下面这两条属性:

1
2
@property (nonatomic, strong) UIImage *appIcon;
@property (nonatomic, strong) NSString *imageURLString;

这样我们去下载图片的时候, 只需要传进去一个AppRecord类的对象, 返回来也是同一个对象:

1
2
3
 // 将下载完成的网络图片的data值传给这个对象
UIImage *image = [[UIImage alloc] initWithData:data];
self.appRecord.appIcon = image;

有人要问了只是简化了传入的数据嘛, 没什么特别的, 但是你细看tableView里面cellForRowAtIndexPath方法就会发现, 这样做既简化了逻辑判断, 又易于理解, 因为是同一个对象;

1
2
3
4
5
6
7
8
9
10
11
12
13
AppRecord *appRecord = (self.entries)[indexPath.row];
  if (!appRecord.appIcon)         //  简便的判断条件
        {
            if (self.tableView.dragging == NO && self.tableView.decelerating == NO)
            {
                [self startIconDownload:appRecord forIndexPath:indexPath];
            }
            cell.imageView.image = [UIImage imageNamed:@"Placeholder.png"];
        }
        else
        {
           cell.imageView.image = appRecord.appIcon;
        }

这个思想真是不由得让老铁双击666啊, 非常棒👍;

好的, 这次就分享那么多, 以后还得研究更多更深的源码, 加油⛽️;

-------------文章结束标记O(∩_∩)O哈哈~-------------
知我者谓我心忧