1.JPG
最近在微博上看到一個很好的開源項目VVeboTableViewDemo队伟，是關(guān)于如何優(yōu)化UITableView的摆昧。加上正好最近也在優(yōu)化項目中的類似朋友圈功能這塊，思考了很多關(guān)于UITableView的優(yōu)化技巧写妥，相信這塊是難點(diǎn)也是痛點(diǎn)捌蚊，所以決定詳細(xì)的整理下我對優(yōu)化UITableView的理解。
UITableView作為iOS開發(fā)中最重要的控件之一园担，其中的實(shí)現(xiàn)原理很是考究届谈。Apple在這塊的優(yōu)化水平直接決定了iOS的體驗(yàn)?zāi)芩Π沧繋讞l街，哈哈弯汰，扯淡扯多了艰山。。咏闪。好了曙搬，廢話不多說，直接進(jìn)入主題鸽嫂。首先來談?wù)勎覍ITableView的認(rèn)識：
UITableView的簡單認(rèn)識
UITableView最核心的思想就是UITableViewCell的重用機(jī)制织鲸。簡單的理解就是：UITableView只會創(chuàng)建一屏幕（或一屏幕多一點(diǎn)）的UITableViewCell，其他都是從中取出來重用的溪胶。每當(dāng)Cell滑出屏幕時搂擦，就會放入到一個集合（或數(shù)組）中（這里就相當(dāng)于一個重用池），當(dāng)要顯示某一位置的Cell時哗脖，會先去集合（或數(shù)組）中取瀑踢，如果有，就直接拿來顯示才避；如果沒有橱夭，才會創(chuàng)建。這樣做的好處可想而知桑逝，極大的減少了內(nèi)存的開銷棘劣。
知道UITableViewCell的重用原理后，我們來看看UITableView的回調(diào)方法楞遏。UITableView最主要的兩個回調(diào)方法是tableView:cellForRowAtIndexPath:和tableView:heightForRowAtIndexPath:茬暇。理想上我們是會認(rèn)為UITableView會先調(diào)用前者首昔，再調(diào)用后者，因?yàn)檫@和我們創(chuàng)建控件的思路是一樣的糙俗，先創(chuàng)建它勒奇，再設(shè)置它的布局。但實(shí)際上卻并非如此巧骚，我們都知道赊颠，UITableView是繼承自UIScrollView的，需要先確定它的contentSize及每個Cell的位置劈彪，然后才會把重用的Cell放置到對應(yīng)的位置竣蹦。所以事實(shí)上，UITableView的回調(diào)順序是先多次調(diào)用tableView:heightForRowAtIndexPath:以確定contentSize及Cell的位置沧奴，然后才會調(diào)用tableView:cellForRowAtIndexPath:草添，從而來顯示在當(dāng)前屏幕的Cell。
舉個例子來說：如果現(xiàn)在要顯示100個Cell扼仲，當(dāng)前屏幕顯示5個。那么刷新（reload）UITableView時抄淑，UITableView會先調(diào)用100次tableView:heightForRowAtIndexPath:方法屠凶，然后調(diào)用5次tableView:cellForRowAtIndexPath:方法；滾動屏幕時肆资，每當(dāng)Cell滾入屏幕矗愧，都會調(diào)用一次tableView:heightForRowAtIndexPath:、tableView:cellForRowAtIndexPath:方法郑原。
看到這里唉韭，想必大伙也都能隱約察覺到，UITableView優(yōu)化的首要任務(wù)是要優(yōu)化上面兩個回調(diào)方法犯犁。事實(shí)也確實(shí)如此属愤，下面按照我探討進(jìn)階的過程，來研究如何優(yōu)化：
優(yōu)化探索酸役，項目拿到手時代碼是這樣：
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
ContacterTableCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ContacterTableCell"];
if (!cell) {
cell = (ContacterTableCell *)[[[NSBundle mainBundle] loadNibNamed:@"ContacterTableCell" owner:self options:nil] lastObject];
}
NSDictionary *dict = self.dataList[indexPath.row];
[cell setContentInfo:dict];
return cell;
} - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
return cell.frame.size.height;
}
看到這段代碼住诸，對于剛畢業(yè)的我來說，覺得還是蠻巧妙的涣澡，但巧歸巧贱呐，當(dāng)Cell非常復(fù)雜的時候，直接卡出翔了入桂。奄薇。。特別是在我的Touch4上抗愁，這我能忍馁蒂？呵晚！好吧，依據(jù)上面UITableView原理的分析远搪，我們先來分析它為什么卡劣纲？
這樣寫，在Cell賦值內(nèi)容的時候谁鳍，會根據(jù)內(nèi)容設(shè)置布局癞季，當(dāng)然也就可以知道Cell的高度，想想如果1000行倘潜，那就會調(diào)用1000+頁面Cell個數(shù)次tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法绷柒，而我們對Cell的處理操作，都是在這個方法里的涮因！什么賦值废睦、布局等等。開銷自然很大养泡，這種方案Pass嗜湃。。澜掩。改進(jìn)代碼购披。
改進(jìn)代碼后：
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
NSDictionary *dict = self.dataList[indexPath.row];
return [ContacterTableCell cellHeightOfInfo:dict];
}
思路是把賦值和計算布局分離。這樣讓tableView:cellForRowAtIndexPath:方法只負(fù)責(zé)賦值肩榕，tableView:heightForRowAtIndexPath:方法只負(fù)責(zé)計算高度刚陡。注意：兩個方法盡可能的各司其職，不要重疊代碼株汉！兩者都需要盡可能的簡單易算筐乳。Run一下，會發(fā)現(xiàn)UITableView滾動流暢了很多乔妈。蝙云。。
基于上面的實(shí)現(xiàn)思路路召，我們可以在獲得數(shù)據(jù)后贮懈，直接先根據(jù)數(shù)據(jù)源計算出對應(yīng)的布局，并緩存到數(shù)據(jù)源中优训，這樣在tableView:heightForRowAtIndexPath:方法中就直接返回高度朵你，而不需要每次都計算了。
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
NSDictionary *dict = self.dataList[indexPath.row];
CGRect rect = [dict[@"frame"] CGRectValue];
return rect.frame.height;
}
其實(shí)上面的改進(jìn)方法并不是最佳方案揣非，但基本能滿足簡單的界面抡医！記得開頭我的任務(wù)嗎？像朋友圈那樣的圖文混排，這種方案還是扛不住的忌傻！我們需要進(jìn)入更深層次的探究：自定義Cell的繪制大脉。
我們在Cell上添加系統(tǒng)控件的時候，實(shí)質(zhì)上系統(tǒng)都需要調(diào)用底層的接口進(jìn)行繪制水孩，當(dāng)我們大量添加控件時镰矿，對資源的開銷也會很大，所以我們可以索性直接繪制俘种，提高效率秤标。是不是說的很抽象？廢話不多說宙刘，直接上代碼：
首先需要給自定義的Cell添加draw方法苍姜，（當(dāng)然也可以重寫drawRect）然后在方法體中實(shí)現(xiàn)：
//異步繪制
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
CGRect rect = [_data[@"frame"] CGRectValue];
UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
//整個內(nèi)容的背景
[[UIColor colorWithRed:250/255.0 green:250/255.0 blue:250/255.0 alpha:1] set];
CGContextFillRect(context, rect);
//轉(zhuǎn)發(fā)內(nèi)容的背景
if ([_data valueForKey:@"subData"]) {
[[UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1] set];
CGRect subFrame = [_data[@"subData"][@"frame"] CGRectValue];
CGContextFillRect(context, subFrame);
[[UIColor colorWithRed:200/255.0 green:200/255.0 blue:200/255.0 alpha:1] set];
CGContextFillRect(context, CGRectMake(0, subFrame.origin.y, rect.size.width, .5));
}
{
//名字
float leftX = SIZE_GAP_LEFT+SIZE_AVATAR+SIZE_GAP_BIG;
float x = leftX;
float y = (SIZE_AVATAR-(SIZE_FONT_NAME+SIZE_FONT_SUBTITLE+6))/2-2+SIZE_GAP_TOP+SIZE_GAP_SMALL-5;
[_data[@"name"] drawInContext:context withPosition:CGPointMake(x, y) andFont:FontWithSize(SIZE_FONT_NAME)
andTextColor:[UIColor colorWithRed:106/255.0 green:140/255.0 blue:181/255.0 alpha:1]
andHeight:rect.size.height];
//時間+設(shè)備
y += SIZE_FONT_NAME+5;
float fromX = leftX;
float size = [UIScreen screenWidth]-leftX;
NSString *from = [NSString stringWithFormat:@"%@ %@", _data[@"time"], _data[@"from"]];
[from drawInContext:context withPosition:CGPointMake(fromX, y) andFont:FontWithSize(SIZE_FONT_SUBTITLE)
andTextColor:[UIColor colorWithRed:178/255.0 green:178/255.0 blue:178/255.0 alpha:1]
andHeight:rect.size.height andWidth:size];
}
//將繪制的內(nèi)容以圖片的形式返回，并調(diào)主線程顯示
UIImage *temp = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
dispatch_async(dispatch_get_main_queue(), ^{
if (flag==drawColorFlag) {
postBGView.frame = rect;
postBGView.image = nil;
postBGView.image = temp;
}
}
//內(nèi)容如果是圖文混排悬包，就添加View衙猪，用CoreText繪制
[self drawText];
}}
上述代碼只貼出來部分功能，但大體的思路都是一樣的布近，各個信息都是根據(jù)之前算好的布局進(jìn)行繪制的垫释。這里是需要異步繪制，但如果在重寫drawRect方法就不需要用GCD異步線程了撑瞧，因?yàn)閐rawRect本來就是異步繪制的棵譬。對于圖文混排的繪制，可以移步Google季蚂，研究下CoreText，這塊內(nèi)容太多了琅束，不便展開扭屁。
好了，至此涩禀，我們又讓UITableView的效率提高了一個等級料滥！但我們的步伐還遠(yuǎn)遠(yuǎn)不止這些，下面我們還可以從UIScrollView的角度出發(fā)艾船，再次找到突破口葵腹。
滑動UITableView時，按需加載對應(yīng)的內(nèi)容
直接上代碼：
//按需加載 - 如果目標(biāo)行與當(dāng)前行相差超過指定行數(shù)屿岂，只在目標(biāo)滾動范圍的前后指定3行加載践宴。
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
NSIndexPath *ip = [self indexPathForRowAtPoint:CGPointMake(0, targetContentOffset->y)];
NSIndexPath *cip = [[self indexPathsForVisibleRows] firstObject];
NSInteger skipCount = 8;
if (labs(cip.row-ip.row)>skipCount) {
NSArray *temp = [self indexPathsForRowsInRect:CGRectMake(0, targetContentOffset->y, self.width, self.height)];
NSMutableArray *arr = [NSMutableArray arrayWithArray:temp];
if (velocity.y<0) {
NSIndexPath *indexPath = [temp lastObject];
if (indexPath.row+33) {
[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-3 inSection:0]];
[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-2 inSection:0]];
[arr addObject:[NSIndexPath indexPathForRow:indexPath.row-1 inSection:0]];
}
}
[needLoadArr addObjectsFromArray:arr];
}
}
記得在tableView:cellForRowAtIndexPath:方法中加入判斷：
if (needLoadArr.count>0&&[needLoadArr indexOfObject:indexPath]==NSNotFound) {
[cell clear];
return;
}
滾動很快時，只加載目標(biāo)范圍內(nèi)的Cell爷怀，這樣按需加載阻肩，極大的提高流暢度。
寫了這么多运授，也差不多該來個總結(jié)了烤惊！UITableView的優(yōu)化主要從三個方面入手：
提前計算并緩存好高度（布局）乔煞，因?yàn)閔eightForRowAtIndexPath:是調(diào)用最頻繁的方法；
異步繪制柒室，遇到復(fù)雜界面渡贾，遇到性能瓶頸時，可能就是突破口雄右；
滑動時按需加載空骚，這個在大量圖片展示，網(wǎng)絡(luò)加載的時候很管用２桓（SDWebImage已經(jīng)實(shí)現(xiàn)異步加載府怯，配合這條性能杠杠的）。
除了上面最主要的三個方面外防楷，還有很多幾乎大伙都很熟知的優(yōu)化點(diǎn)：
正確使用reuseIdentifier來重用Cells
盡量使所有的view opaque牺丙，包括Cell自身
盡量少用或不用透明圖層
如果Cell內(nèi)現(xiàn)實(shí)的內(nèi)容來自web，使用異步加載复局，緩存請求結(jié)果
減少subviews的數(shù)量
在heightForRowAtIndexPath:中盡量不使用cellForRowAtIndexPath:冲簿，如果你需要用到它，只用一次然后緩存結(jié)果
盡量少用addView給Cell動態(tài)添加View亿昏，可以初始化時就添加峦剔，然后通過hide來控制是否顯示
尾巴
肯定很多人會非常好奇，為什么我都是手動用代碼創(chuàng)建Cell的角钩？現(xiàn)在主流不都是Xib吝沫、Storyboard什么的嘛？我的回答是：要想提高效率递礼，還是手動寫有用惨险！拋開Xib、Storyboard需要系統(tǒng)自動轉(zhuǎn)碼脊髓，給系統(tǒng)多加了一層負(fù)擔(dān)不談辫愉，自定義Cell的繪制更是無從下手，所以将硝，在我看來恭朗，復(fù)雜的需要高效的界面，還是手動寫代碼吧Ｒ捞邸Ｌ等！
最后如果你們的項目都是用的Xib律罢、Storyboard诽嘉，并需要優(yōu)化UITableView的話，sunnyxx大神提出了好的方案：http://blog.sunnyxx.com/2015/05/17/ce
