tablview优化

产品今天给了个需求，最简单的tableview上展示数据，不过有个问题是给的图片都是高清的，所以滑动的时候不流畅，然后就去搜索，最后找到一个大神写的代码，通过runloop解决，感觉很不错，所以写篇文章记录一下。

runloop介绍

1，首先大家先了解一下runloop，网上一搜一大堆，我就简单说一下，大家都知道runloop的主要作用是不断的循环监听事件的，有事件发生时都会触发它，但是不同的事件触发它的模式不同（NSDefaultRunLoopMode和NSRunLoopCommonModes最常用的模式），时间计时器，网络请求会触发它的NSDefaultRunLoopMode，交互（点击，滑动）会触发NSRunLoopCommonModes，NSRunLoopCommonModes比NSDefaultRunLoopMode优先级更高，我们平常应该遇到过，当你滑动tableview的时候你的时间计时器就会停止，所以你就会把你的时间计时器切换到NSRunLoopCommonModes。（这里需要用代码提醒一下，把时间计时器切换到NSRunLoopCommonModes会带来哪些坏处）。

- (void)viewDidLoad {

[super viewDidLoad];

NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(test) userInfo:nil repeats:YES];

[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSRunLoopCommonModes];

}

- (void)test{

[NSThread sleepForTimeInterval:1.0];

NSLog(@"睡一秒钟");

}

我们可以看到在test的方法里面有个耗时操作，这时候当你滑动tableview的时候，就会卡顿，因为它们都处于NSRunLoopCommonModes模式，没有优先级之分了。所以用NSRunLoopCommonModes的时候要注意有没有耗时操作。

2，runloop还有一个功能就是，每次循环都会对你界面上的ui绘制一遍，主要是速度快，我们看不出来，所以当界面中出现高清的图片时因为绘制的慢，就会导致卡顿。

3，对tableview性能优化一般有：加载耗时操作放子线程，更新ui放主线程，说到这里，我们提一下，为什么更新ui放主线程，可能有些人只知道更新ui放主线程，不知道为什么，ui都是UIKit框架的东西，为了增加效率，苹果不建议定义它的(ui的一些类)属性的时候加线程锁的，我们都会用nonatomic，非原子性的，它不是线程安全的，所以把更新ui放到主线程，防止出现多个线程访问它，出现问题。

操作不流畅的代码

下面问题来了，也是我们今天要讲的，如果更新ui也是耗时操作，就像在2提到的，绘制高清图片，那咱们就先来一段卡顿的代码

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

UITableView *tb = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

tb.delegate = self;

tb.dataSource = self;

[self.view addSubview:tb];

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

return 200;

}

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

return 85;

}

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

NSString *identifier = @"cell";

UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];

if(cell==nil){

cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault      reuseIdentifier:identifier];

}

for (UIView *subView in cell.contentView.subviews) {

[subView removeFromSuperview];

}

UILabel *contentLb = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];

contentLb.font = [UIFont systemFontOfSize:15];

contentLb.textColor = [UIColor grayColor];

contentLb.numberOfLines = 2;

contentLb.lineBreakMode = NSLineBreakByClipping;

contentLb.text = @"网络是由节点和连线构成，表示诸多对象及其相互联系。在数学上，网络是一种图，一般认为";

[cell.contentView addSubview:contentLb];

NSString *path = [[NSBundle mainBundle] pathForResource:@"spaceship" ofType:@"jpg"];

UIImage *image = [UIImage imageWithContentsOfFile:path];

UIImageView *iv1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, contentLb.frame.origin.y+contentLb.frame.size.height, 80, 40)];

iv1.image = image;

[cell.contentView addSubview:iv1];

UIImageView *iv2 = [[UIImageView alloc] initWithFrame:CGRectMake(iv1.frame.origin.x+iv1.frame.size.width, contentLb.frame.origin.y+contentLb.frame.size.height, 80, 40)];

iv2.image = image;

[cell.contentView addSubview:iv2];

UIImageView *iv3 = [[UIImageView alloc] initWithFrame:CGRectMake(iv2.frame.origin.x+iv2.frame.size.width, contentLb.frame.origin.y+contentLb.frame.size.height, 80, 40)];

iv3.image = image;

[cell.contentView addSubview:iv3];

return cell;

}

paceship.jpg这张图片我用的差不多有3m，这时候会有稍微的不流畅，还不是那么明显，你可以用个更大的试试。那么我们怎么优化这段代码呢。

优化之后代码

1，因为我们拖拽tableview，runloop就要循环一次，对我们的ui进行绘制一遍，由于图片太大，绘制时间长，出现卡顿，上面我们说过，拖拽的时候runloop处于NSRunLoopCommonModes模式，如果在这个模式下我们不让他绘制图片，等他处于NSDefaultRunLoopMode（拖拽完后他就会回到NSDefaultRunLoopMode模式），我们再让它绘制图片是不是就不会卡顿了，这时候我们就要对runloop进行监听了。给它添加观察者，下面看代码实现

#import "ViewController.h"

#import <objc/runtime.h>

//定义一个block，用来存放加载图片的事件typedef BOOL(^RunloopBlock)(void);

@interface ViewController ()

/** 定义一个数组，存放加载图片的事件 */

