UITableView的優化策略

背景

UITableView作為iOS開發中最重要和常用的控件之一,其中的實現原理值得深入研究一下。蘋果軟件在這塊的優化水平直接決定了iOS的流暢體性,TableView需要有很好的滾動性能,不然用戶會在滾動過程中發現動畫的瑕疵。然而在使用第三方應用時,卻經常遇到性能上的問題,普遍表現在滾動時比較卡,特別是table cell中包含圖片的情況時。實際上只要針對性地優化一下,這種問題就不會有了。有興趣的可以看看LazyTableImages這個官方的例子程序,雖然也要從網上下載圖片并顯示,但滾動時絲毫不卡。

原理:

UITableView是UIScrollView的子類,因此它可以自動響應滾動事件(一般為上下滾動)。
UITableView最核心的思想就是UITableViewCell的重用機制。
簡單的理解就是: UITableView只會創建一屏幕(或一屏幕多一點)的UITableViewCell,其他都是從中取出來 重用的。每當Cell滑出屏幕時,就會放入到一個集合(或數組)中(這里就相當于一個重用池),當要顯示某一位置的Cell時,會先去集合(或數組)中取,如果有,就直接拿來顯 示;如果沒有,才會創建。這樣做的好處可想而知,極大的減少了內存的開銷。  
UITableView最主要的兩個回調方法是tableView:cellForRowAtIndexPath:和 tableView:heightForRowAtIndexPath:。理想上我們是會認為UITableView會先調用前者,再調用后者,因為這和我們創建控件的思路是一樣的,先創建它,再設置它的布局。但實際上 卻并非如此,我們都知道,UITableView是繼承自UIScrollView的,需要先確定它的 contentSize及每個Cell的位置,然后才會把重用的Cell放置到對應的位置。所以事實上, UITableView的回調順序是先多次調用tableView:heightForRowAtIndexPath:以確定 contentSize及Cell的位置,然后才會調用tableView:cellForRowAtIndexPath:,從而來顯示在 當前屏幕的Cell。
  舉個例子來說:如果現在要顯示100個Cell,當前屏幕顯示5個。那么刷新(reload) UITableView時,UITableView會先調用100次tableView:heightForRowAtIndexPath:方法,然 后調用5次tableView:cellForRowAtIndexPath:方法;滾動屏幕時,每當Cell滾入屏幕,都會調用一次tableView:heightForRowAtIndexPath:和tableView:cellForRowAtIndexPath:方法。
  此外,UITableView還可以分為多個sections,每個區段都可以有自己的head、foot和cells。而在定位一個cell時,就需要2個字段了:在哪個section,以及在這個section的第幾行。這在iOS SDK中是用NSIndexPath來表述的,UIKit為其添加了indexPathForRow:inSection:這個創建方法。

優化方法:

1.不要重復創建不必要的tableViewCell,正確使用reuseIdentifier來重用cells,兩個reuseIdentifier的值要相同
<pre>
[tableView registerNib:[UINib nibWithNibName:@"MyCell" bundle:nil] forCellReuseIdentifier:@"cell"];
[tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexpath];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}</pre>

2.使用rowHeight, sectionFooterHeightsectionHeaderHeight來設定固定的高,不要請求delegate 緩存行高
<pre>
tableView.rowHeight = 150;
tableView.sectionHeaderHeight = 50;
tableView.sectionFooterHeight = 50;</pre>
注意:當每行高不相等時先使用estimatedRowHeight預設行高,提前計算并緩存好高度(布局), 再使用tableView:heightForRowAtIndexPath:方法在其中計算返回不同的高度。
詳細行高講解sunnyxx大神提出了好的方案:http://blog.sunnyxx.com/2015/05/17/cell-height-calculation/ 大伙可以自行研究研究

3.盡量使所有的view 不透明,包括cell自身

cell.opaque = YES;//默認為YES,不透明的視圖可以極大地提高渲染的速度。

Apple的文檔對于為圖片設置透明屬性的描述是:
(opaque)這個屬性給渲染系統提供了一個如何處理這個view的提示。如果設為YES,渲染系統就認為這個view是完全不透明的,這使得渲染系統優化一些渲染過程和提高性能。如果設置為NO,渲染系統正常地和其它內容組成這個View。默認值是YES。
在相對比較靜止的畫面中,設置這個屬性不會有太大影響。然而當這個view嵌在scroll view里邊,或者是一個復雜動畫的一部分,不設置這個屬性的話會在很大    程度上影響app的性能。
4.如果cell內現實的內容來自web,使用異步加載,緩存請求結果

圖片比較多的時候,可以考慮使用SDWebImage進行圖片緩存;

5.減少subviews的數量
  UITableViewCell包含了textLabel、detailTextLabel和imageView等view,而你還可以自定義一些視圖放在它的contentView里。然而view是很大的對象,創建它會消耗較多資源,并且也影響渲染的性能。
  如果你的table cell包含圖片,且數目較多,使用默認的UITableViewCell會非常影響性能。奇怪的是,使用自定義的view,而非預定義的view,明顯會快些。
