最近在微博上看到一個(gè)很好的開源項(xiàng)目VVeboTableViewDemo全跨，是關(guān)于如何優(yōu)化UITableView的询件。加上正好最近也在優(yōu)化項(xiàng)目中的類似朋友圈功能這塊递宅，思考了很多關(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)識(shí)：

UITableView的簡單認(rèn)識(shí)

UITableView最核心的思想就是UITableViewCell的重用機(jī)制。簡單的理解就是：UITableView只會(huì)創(chuàng)建一屏幕（或一屏幕多一點(diǎn)）的UITableViewCell芯勘，其他都是從中取出來重用的箱靴。每當(dāng)Cell滑出屏幕時(shí)，就會(huì)放入到一個(gè)集合（或數(shù)組）中（這里就相當(dāng)于一個(gè)重用池）荷愕，當(dāng)要顯示某一位置的Cell時(shí)棍矛，會(huì)先去集合（或數(shù)組）中取，如果有抛杨，就直接拿來顯示茁帽；如果沒有铁追，才會(huì)創(chuàng)建。這樣做的好處可想而知濒生，極大的減少了內(nèi)存的開銷晒骇。

知道UITableViewCell的重用原理后不脯，我們來看看UITableView的回調(diào)方法龙优。UITableView最主要的兩個(gè)回調(diào)方法是tableView:cellForRowAtIndexPath:和tableView:heightForRowAtIndexPath:窘疮。理想上我們是會(huì)認(rèn)為UITableView會(huì)先調(diào)用前者蔚出，再調(diào)用后者滚躯，因?yàn)檫@和我們創(chuàng)建控件的思路是一樣的仍侥，先創(chuàng)建它棠隐，再設(shè)置它的布局客情。但實(shí)際上卻并非如此膀斋，我們都知道梭伐，UITableView是繼承自UIScrollView的，需要先確定它的contentSize及每個(gè)Cell的位置仰担，然后才會(huì)把重用的Cell放置到對應(yīng)的位置籽御。所以事實(shí)上，UITableView的回調(diào)順序是先多次調(diào)用tableView:heightForRowAtIndexPath:以確定contentSize及Cell的位置惰匙，然后才會(huì)調(diào)用tableView:cellForRowAtIndexPath:技掏，從而來顯示在當(dāng)前屏幕的Cell。

舉個(gè)例子來說：如果現(xiàn)在要顯示100個(gè)Cell项鬼，當(dāng)前屏幕顯示5個(gè)哑梳。那么刷新（reload）UITableView時(shí)，UITableView會(huì)先調(diào)用100次tableView:heightForRowAtIndexPath:方法绘盟，然后調(diào)用5次tableView:cellForRowAtIndexPath:方法鸠真；滾動(dòng)屏幕時(shí)，每當(dāng)Cell滾入屏幕龄毡，都會(huì)調(diào)用一次tableView:heightForRowAtIndexPath:吠卷、tableView:cellForRowAtIndexPath:方法。

看到這里沦零，想必大伙也都能隱約察覺到祭隔，UITableView優(yōu)化的首要任務(wù)是要優(yōu)化上面兩個(gè)回調(diào)方法。事實(shí)也確實(shí)如此路操，下面按照我探討進(jìn)階的過程疾渴，來研究如何優(yōu)化：

優(yōu)化探索，項(xiàng)目拿到手時(shí)代碼是這樣：

  (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ù)雜的時(shí)候桩撮，直接卡出翔了敦第。。店量。特別是在我的Touch4上申尼，這我能忍？垫桂！好吧，依據(jù)上面UITableView原理的分析粟按，我們先來分析它為什么卡诬滩？
這樣寫，在Cell賦值內(nèi)容的時(shí)候灭将，會(huì)根據(jù)內(nèi)容設(shè)置布局疼鸟，當(dāng)然也就可以知道Cell的高度，想想如果1000行庙曙，那就會(huì)調(diào)用1000+頁面Cell個(gè)數(shù)次tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法空镜，而我們對Cell的處理操作，都是在這個(gè)方法里的捌朴！什么賦值吴攒、布局等等。開銷自然很大砂蔽，這種方案Pass洼怔。。左驾。改進(jìn)代碼镣隶。

改進(jìn)代碼后：

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 NSDictionary *dict = self.dataList[indexPath.row];
 return [ContacterTableCell cellHeightOfInfo:dict];
}

思路是把賦值和計(jì)算布局分離。這樣讓tableView:cellForRowAtIndexPath:方法只負(fù)責(zé)賦值诡右，tableView:heightForRowAtIndexPath:方法只負(fù)責(zé)計(jì)算高度安岂。注意：兩個(gè)方法盡可能的各司其職，不要重疊代碼帆吻！兩者都需要盡可能的簡單易算域那。Run一下，會(huì)發(fā)現(xiàn)UITableView滾動(dòng)流暢了很多猜煮。琉雳。。

