解决tableview加载高清图片，滑动卡顿问题

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

runloop介绍

1，首先大家先了解一下runloop，网上一搜一大堆，我就简单说一下，大家都知道runloop是维护一个事件循环，对事件管理的一个对象。有事件发生时都会触发它，让它处于用户状态，没事件的时候会处于内核态。但是不同的事件添加的模式不同（NSDefaultRunLoopMode和NSEventTrackingRunLoopMode最常用的模式），创建的时间计时器会被默认添加到NSDefaultRunLoopMode，交互（点击，滑动）会添加到NSEventTrackingRunLoopMode，NSEventTrackingRunLoopMode比NSDefaultRunLoopMode优先级更高。我们平常应该遇到过，当你滑动tableview的时候你的时间计时器就会停止，我们怎么解决呢，我们可以把事件计时器同时添加到NSDefaultRunLoopMode和NSEventTrackingRunLoopMode这两个mode上面，怎么添加呢？我们要知道在runloop中有一个NSRunLoopCommonModes，他的作用是同步source/timer/observer到多个mode中的一种技术方案，如果我们把事件添加到NSRunLoopCommonModes，runloop内部方法会为我们把事件添加到所有的mode上，所以我们就可以把时间计时器添加到NSRunLoopCommonModes上，来解决滑动tabelview计时器停止的问题（这里需要用代码提醒一下，把时间计时器切换到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的时候，就会卡顿，因为这时候计时器也在NSEventTrackingRunLoopMode上，没有优先级之分了。所以用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处于NSEventTrackingRunLoopMode模式，如果在这个模式下我们不让他绘制图片，等他处于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();//获得当前线程的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

这是改装后的代码

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • iOS开发系列--UITableView全面解析
    概述在iOS开发中UITableView可以说是使用最广泛的控件，我们平时使用的软件中到处都可以看到它的影子，类似...
    liudhkk阅读 8,978评论 3赞 38
  • 谈谈一些入门iOS的经验吧
    前言 最近忙完项目比较闲，想写一篇博客来分享一些自学iOS的心得体会，希望对迷茫的你有所帮助。博主非科班出身，一些...
    GitHubPorter阅读 1,411评论 9赞 5
  • UITableView+FDTemplateLayoutCell 源码阅读
    UITableViewCell 高度计算 UITableView 询问 cell 高度有两种方式：1.rowHei...
    WeiHing阅读 4,418评论 6赞 16
  • 长亭外
    长亭外 断桥前 夕阳落霞残 情悠悠 北风吹叶卷梧桐 鸿雁南飞炊烟直 愁未解 心未眠 梦雨落湿衫 倚窗前 明月何时照...
    小寇同学阅读 430评论 2赞 1
  • 记一次朋友圈
    例行的点名，又流传开来。 他说自己被点了，“一打开微信，三个人点了我，”他怎么可以这样洋洋自得？！ ……“你的生日...
    kikoki阅读 248评论 0赞 0