@property (nonatomic,strong) NSMutableArray *tasks;

/** 最大任务数，因为我们一个屏幕可能就显示20张图片，这个数不确定，看你自己设置cell的高度了，如果你一个cell上放2个图片，一个屏幕上就能看到2个cell，那你的最大数就是4 */

@property(assign,nonatomic)NSUInteger max;

/**添加一个timer，可以一直让runloop处于唤醒状态，并且处于NSDefaultRunLoopMode模式，这样就可以不断绘制图片*/

@property(nonatomic,strong)NSTimer * timer;

@end

@implementation ViewController

- (void)_timerFiredMethod{

}

- (void)viewDidLoad {

[super viewDidLoad];

_max = 28;//我设置的cell高度，一个屏幕能显示28张图片

_tasks = [NSMutableArray array];

_timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(_timerFiredMethod) userInfo:nil repeats:YES];

UITableView *tb = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

tb.delegate = self;

tb.dataSource = self;

[self.view addSubview:tb];

//注册监听

[self addRunloopObserver];

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

return 200;

}

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

return 85;

}

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

NSString *identifier = @"cell";

UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];

if(cell==nil){

cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault      reuseIdentifier:identifier];

}

for (UIView *subView in cell.contentView.subviews) {

[subView removeFromSuperview];

}

UILabel *contentLb = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 40)];

contentLb.font = [UIFont systemFontOfSize:15];

contentLb.textColor = [UIColor grayColor];

contentLb.numberOfLines = 2;

contentLb.lineBreakMode = NSLineBreakByClipping;

contentLb.text = @"网络是由节点和连线构成，表示诸多对象及其相互联系。在数学上，网络是一种图，一般认为";

[cell.contentView addSubview:contentLb];

//不要直接加载图片!! 你将加载图片的代码!都给RunLoop!!

[self addTask:^BOOL{

NSString *path = [[NSBundle mainBundle] pathForResource:@"spaceship" ofType:@"jpg"];

UIImage *image = [UIImage imageWithContentsOfFile:path];

UIImageView *iv1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, contentLb.frame.origin.y+contentLb.frame.size.height, 80, 40)];

iv1.image = image;

[cell.contentView addSubview:iv1];

return YES;

}];

[self addTask:^BOOL{

NSString *path = [[NSBundle mainBundle] pathForResource:@"spaceship" ofType:@"jpg"];

UIImage *image = [UIImage imageWithContentsOfFile:path];

UIImageView *iv2 = [[UIImageView alloc] initWithFrame:CGRectMake(80, contentLb.frame.origin.y+contentLb.frame.size.height, 80, 40)];

iv2.image = image;

[cell.contentView addSubview:iv2];

return YES;

}];

[self addTask:^BOOL{

NSString *path = [[NSBundle mainBundle] pathForResource:@"spaceship" ofType:@"jpg"];

UIImage *image = [UIImage imageWithContentsOfFile:path];

UIImageView *iv3 = [[UIImageView alloc] initWithFrame:CGRectMake(160, contentLb.frame.origin.y+contentLb.frame.size.height, 80, 40)];

iv3.image = image;

[cell.contentView addSubview:iv3];

return YES;

}];

return cell;

}

//添加任务

- (void)addTask:(RunloopBlock)unit{

[self.tasks addObject:unit];

//保证之前没有显示出来的任务,不再浪费时间加载

if (self.tasks.count > self.max) {

[self.tasks removeObjectAtIndex:0];

}

}

//添加监听，用来监听runloop

- (void)addRunloopObserver{

//获取当前的RunLoop

CFRunLoopRef runloop = CFRunLoopGetCurrent();//用CFRunLoopGetCurrent()和CFRunLoopGetMain()都一样，因为我们现在操作都是在主线程，这个方法就是得到主线程的runloop，因为每个线程都有一个runloop

//定义一个观察者,这是一个结构体

CFRunLoopObserverContext context = {

0,

(__bridge void *)(self),

&CFRetain,

&CFRelease,

NULL

};

//定义一个观察者

static CFRunLoopObserverRef defaultModeObsever;

//创建观察者

defaultModeObsever = CFRunLoopObserverCreate(NULL, kCFRunLoopBeforeWaiting, YES, NSIntegerMax - 999, &Callback, &context);//kCFRunLoopBeforeWaiting观察runloop等待的时候就是处于NSDefaultRunLoopMode模式的时候，YES是否重复观察，Callback回掉方法，就是处于NSDefaultRunLoopMode时候要执行的方法，其他参数我也不知道什么意思

//添加当前RunLoop的观察者

CFRunLoopAddObserver(runloop, defaultModeObsever, kCFRunLoopDefaultMode);

//c语言有creat 就需要release

CFRelease(defaultModeObsever);

}

static void Callback(CFRunLoopObserverRef observer, CFRunLoopActivity activity, void *info){

ViewController * vc = (__bridge ViewController *)(info); //这个info就是我们在context里面放的self参数

if (vc.tasks.count == 0) {

return;

}

BOOL result = NO;

while (result == NO && vc.tasks.count) {

//取出任务

RunloopBlock unit = vc.tasks.firstObject;

//执行任务

result = unit();

//干掉第一个任务

[vc.tasks removeObjectAtIndex:0];

}

}

@end

这是改装后的代码