基于上面的實(shí)現(xiàn)思路友瘤，我們可以在獲得數(shù)據(jù)后翠肘，直接先根據(jù)數(shù)據(jù)源計(jì)算出對應(yīng)的布局，并緩存到數(shù)據(jù)源中辫秧，這樣在tableView:heightForRowAtIndexPath:方法中就直接返回高度束倍，而不需要每次都計(jì)算了。

- (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í)候，實(shí)質(zhì)上系統(tǒng)都需要調(diào)用底層的接口進(jìn)行繪制婶肩，當(dāng)我們大量添加控件時(shí)办陷，對資源的開銷也會(huì)很大，所以我們可以索性直接繪制律歼，提高效率民镜。是不是說的很抽象？廢話不多說险毁，直接上代碼：

首先需要給自定義的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();
 //整個(gè)內(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í)間+設(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];
}}

上述代碼只貼出來部分功能，但大體的思路都是一樣的跷跪，各個(gè)信息都是根據(jù)之前算好的布局進(jìn)行繪制的亥鬓。這里是需要異步繪制，但如果在重寫drawRect方法就不需要用GCD異步線程了域庇，因?yàn)?code>drawRect本來就是異步繪制的嵌戈。對于圖文混排的繪制，可以移步Google听皿，研究下CoreText熟呛，這塊內(nèi)容太多了，不便展開尉姨。
好了庵朝，至此，我們又讓UITableView的效率提高了一個(gè)等級(jí)又厉！但我們的步伐還遠(yuǎn)遠(yuǎn)不止這些九府，下面我們還可以從UIScrollView的角度出發(fā)，再次找到突破口覆致。

滑動(dòng)UITableView時(shí)侄旬，按需加載對應(yīng)的內(nèi)容
直接上代碼：

 //按需加載 - 如果目標(biāo)行與當(dāng)前行相差超過指定行數(shù)，只在目標(biāo)滾動(dòng)范圍的前后指定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+3<datas.count) {
 [arr addObject:[NSIndexPath indexPathForRow:indexPath.row+1 inSection:0]];
 [arr addObject:[NSIndexPath indexPathForRow:indexPath.row+2 inSection:0]];
 [arr addObject:[NSIndexPath indexPathForRow:indexPath.row+3 inSection:0]];
 }
 } else {
 NSIndexPath *indexPath = [temp firstObject];
 if (indexPath.row>3) {
 [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;
}

滾動(dòng)很快時(shí)儡羔，只加載目標(biāo)范圍內(nèi)的Cell宣羊，這樣按需加載，極大的提高流暢度汰蜘。

寫了這么多仇冯，也差不多該來個(gè)總結(jié)了！UITableView的優(yōu)化主要從三個(gè)方面入手：

• 提前計(jì)算并緩存好高度（布局）族操，因?yàn)閔eightForRowAtIndexPath:是調(diào)用最頻繁的方法苛坚；
• 異步繪制，遇到復(fù)雜界面色难，遇到性能瓶頸時(shí)泼舱，可能就是突破口；
• 滑動(dòng)時(shí)按需加載莱预，這個(gè)在大量圖片展示，網(wǎng)絡(luò)加載的時(shí)候很管用Ｏ罨（SDWebImage已經(jīng)實(shí)現(xiàn)異步加載依沮，配合這條性能杠杠的）。

除了上面最主要的三個(gè)方面外枪狂，還有很多幾乎大伙都很熟知的優(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動(dòng)態(tài)添加View严蓖，可以初始化時(shí)就添加薄嫡，然后通過hide來控制是否顯示

尾巴
肯定很多人會(huì)非常好奇，為什么我都是手動(dòng)用代碼創(chuàng)建Cell的颗胡？現(xiàn)在主流不都是Xib毫深、Storyboard什么的嘛？我的回答是：要想提高效率毒姨，還是手動(dòng)寫有用哑蔫！拋開Xib、Storyboard需要系統(tǒng)自動(dòng)轉(zhuǎn)碼弧呐，給系統(tǒng)多加了一層負(fù)擔(dān)不談闸迷，自定義Cell的繪制更是無從下手，所以俘枫，在我看來腥沽，復(fù)雜的需要高效的界面，還是手動(dòng)寫代碼吧ｐ健Ｑ睬颉言沐！

最后如果你們的項(xiàng)目都是用的Xib、Storyboard酣栈，并需要優(yōu)化UITableView的話险胰，sunnyxx大神提出了好的方案：http://blog.sunnyxx.com/2015/05/17/cell-height-calculation/ 大伙可以自行研究研究。

知識(shí)是需要不斷學(xué)習(xí)的矿筝，作為剛上路的我起便，如果有什么理解不到位的，歡迎大伙留言指正窖维，如果你有什么更牛逼的想法榆综，希望一起交流交流。

注明：本篇的分析源碼來源于開源項(xiàng)目VVeboTableViewDemo
參考：https://github.com/johnil/VVeboTableViewDemo