UITableViewCell 性能优化之切圆角
圆角头像，在很多 App 中都很常见。
无非就是现实一张圆形的图片。
做方便的做法是使用cornerRadius属性来切圆角。
UIImageView*iv = [[UIImageViewalloc] initWithFrame:CGRectMake(0,0,200,200)];iv.center =self.view.center;iv.layer.cornerRadius = iv.bounds.size.width *0.5;iv.layer.masksToBounds =YES;[self.view addSubview:iv];iv.image = [UIImageimageNamed:@"lzy.jpg"];
界面：
使用 cornerRadius "切"出来的圆角
perfect！！一张圆角图片就切出来了。
这有什么难的？so easy 啊。
我也没做什么特别大的努力啊。圆角和性能优化有啥关系，不就是一个属性吗？
使用 cornerRadius 会产生什么问题？为什么谈到切圆角性能优化的时候，必须说道这个属性？
我们打开这个 UI 界面的层次结构的观察。
image.png
发现，切了圆角的图片，外围仍然有个矩形。
感觉像是并没有把矩形切了个原形，而是把四个角的内容变成透明的了？
红色 = 混合图层 = 透明处理 = 更多的 GPU 消耗
打开模拟器的 Color Blended Layers(混合图层),发现UIImageView 的这一片是红色。
模拟器只要出现了红色，就表明这一片做了透明处理。
如果是单单一张图片，且位置从始至终不发生变化，OK 啦。没什么大问题。
但是如果，是一张在 UITableViewCell 上的图片，且 Cell 在快速滑动的时候。
那么 GPU 就无时不刻的都要计算这个透明度。因为要显示和两个图层的综合信息。
这无疑会消耗一部分 GPU 的性能。如果这种混合的情况太多的话，一定会造成 Cell 滑动时候的卡顿了。
现在问题：
我们需要一个圆角的图片，但是使用cornerRadius切了个假圆角，实际上是把四周透明了。
有透明就有混合图层。
有混合图层，GPU 计算量就会变大。
图层固定还好，如果图层一直在移动(cell 滚动)，那么对 GPU 来说是一个性能考验。
要解决的：
我要一张圆形的图片。
不要使用cornerRadius。
真真正正的把四个角给切了。
不使用混合图层，减少 GPU 的压力 提高性能。
解决思路
目标：
既然，使用cornerRadius，做的是假切割，造成了透明&混合图层。
我们就需要一种真切割的方式。
真真正正的把图片的四个角给切了。
不再是cornerRadius会造成透明。
解决方案：
使用核心绘图 + 贝塞尔圆形切割 产生一张新真正切割过四个角的图图片就好了。
贴代码
- (void)rl_cornerImageWithSize:(CGSize)size fillColor:(UIColor*)fillColor complectionBlock:(void(^)(UIImage*))complectionBlock {// 耗时操作放在异步线程dispatch_async(dispatch_get_global_queue(0,0), ^{// 1. 获取图片画板UIGraphicsBeginImageContextWithOptions(size,YES,0);// 2. 填充画板的底色[fillColor setFill];CGRectrect =CGRectMake(0,0, size.width, size.height);UIRectFill(rect);// 3. 开始裁切。矩形圆形路径UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:rect]; [path addClip];// 4. 在底色上画图[selfdrawInRect:rect];// 5. 从画板获取图片UIImage*resultImage =UIGraphicsGetImageFromCurrentImageContext();// 6. 关闭上下文UIGraphicsEndImageContext();// 7. 回到主线程，返回图片。dispatch_async(dispatch_get_main_queue(), ^{if(complectionBlock) { complectionBlock(resultImage); } }); });}
UIImageView*iv = [[UIImageViewalloc] initWithFrame:CGRectMake(0,0,200,200)];iv.center =self.view.center;[self.view addSubview:iv];[[UIImageimageNamed:@"lzy.jpg"] rl_cornerImageWithSize:iv.bounds.size fillColor:[UIColorwhiteColor] complectionBlock:^(UIImage*resultImage) { iv.image = resultImage;}];
运行看效果：
最终效果
达成目标：
需要一个切了圆角的图片 。[√ ]
不要产生混合图层。[√ ]
作者：Just_relax
链接：https://www.jianshu.com/p/a6e51965d51b
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
