iOS中關(guān)于列表滾動(dòng)流暢的一些探討

作者：佚名 2017-09-10 17:31:18

近些年，App 越來(lái)越推崇體驗(yàn)至上，隨隨便便亂寫一通的話已經(jīng)很難讓用戶買帳了，順滑的列表便是其中很重要的一點(diǎn)。如果一個(gè) App 的頁(yè)面滾動(dòng)起來(lái)總是卡頓卡頓的，輕則被當(dāng)作反面教材來(lái)吐槽或者襯托“我們的 App balabala…”，重則直接卸載。正好最近在優(yōu)化這一塊兒，總結(jié)記錄下。

如果說(shuō)有什么好的博客文章推薦，ibireme 的 iOS 保持界面流暢的技巧這篇堪稱業(yè)界毒瘤，墻裂推薦反復(fù)閱讀。這篇文章中講解了很多的優(yōu)化點(diǎn)，我自己總結(jié)了下收益***的兩個(gè)優(yōu)化點(diǎn)：

避免重復(fù)多次計(jì)算 cell 行高
文本異步渲染

大家可以看看上面這張圖的對(duì)比分析，數(shù)據(jù)是 iPhone6 的機(jī)子用 instruments 抓的，左邊的是用 Auto Layout 繪制界面的數(shù)據(jù)分析，正常如果想平滑滾動(dòng)的話，fps 至少需要穩(wěn)定在 55 左右，我們可以發(fā)現(xiàn)，在沒(méi)有緩存行高和異步渲染的情況下 fps 是***的，可以說(shuō)是比較卡頓了，至少是能肉眼感覺(jué)出來(lái)，能滿足平滑滾動(dòng)要求的也只有在緩存行高且異步渲染的情況下;右邊的是沒(méi)用 Auto Layout 直接用 frame 來(lái)繪制界面的數(shù)據(jù)分析，可以發(fā)現(xiàn)即使沒(méi)有異步渲染，也能勉強(qiáng)滿足平滑滾動(dòng)的要求，如果開(kāi)啟異步渲染的話，可以說(shuō)是相當(dāng)?shù)慕z滑了。

避免重復(fù)多次計(jì)算 cell 行高

TableView 行高計(jì)算可以說(shuō)是個(gè)老生常談的問(wèn)題了， heightForRowAtIndexPath: 是個(gè)調(diào)用相當(dāng)頻繁的方法，在里面做過(guò)多的事情難免會(huì)造成卡頓。在 iOS 8 中，我們可以通過(guò)設(shè)置下面兩個(gè)屬性來(lái)很輕松的實(shí)現(xiàn)高度自適應(yīng)：

self.tableView.estimatedRowHeight = 88; 
self.tableView.rowHeight = UITableViewAutomaticDimension;

雖然很方便，不過(guò)如果你的頁(yè)面對(duì)性能有一定要求，建議不要這么做，具體可以看看 sunnyxx 的優(yōu)化UITableViewCell高度計(jì)算的那些事。文中針對(duì) Auto Layout，提供了個(gè) cell 行高的緩存庫(kù) UITableView-FDTemplateLayoutCell ，可以很好的幫助我們避免 cell 行高多次計(jì)算的問(wèn)題。

如果不使用 Auto Layout，我們可以在請(qǐng)求完拿到數(shù)據(jù)后提前計(jì)算好頁(yè)面?zhèn)€個(gè)控件的 frame 和 cell 高度，并且緩存在內(nèi)存中，用的時(shí)候直接在 heightForRowAtIndexPath: 取出計(jì)算好的值就行，大概流程如下：

模擬請(qǐng)求數(shù)據(jù)回調(diào)：

- (void)viewDidLoad { 
    [super viewDidLoad]; 
     
    [self buildTestDataThen:^(NSMutableArray <FDFeedEntity *> *entities) { 
        self.data = @[].mutableCopy; 
        @autoreleasepool { 
            for (FDFeedEntity *entity in entities) { 
                FrameModel *frameModel = [FrameModel new]; 
                frameModel.entity = entity; 
                [self.data addObject:frameModel]; 
            } 
        } 
        [self.tvFeed reloadData]; 
    }]; 
}

一個(gè)簡(jiǎn)單計(jì)算 frame 、cell 行高方式：

//FrameModel.h 
 
@interface FrameModel : NSObject 
 
@property (assign, nonatomic, readonly) CGRect titleFrame; 
@property (assign, nonatomic, readonly) CGFloat cellHeight; 
@property (strong, nonatomic) FDFeedEntity *entity; 
 
