关于视图在切圆角时候的导致的性能下降的一些探讨(转自我的微博)

iOS中有的时候我们控件要做成圆形 或者是切成圆角,这个时候我们一般都会使用.layer.cornerRadius -> clipsToBounds = YES 的属性来切,这样完全能达到我们的效果,但是如果一个界面上需要切圆角的控件很多,并且列表很长的时候,尤其是像tableView那样如果每一个cell上都有大量的控件需要切,那么就会非常卡顿,帧数严重下降 。其实原因就是这样设置会触发离屏渲染,比较消耗性能。注意:png图片UIImageView处理圆角是不会产生离屏渲染的。(ios9.0之后不会离屏渲染,ios9.0之前还是会离屏渲染)。这里先说下离屏渲染:

iOS的渲染机制:

CPU 计算好显示内容提交到 GPU,GPU 渲染完成后将渲染结果放入帧缓冲区,随后视频控制器会逐行读取帧缓冲区的数据,经过可能的数模转换传递给显示器显示。GPU屏幕渲染有以下两种方式:
On-Screen Rendering
意为当前屏幕渲染,指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行。
Off-Screen Rendering
意为离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。

由以上可以看出离屏渲染需要重新开辟新的缓存空间,必定要更加消耗资源。
通过查资料目前知道了设置了以下属性时,都会触发离屏绘制:
shouldRasterize(光栅化)
masks(遮罩)
shadows(阴影)
edge antialiasing(抗锯齿)
group opacity(不透明)
复杂形状设置圆角等
渐变

我用一个现有的小DEMO来测试下,因为这个demo中没有切圆角,但是有阴影,一样可以出发离屏渲染,所以效果是一样的,在tableView中的自定义cell类中我设置了阴影如图:
使用Instruments测试得到当前帧数在二三十左右

同时屏幕是也出现了黄色图层
关于视图在切圆角时候的导致的性能下降的一些探讨(转自我的微博)_第1张图片
所有黄色的高亮的图层都进行了离屏渲染,也表示这些图层存在着问题,影响性能。而且帧数过低也会直接影响我们对APP的体验。
如何避免离屏渲染:
  • 方法一:使用光栅化,.layer.shouldRasterize = YES; -> .layer.rasterizationScale=[UIScreen mainScreen].scale;设置光栅化,可以使离屏渲染的结果缓存到内存中存为位图,使用的时候直接使用缓存,节省了一直离屏渲染损耗的性能。但是如果layer及sublayers常常改变的话,它就会一直不停的渲染及删除缓存重新创建缓存,所以这种情况下建议不要使用光栅化,这样也是比较损耗性能的。

  • 方法二:最简单的方法,就是图片不作处理,直接覆盖一张中间为圆形透明的图片(推荐使用)这种方法GPU计算多层的混合渲染blending也是会消耗一点性能的,但比第一种方法还是好上很多的

  • 方法三:Core Graphics绘制圆角。这种方式GPU损耗最低,可以用UIimageView添加个点击手势当做UIButton使用。
    UIGraphicsBeginImageContextWithOptions(avatarImageView.bounds.size, NO, [UIScreen mainScreen].scale);
    [[UIBezierPath bezierPathWithRoundedRect:avatarImageView.bounds cornerRadius:50] addClip];[image drawInRect:avatarImageView.bounds];
    avatarImageView.image = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();
    这段方法可以写在SDWebImage的completed回调里,在主线程异步绘制。也可以封装到UIImageView里,写了个DSRoundImageView。后台线程异步绘制,不会阻塞主线程。目前这种方法只用在imageView上,其他地方呢不知道怎么用,不过这种方法会耗费大量的CPU资源和占用内存,本人不太建议使用。

最后给大家测试下,因为我之前的demo没有切圆角,而是使用的阴影,所以我就用第一种方法给大家测一下。
关于视图在切圆角时候的导致的性能下降的一些探讨(转自我的微博)_第2张图片

然后运行,打开Instruments,然后看屏幕
关于视图在切圆角时候的导致的性能下降的一些探讨(转自我的微博)_第3张图片
图层都是绿色没问题,我们再来看帧数,几乎到60 ,效果很明显。

由此可见以后大家再切圆角的时候多注意下,刚才就研究了这么多,有什么问题及时与我交流吧。。。

你可能感兴趣的:(关于视图在切圆角时候的导致的性能下降的一些探讨(转自我的微博))