UITableView的优化

TableView 优化提示

优化常识

• 正确使用 reuseIdentifier 来重用 Cells
• Cell 中的子视图都要使用背景颜色，并且不要设置颜色的 alpha 值
• 尽量少用或不用透明图层
• 尽量减少 subviews 的数量
• 尽量少用 addSubview 给 Cell 动态添加 View，可以初始化时就添加，然后通过 hidden 来控制是否显示
• Cell 显示模型数据最好提前计算完成，避免在渲染时动态计算
• 在 heightForRowAtIndexPath: 中尽量不使用 cellForRowAtIndexPath:

优化进阶

• 提前计算并缓存好高度，因为 heightForRowAtIndexPath: 是调用最频繁的方法，一定不要使用自动计算行高！
• 滑动时按需加载，这个在大量图片展示，网络加载的时候很管用，目前的第三方图片框架都已经处理的很好
• 按需加载，还可以在 override func scrollViewWillEndDragging:withVelocity :targetContentOffset:) 方法中根据力量以及目标位置预先加载数据
• 异步绘制，遇到复杂界面，遇到性能瓶颈时，可能就是突破口，代码的复杂度高，相当于自己还要做缓存，可以使用 ASDisplayKit；

借助工具 - Instrument

缓存行高前.png

缓存行高

常量准备－在开发中要少用魔法数字

• 在 HMStatusCell 中增加常量定义

/// 工具栏高度
let HMStatusToolbarHeight: CGFloat = 35
/// 头像宽高
let HMStatusIconWH: CGFloat = 35

• 修改 setupUI 函数，原创微博顶部间距

// 原创微博的 View
originalView.snp_makeConstraints { (make) -> Void in
    make.leading.equalTo(contentView)
    make.top.equalTo(contentView).offset(HMStatusCellMargin)
    make.trailing.equalTo(contentView)
}

• 底部工具栏高度

// 底部 toolBar
statusToolBar.snp_makeConstraints { (make) -> Void in
    self.toolBarTopConstraint = make.top.equalTo(retweetView.snp_bottom).constraint
    make.leading.equalTo(contentView)
    make.width.equalTo(contentView)
    make.height.equalTo(HMStatusToolbarHeight)
}

• 修改原创微博中的 setupUI 函数，设置头像尺寸

iconView.snp_makeConstraints { (make) -> Void in
    make.top.equalTo(self).offset(HMStatusCellMargin)
    make.leading.equalTo(self).offset(HMStatusCellMargin)
    make.size.equalTo(CGSizeMake(HMStatusIconWH, HMStatusIconWH))
}

计算行高

• 在 HMStatusViewModel 构造函数下方准备计算行高函数

// MARK: - 计算行高
/// 计算行高
private func calcRowHeight() -> CGFloat {
    return 200;
}

• 明确行高计算算法

/**
 1. originalView 高度
 顶部距离        HMStatusCellMargin
 顶部内容高度     HMStatusCellMargin + HMStatusIconWH + HMStatusCellMargin + 标签文本高度 + HMStatusCellMargin
 + (配图高度 + HMStatusCellMargin)
 2. retweetView 高度 HMStatusCellMargin + 标签文本高度 + + HMStatusCellMargin
 + (配图高度 + HMStatusCellMargin)
 3. toolBarView 高度
 */

• 复制配图高度函数

/// 根据图片数量计算配图视图大小
private func calcSize(count: Int) -> CGSize {
    // 每一个条目之前的间距
    let itemMargin: CGFloat = 5
    // 每一个条目的宽高
    let itemWH: CGFloat = CGFloat(Int(SCREENW - itemMargin * 2 - HMStatusCellMargin * 2) / 3)
    
    // 计算当前显示的行数与列数
    let col = count == 4 ? 2 : (count >= 3 ? 3 : count)
    let row = count == 4 ? 2 : ((count - 1) / 3 + 1)
    
    // 宽度 = 列数*每一个条目的宽度 + (列数减1)*条目之前的间距
    let width = CGFloat(col) * itemWH + CGFloat(col - 1) * itemMargin
    let height = CGFloat(row) * itemWH + CGFloat(row - 1) * itemMargin
    
    return CGSize(width: width, height: height)
}

• 实现计算行高函数