@end 
 
//FrameModel.m 
 
@implementation FrameModel 
 
- (void)setEntity:(FDFeedEntity *)entity { 
    if (!entity) return; 
     
    _entity = entity; 
     
    CGFloat maxLayout = ([UIScreen mainScreen].bounds.size.width - 20.f); 
    CGFloat bottom = 4.f; 
     
    //title 
    CGFloat titleX = 10.f; 
    CGFloat titleY = 10.f; 
    CGSize titleSize = [entity.title boundingRectWithSize:CGSizeMake(maxLayout, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName : Font(16.f)} context:nil].size; 
    _titleFrame = CGRectMake(titleX, titleY, titleSize.width, titleSize.height); 
     
    //cell Height 
    _cellHeight = (CGRectGetMaxY(_titleFrame) + bottom); 
} 
 
@end

行高取值：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
    FrameFeedCell *cell = [tableView dequeueReusableCellWithIdentifier:FrameFeedCellIdentifier forIndexPath:indexPath]; 
    FrameModel *frameModel = self.data[indexPath.row]; 
    cell.model = frameModel; 
    return cell; 
} 
 
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { 
    FrameModel *frameModel = self.data[indexPath.row]; 
    return frameModel.cellHeight; 
}

控件賦值：

- (void)setModel:(FrameModel *)model { 
    if (!model) return; 
     
    _model = model; 
     
    FDFeedEntity *entity = model.entity; 
     
    self.titleLabel.frame = model.titleFrame; 
    self.titleLabel.text = entity.title; 
}

優(yōu)缺點(diǎn)

緩存行高方式有現(xiàn)成的庫(kù)簡(jiǎn)單方便，雖然 UITableView-FDTemplateLayoutCell 已經(jīng)處理的很好了，但是 Auto Layout 對(duì)性能還是會(huì)有部分消耗;手動(dòng)計(jì)算 frame 方式所有的位置都需要計(jì)算，比較麻煩，而且在數(shù)據(jù)量很大的情況下，大量的計(jì)算對(duì)數(shù)據(jù)展示時(shí)間會(huì)有部分影響，相應(yīng)的回報(bào)就是性能會(huì)更好一些。

文本異步渲染

當(dāng)顯示大量文本時(shí)，CPU 的壓力會(huì)非常大。對(duì)此解決方案只有一個(gè)，那就是自定義文本控件，用 TextKit 或***層的 CoreText 對(duì)文本異步繪制。盡管這實(shí)現(xiàn)起來(lái)非常麻煩，但其帶來(lái)的優(yōu)勢(shì)也非常大，CoreText 對(duì)象創(chuàng)建好后，能直接獲取文本的寬高等信息，避免了多次計(jì)算(調(diào)整 UILabel 大小時(shí)算一遍、UILabel 繪制時(shí)內(nèi)部再算一遍);CoreText 對(duì)象占用內(nèi)存較少，可以緩存下來(lái)以備稍后多次渲染。

幸運(yùn)的是，想支持文本異步渲染也有現(xiàn)成的庫(kù) YYText ，下面來(lái)講講如何搭配它***程度滿足我們?nèi)缃z般順滑的需求：

Frame 搭配異步渲染

基本思路和計(jì)算 frame 類似，只不過(guò)把系統(tǒng)的 boundingRectWithSize: 、 sizeWithAttributes: 換成 YYText 中的方法：

配置 frame model：

//FrameYYModel.h 
 
@interface FrameYYModel : NSObject 
 
@property (assign, nonatomic, readonly) CGRect titleFrame; 
@property (strong, nonatomic, readonly) YYTextLayout *titleLayout; 
 
@property (assign, nonatomic, readonly) CGFloat cellHeight; 
 
@property (strong, nonatomic) FDFeedEntity *entity; 
 
@end 
 
//FrameYYModel.m 
 
@implementation FrameYYModel 
 