當然,最佳的解決辦法還是繼承UITableViewCell,并在其drawRect:中自行繪制:
<pre>- (void)drawRect:(CGRect)rect {
if (image) {
[image drawAtPoint:imagePoint];
self.image = nil;
} else {
[placeHolder drawAtPoint:imagePoint];
}
[text drawInRect:textRect withFont:font lineBreakMode:UILineBreakModeTailTruncation];
}
</pre>
不過這樣一來,你會發現選中一行后,這個cell就變藍了,其中的內容就被擋住了。最簡單的方法就是將cell的selectionStyle屬性設為UITableViewCellSelectionStyleNone,這樣就不會被高亮了。
此外還可以創建CALayer,將內容繪制到layer上,然后對cell的contentView.layer調用addSublayer:方法。這個例子中,layer并不會顯著影響性能,但如果layer透明,或者有圓角、變形等效果,就會影響到繪制速度了。解決辦法可參見后面的預渲染圖像。
不要做多余的繪制工作。
在實現drawRect:的時候,它的rect參數就是需要繪制的區域,這個區域之外的不需要進行繪制。
例如上例中,就可以用CGRectIntersectsRect、CGRectIntersection或CGRectContainsRect判斷是否需要繪制image和text,然后再調用繪制方法。
預渲染圖像。
你會發現即使做到了上述幾點,當新的圖像出現時,仍然會有短暫的停頓現象。解決的辦法就是在bitmap context里先將其畫一遍,導出成UIImage對象,然后再繪制到屏幕,詳細做法可見《利用預渲染加速iOS設備的圖像顯示》。
不要阻塞主線程。
做到前幾點后,你的table view滾動時應該足夠流暢了,不過你仍可能讓用戶感到不爽。常見的現象就是在更新數據時,整個界面卡住不動,完全不響應用戶請求。
出現這種現象的原因就是主線程執行了耗時很長的函數或方法,在其執行完畢前,無法繪制屏幕和響應用戶請求。其中最常見的就是網絡請求了,它通常都需要花費數秒的時間,而你不應該讓用戶等待那么久。
解決辦法就是使用多線程,讓子線程去執行這些函數或方法。這里面還有一個學問,當下載線程數超過2時,會顯著影響主線程的性能。因此在使用ASIHTTPRequest時,可以用一個NSOperationQueue來維護下載請求,并將其maxConcurrentOperationCount設為2。而NSURLRequest則可以配合GCD來實現,或者使用NSURLConnection的setDelegateQueue:方法。
當然,在不需要響應用戶請求時,也可以增加下載線程數,以加快下載速度:
<pre>
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (!decelerate) {
queue.maxConcurrentOperationCount = 5;
}
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
queue.maxConcurrentOperationCount = 5;
}
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
queue.maxConcurrentOperationCount = 2;
}
</pre>
此外,自動載入更新數據對用戶來說也很友好,這減少了用戶等待下載的時間。例如每次載入50條信息,那就可以在滾動到倒數第10條以內時,加載更多信息:
<pre>
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
if (count - indexPath.row < 10 && !updating) {
updating = YES;
[self update];
}
}
// update方法獲取到結果后,設置updating為NO
還有一點要注意的就是當圖片下載完成后,如果cell是可見的,還需要更新圖像:
NSArray *indexPaths = [self.tableView indexPathsForVisibleRows];
for (NSIndexPath *visibleIndexPath in indexPaths) {
if (indexPath == visibleIndexPath) {
MyTableViewCell *cell = (MyTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
cell.image = image;
[cell setNeedsDisplayInRect:imageRect];
break;
}
}
// 也可不遍歷,直接與頭尾相比較,看是否在中間即可。
</pre>
6.使用shadowPath來畫陰影
只要你提前告訴CoreAnimation你要渲染的View的形狀Shape,就會減少離屏渲染計算
<pre>
[cell.layer setShadowPath:[[UIBezierPath bezierPathWithRect:myView.bounds] CGPath];
</pre>
加上上面這行代碼,就減少離屏渲染時間,大大提高了性能

7.盡量不使用cellForRowAtIndexPath:,如果你需要用到它,只用一次然后緩存結果

8.使用正確的數據結構來存儲數據

9.滑動時按需加載,避免漸變,圖片縮放,后臺選入
滑動時按需加載,這個在大量圖片展示,網絡加載的時候很管用!(SDWebImage已經實現異步加載,配合這條性能杠杠的)
<pre>
//按需加載 - 如果目標行與當前行相差超過指定行數,只在目標滾動范圍的前后指定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];
}
}</pre>
記得在tableView:cellForRowAtIndexPath:方法中加入判斷:
<pre>
if (needLoadArr.count>0&&[needLoadArr indexOfObject:indexPath]==NSNotFound) {
[cell clear];
return;
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內容