1.引入
对于很多app，使用UITableView控件时都会对图形进行圆角处理，这样显得app美观不少，常用的圆角处理，通过layer.cornerRadius和layer.maskToBounds设置即可。
// macOs 10.12, XCode 8 , iOS 10.0
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCell(withIdentifier: "tableViewCell");
if cell == nil {
cell = UITableViewCell.init(style: .default, reuseIdentifier: "tableViewCell");
cell?.imageView?.layer.masksToBounds = true;
cell?.imageView?.layer.cornerRadius = RowHeight / 2;
cell?.imageView?.backgroundColor = UIColor.white;
cell?.backgroundColor = UIColor.white;
}
let cacheIndex = indexPath.row % 20;
let nameString = "siberian\(cacheIndex)";
let image = UIImage.init(named: nameString);
cell?.imageView?.image = image;
return cell!;
}
有离屏渲染，当一页图片展示只有10张左右时，数量56FPS,看起来还是可以的，当一页设置有20张左右时，就只有45FPS了.
测试机为:iPhone 5s/iOS 8.3
iPhone 5s/iOS 8.3优化前
测试机:iPad Air 2/iOS 10.0
iPad Air 2/iOS 10.0优化前
38~40FPS
2.优化
1.离屏渲染处理
圆角是离屏渲染的一大杀手，所以必须处理好，采用Core Graphic在后台进行对图片进行clip处理，这样就能很好的处理离屏渲染的问题。
// 绘制圆角图片，没有离屏渲染，但是有图层混合。
DispatchQueue.global(qos: .background).async(execute: {
let rect = CGRect.init(x: 0, y: 0, width: RowHeight, height: RowHeight);
UIGraphicsBeginImageContextWithOptions(rect.size, false, UIScreen.main.scale);
let path = UIBezierPath.init(roundedRect: rect, cornerRadius: rect.height / 2.0);
path.addClip();
image?.draw(in: rect);
let lastImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.cache.setObject(_ :lastImage!, forKey: String(cacheIndex) as AnyObject, cost:Int((lastImage?.size.width)!) * Int((lastImage?.size.height)!) * Int(UIScreen.main.scale));
DispatchQueue.main.async(execute: {
cell.imageView?.image = lastImage;
});
});
2.缓存处理好的图片
以上图片是经过处理后得到的，可以将其缓存，等到需要使用时，可以直接从本地缓存拉取。
let cacheImage = cache.object(forKey: String(cacheIndex) as AnyObject);
if let lastCacheImage = cacheImage {
cell.imageView?.image = lastCacheImage as? UIImage;
}
3.优化图片获取的顺序
当用户滑动界面时，调用顺序为:
graph LR
scrollViewWillBeginDragging-->scrollViewDidScroll
scrollViewDidScroll-->scrollViewWillEndDragging
scrollViewWillEndDragging-->scrollViewDidEndDragging
scrollViewDidEndDragging-->scrollViewWillBeginDecelerating
scrollViewWillBeginDecelerating-->scrollViewDidScroll
scrollViewDidScroll-->scrollViewDidEndDecelerating
我们可以在滑动时，可以直接设置cell，但不去绘图，只在停止时调用refreshTableView()方法,方法如下:
// 当滑动结束时调用
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
refreshTableView();
print(#function);
}
// 当拖拽停止时调用
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
refreshTableView();
print(#function);
}
func refreshTableView() {
let arr:[IndexPath]? = self.tbView.indexPathsForVisibleRows;
if let visibleIndexArr = arr {
visibleIndexArr.forEach({ (indexPath) in
let cell = self.tbView.cellForRow(at: indexPath);
getImage(indexPath: indexPath, forCell: cell!);
});
}
}
4.优化后的图片
iPad air 2/iOS 10.0优化后的离屏渲染
iPad air 2/iOS 10.0优化后的图层混合
iPad air 2/iOS 10.0优化后的FPS
3.结语
通过上面后台绘制圆角，缓存处理过的图片，选择适当时机进行图片加载，使得帧率保持在56~58FPS左右。