private func calcRowHeight() -> CGFloat {
    
    // 文本区域尺寸
    let textSize = CGSize(width: SCREENW - 2 * HMStatusCellMargin, height: CGFloat(MAXFLOAT))
    
    // 行高
    var height = HMStatusCellMargin + HMStatusToolbarHeight
    
    // 原创微博
    height += 3 * HMStatusCellMargin + HMStatusIconWH
    
    // 原创微博文字
    if let str = originalStatusAttr {
        height += str.boundingRectWithSize(textSize, options: [.UsesLineFragmentOrigin], context: nil).height
    }
    
    // 判断是否有转发微博
    if status?.retweeted_status != nil {
        height += 2 * HMStatusCellMargin
        
        if let str = retweetedStatusAttr {
            height += str.boundingRectWithSize(textSize, options: [.UsesLineFragmentOrigin], context: nil).height
        }
    }
    
    // 配图高度
    // 1> 配图数量，如果有转发微博配图，原创微博就一定没有配图
    let count = status?.retweeted_status?.pic_urls?.count ?? status?.pic_urls?.count
    
    // 2> 计算配图高度
    if count > 0 {
        height += HMStatusCellMargin
        
        height += calcSize(count!).height
    }
    
    return height;
}

• 定义行高属性，并在构造函数末尾记录行高

/// 模型对应行高
var rowHeight: CGFloat = 0

...

// 构造函数

// 处理原创微博的内容 --> 生成一个带有表情的富文本
let result = dealStatusText(status.text)
originalStatusAttr = result.attr
originalLinkResults = result.linkResult

// 计算行高
rowHeight = calcRowHeight()

• 在 HMHomeTableViewController 增加代理方法，返回缓存的行高

/// 返回缓存行高
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return statusListViewModel.statusList![indexPath.row].rowHeight
}

异步完成设置模型工作

• 在 HMStatusListViewModel 中将 设置模型数组的工作全部放在异步完成

// 通过 StatusDAL 加载`数据`
HMStatusDAL.loadStatus(sinceId, maxId: maxId) { (result) -> () in
    
    guard let statusDicts = result else {
        // 如果加载的数据不存在，直接返回
        complete(isSuccess: false, count: 0)
        return
    }
    
    dispatch_async(dispatch_get_global_queue(0, 0)) {
        
        var tempArray = [HMStatusViewModel]()
        
        // 遍历数组,转成模型
        for value in statusDicts {
            let status = HMStatus(dict: value)
            tempArray.append(HMStatusViewModel(status: status))
        }
        
        printLog("加载回来的数量\(tempArray.count)")
        if self.statusList == nil {
            self.statusList = [HMStatusViewModel]()
        }
        
        // 如果是上拉加载
        if isPullUp {
            // 拼接到数组的后面
            self.statusList = self.statusList! + tempArray
        } else {
            // 拼接到数组的前面
            self.statusList = tempArray + self.statusList!
        }
        
        dispatch_async(dispatch_get_main_queue()) {
            complete(isSuccess: true,count: tempArray.count)
        }
    }
}

减少配图视图尺寸计算

• 在视图模型中定义属性 pictureViewSize

/// 配图视图大小
var pictureViewSize: CGSize = CGSizeZero

• 修改计算行高方法

// 2> 计算配图高度
if count > 0 {
    height += HMStatusCellMargin
    
    pictureViewSize = calcSize(count!)
    
    height += pictureViewSize.height
}

修改配图视图 HMStatusPictureView

• 删除 calcSize 函数

• 添加函数设置配图 url 的同时设置 size

/// 设置图片 url 和 尺寸
///
/// - parameter urls: 配图 URL 数组
/// - parameter size: 配图视图尺寸
func setPicurls(urls: [HMStatusPictureInfo]?, viewSize: CGSize) {
    
    pic_urls = urls
    
    countLabel.text = "\(pic_urls?.count ?? 0)"
    
    let size = urls == nil ? CGSizeZero : viewSize
    
    self.snp_updateConstraints { (make) -> Void in
        self.sizeConstraint = make.size.equalTo(size).constraint
    }

    reloadData()
}

• 将 pic_urls 属性设置为 私有

private var pic_urls: [HMStatusPictureInfo]?

• 修改原创微博中的设置 pic_urls 代码

// 设置数据
pictureView.setPicurls(pic_urls, viewSize: statusViewModel!.pictureViewSize)

• 修改转发微博中的设置 pic_urls 代码

// 设置数据
pictureView.setPicurls(pic_urls, viewSize: statusViewModel!.pictureViewSize)