- (void)setEntity:(FDFeedEntity *)entity { 
    if (!entity) return; 
     
    _entity = entity; 
     
    CGFloat maxLayout = ([UIScreen mainScreen].bounds.size.width - 20.f); 
    CGFloat space = 10.f; 
    CGFloat bottom = 4.f; 
     
    //title 
    NSMutableAttributedString *title = [[NSMutableAttributedString alloc] initWithString:entity.title]; 
    title.yy_font = Font(16.f); 
    title.yy_color = [UIColor blackColor]; 
     
    YYTextContainer *titleContainer = [YYTextContainer containerWithSize:CGSizeMake(maxLayout, CGFLOAT_MAX)]; 
    _titleLayout = [YYTextLayout layoutWithContainer:titleContainer text:title]; 
     
    CGFloat titleX = 10.f; 
    CGFloat titleY = 10.f; 
    CGSize titleSize = _titleLayout.textBoundingSize; 
    _titleFrame = (CGRect){titleX,titleY,CGSizeMake(titleSize.width, titleSize.height)}; 
     
    //cell Height 
    _cellHeight = (CGRectGetMaxY(_titleFrame) + bottom); 
} 
 
@end

對(duì)比上面 frame，可以發(fā)現(xiàn)多了個(gè) YYTextLayout 屬性，這個(gè)屬性可以提前配置文本的特性，包括 font 、 textColor 以及行數(shù)、行間距、內(nèi)間距等等，好處就是可以把一些邏輯提前處理好，比如根據(jù)接口字段，動(dòng)態(tài)配置字體顏色，字號(hào)等，如果用 Auto Layout，這部分邏輯則不可避免的需要寫在 cellForRowAtIndexPath: 方法中。

UITableViewCell 處理：

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { 
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; 
    if (!self) return nil; 
   
    YYLabel *title = [YYLabel new]; 
    title.displaysAsynchronously = YES; //開(kāi)啟異步渲染 
    title.ignoreCommonProperties = YES; //忽略屬性 
    title.layer.borderColor = [UIColor brownColor].CGColor; 
    title.layer.cornerRadius = 1.f; 
    title.layer.borderWidth = 1.f; 
    [self.contentView addSubview:_titleLabel = title]; 
   
    return self; 
}

賦值：

- (void)setModel:(FrameYYModel *)model { 
    if (!model) return; 
    _model = model; 
     
    self.titleLabel.frame = model.titleFrame; 
    self.titleLabel.textLayout = model.titleLayout; //直接取 YYTextLayout 
}

Auto Layout 搭配異步渲染

YYText 非常友好，同樣支持 xib，YYText 繼承自 UIView ，正常的在 xib 中配置約束就行了，需要注意的一點(diǎn)是，多行文本的情況下需要設(shè)置***換行寬：

CGFloat maxLayout = [UIScreen mainScreen].bounds.size.width - 20.f; 
self.titleLabel.preferredMaxLayoutWidth = maxLayout; 
self.subTitleLabel.preferredMaxLayoutWidth = maxLayout; 
self.contentLabel.preferredMaxLayoutWidth = maxLayout;

優(yōu)缺點(diǎn)

YYText 的異步渲染能極大程度的提高列表流暢度，真正達(dá)到如絲般順滑，但是在開(kāi)啟異步時(shí)，刷新列表會(huì)有閃爍情況，不知道算不算 bug，最近也看到作者回歸了，相信這個(gè)庫(kù)會(huì)越來(lái)越好，畢竟真●大神!

其它

列表中如果存在很多系統(tǒng)設(shè)置的圓角頁(yè)面導(dǎo)致卡頓：

label.layer.cornerRadius = 5.f; 
label.clipsToBounds = YES;

其實(shí)據(jù)我觀察，只要當(dāng)前屏幕內(nèi)只要設(shè)置圓角的控件個(gè)數(shù)不要太多(大概十幾個(gè)算個(gè)零界點(diǎn))，就不會(huì)引起卡頓。

還有就是只要不設(shè)置 clipsToBounds 不管多少個(gè)，都不會(huì)卡頓，比如你需要圓角的控件是白色背景色的，然后它的父控件也是白色背景色的，而且沒(méi)有點(diǎn)擊后高亮的，就沒(méi)必要 clipsToBounds 了。

總結(jié)

YYText 和 UITableView-FDTemplateLayoutCell 搭配可以很大程度的提高列表流暢度，如果時(shí)間比較緊迫，可以直接采取 Auto Layout + UITableView-FDTemplateLayoutCell + YYText 方式;如果列表中文本不包含富文本，僅僅顯示文字，又不想引入這兩個(gè)庫(kù)，可以使用系統(tǒng)方式提前計(jì)算 Frame;如果想***程度的流暢度，就需要使用提前計(jì)算 Frame + YYText，具體大家根據(jù)自己情況選擇合適的方案就行。

責(zé)任編輯：未麗燕來(lái)源： ifelseboyxx's Blog