iOS大量使用圆角影响性能的原因
2017-08-31 09:50
459 查看
iOS设备的硬件时钟会发出Vsync(垂直同步信号),然后App的CPU会去计算屏幕要显示的内容,之后将计算好的内容提交到GPU去渲染。随后,GPU将渲染结果提交到帧缓冲区,等到下一个VSync到来时将缓冲区的帧显示到屏幕上。也就是说,一帧的显示是由CPU和GPU共同决定的。
ios_frame_drop.png
从上图可以看出,第三个Vsyc到来时GPU还没有渲染好,这一帧就会被丢弃,等待下一次机会,此时屏幕上显示的还是之前的内容,这就是界面卡顿的原因。也就是说,不管GPU还是CPU阻碍了显示的流程,都会造成掉帧的现象。
我们在绘制圆角时经常会用到layer的属性:
CALayer的border,cornerRadius,阴影,mask,通常会触发离屏渲染(offscreen rendering),而离屏渲染通常发生在GPU中,当一个列表中有大量的圆角使用calayer并快速滑动时,可以观察到GPU的资源已经占满,而CPU的资源消耗很少。这时界面的帧数会降低,会有卡顿的情况。
为了避免这种情况,可以尝试开启CALayer.shouldRasterize属性,这会把原本离屏渲染的操作转嫁到CPU上。也可以把一张已经绘制好的圆角图片覆盖到原本的视图上。最彻底的解决办法是,把需要显示的图形在后台线程绘制为图片,避免使用CALayer的属性。
我用collectionviewcell的CALayer绘制圆角,在真机上滑动列表测的时候有明显的卡顿。
屏幕快照 2017-02-07 下午3.00.26.png
不使用calayer,对image进行裁剪,滑动列表不再卡顿:
屏幕快照 2017-02-07 下午2.45.06.png
ios_frame_drop.png
从上图可以看出,第三个Vsyc到来时GPU还没有渲染好,这一帧就会被丢弃,等待下一次机会,此时屏幕上显示的还是之前的内容,这就是界面卡顿的原因。也就是说,不管GPU还是CPU阻碍了显示的流程,都会造成掉帧的现象。
我们在绘制圆角时经常会用到layer的属性:
_view1.layer.cornerRadius = 10; _view1.layer.masksToBounds = YES;
CALayer的border,cornerRadius,阴影,mask,通常会触发离屏渲染(offscreen rendering),而离屏渲染通常发生在GPU中,当一个列表中有大量的圆角使用calayer并快速滑动时,可以观察到GPU的资源已经占满,而CPU的资源消耗很少。这时界面的帧数会降低,会有卡顿的情况。
为了避免这种情况,可以尝试开启CALayer.shouldRasterize属性,这会把原本离屏渲染的操作转嫁到CPU上。也可以把一张已经绘制好的圆角图片覆盖到原本的视图上。最彻底的解决办法是,把需要显示的图形在后台线程绘制为图片,避免使用CALayer的属性。
我用collectionviewcell的CALayer绘制圆角,在真机上滑动列表测的时候有明显的卡顿。
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath]; UIImageView * view = [cell viewWithTag:1000]; if (!view) { view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)]; [cell addSubview:view]; view.tag = 1000; view.backgroundColor = [UIColor redColor]; view.image = [UIImage imageNamed:@"qq"]; view.layer.cornerRadius = 10; view.layer.masksToBounds = YES; } return cell;
屏幕快照 2017-02-07 下午3.00.26.png
不使用calayer,对image进行裁剪,滑动列表不再卡顿:
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath]; UIImageView * view = [cell viewWithTag:1000]; if (!view) { view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)]; [cell addSubview:view]; view.tag = 1000; dispatch_queue_t backQueue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0); dispatch_async(backQueue, ^{ UIImage * image = [self cutCircleImageWithImage:[UIImage imageNamed:@"qq"] size:view.frame.size radious:10]; dispatch_async(dispatch_get_main_queue(), ^{ view.image = image; }); }); } return cell;
- (UIImage *)cutCircleImageWithImage:(UIImage *)image size:(CGSize)size radious:(CGFloat)radious { UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale); CGRect rect = CGRectMake(0, 0, size.width, size.height); CGContextAddPath(UIGraphicsGetCurrentContext(), [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radious].CGPath); CGContextClip(UIGraphicsGetCurrentContext()); [image drawInRect:rect]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return newImage; }
屏幕快照 2017-02-07 下午2.45.06.png
相关文章推荐
- iOS 大量圆角的使用影响性能问题
- iOS切圆角的方式 第一种方法:通过设置layer的属性 最简单的一种,但是很影响性能,一般在正常的开发中使用很少. UIImageView *imageView = [[UIImag
- 大量的使用用户自定义控件对web性能有什么影响?
- 大量的使用用户自定义控件对web性能有什么影响?
- String使用拼接对性能的影响和原因。
- 阴影,图层蒙板及圆角(当和maskToBounds一起使用时)影响TableView的性能
- 影响SQL Server性能的主要原因
- 使用JDBC插入大量数据的性能测试
- 阵列Cache使用方式对系统性能的影响
- 服务器性能变慢 c盘temp文件夹存在大量sess开头文件的问题原因及解决
- 使用JDBC插入大量数据的性能测试
- Oracle sql 调优:使用虚拟索引在生产环境测试创建索引对数据库性能的影响
- 使用NdbUnit更新数据报“违反并发性 updatecommand 影响了预期 1 条记录中的 0 条”错误的原因
- iOS开发那些事-性能优化–autorelease的使用问题
- 性能测试机中存在大量的TIME_WAIT状态的连接,影响并发压力的发起
- 选择排序法 当数据量较小的时候,使用基本排序方案并不会显著影响程序性能。 选择排序是十分常用的基本排序方案之一。
- 影响SQL性能的原因
- 存储方式对空间使用的影响和性能分析
- 影响SQL执行性能的原因