性能优化1-UI卡顿处理

1、了解CPU与GPU

在屏幕成像的过程中,CPU和GPU起着至关重要的作用

CPU(Central Processing Unit,中央处理器)

对象的创建和销毁、对象属性的调整、布局计算、文本的计算和排版、图片的格式转换和解码、图像的绘制(Core Graphics)

GPU(Graphics Processing Unit,图形处理器)

处理纹理的渲染

CPU和GPU作用

在iOS中是双缓冲机制,有前帧缓存、后帧缓存;

屏幕成像原理:

屏幕成像原理

卡顿产生的原因

卡顿产生的原因

按照60FPS的刷帧率,每隔16ms就会有一次VSync信号,当VSync信号到来时,GPU还没完成渲染,便要等待到下一帧到来时才会显示,这就照成了丢帧卡顿。

2、优化思路:

尽可能减少CPU、GPU资源消耗

CPU优化思路点:

1、尽量使用轻量级的对象,比如用不到事件处理的地方,可以考虑用CALayer取代UIView

2、不要频繁地调用UIView的相关属性,比如frame、bound、transform等属性,尽量减少不必要的修改;

3、尽量提前计算好布局,在有需要时进行一次性调整对应的属性,不要多次修改属性;

4、autolayout会比直接设置frame消耗更多的CPU资源;

5、图片的size最好和uiview的size保持一致;

6、控制下线程的最大并发量;

7、尽量把耗时的操作放到子线程处理,如文本处理,尺寸计算、绘制;图片的解码

样例性能对比(图片解码)

直接给视图添加imageView,并设置图片

UIImageView *imageView = [[UIImageView alloc] init];

imageView.frame=CGRectMake(100,100,100,56);

[self.view addSubview:imageView];

 self.imageView= imageView;

 self.imageView.image = [UIImage imageNamed:@"timg"];

性能检测

直接设置image

同样是给视图添加imageView,并设置图片

    UIImageView *imageView = [[UIImageView alloc] init];

    imageView.frame=CGRectMake(100,100,100,56);

[self.viewaddSubview:imageView];

 self.imageView= imageView;

    dispatch_async(dispatch_get_global_queue(0, 0), ^{

        // 获取CGImage

        CGImageRefcgImage = [UIImageimageNamed:@"timg"].CGImage;

        // alphaInfo

        CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(cgImage) & kCGBitmapAlphaInfoMask;

 BOOLhasAlpha =NO;

 if (alphaInfo == kCGImageAlphaPremultipliedLast ||

            alphaInfo ==kCGImageAlphaPremultipliedFirst ||

            alphaInfo ==kCGImageAlphaLast||

            alphaInfo ==kCGImageAlphaFirst) {

hasAlpha =YES;

        }

        // bitmapInfo

        CGBitmapInfo bitmapInfo = kCGBitmapByteOrder32Host;

        bitmapInfo |= hasAlpha ?kCGImageAlphaPremultipliedFirst : kCGImageAlphaNoneSkipFirst;

        // size

        size_twidth =CGImageGetWidth(cgImage);

        size_theight =CGImageGetHeight(cgImage);

        // context

CGContextRefcontext =CGBitmapContextCreate(NULL, width, height,8,0,CGColorSpaceCreateDeviceRGB(), bitmapInfo);

        // draw

        CGContextDrawImage(context,CGRectMake(0,0, width, height), cgImage);

        // get CGImage

        cgImage =CGBitmapContextCreateImage(context);

        // into UIImage

        UIImage*newImage = [UIImageimageWithCGImage:cgImage];

        // release

        CGContextRelease(context);

        CGImageRelease(cgImage);

        // back to the main thread

        dispatch_async(dispatch_get_main_queue(), ^{

 self.imageView.image= newImage;

        });

    });

性能检测

异步解码后设置image

文本的子线程计算异步,主线程渲染

// 文字计算

[@"text" boundingRectWithSize:CGSizeMake(100, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:nil context:nil];    

// 文字绘制   

[@"text" drawWithRect:CGRectMake(0, 0, 100, 100) options:NSStringDrawingUsesLineFragmentOrigin attributes:nil context:nil];


GPU优化思路:

1、尽量避免短时间内大量图片的显示,尽可能将多张图片合成一张进行显示;

2、GPU能处理的最大纹理尺寸是4096x4096,一旦超过这个尺寸,就会占用CPU资源进行处理,所以纹理尽量不要超过这个尺寸;

3、尽量减少视图数量和层次;

4、减少透明的视图(alpha<1),不透明的就设置opaque为YES

5、尽量避免出现离屏渲染

3、离屏渲染

在openGL中,GPU有两种渲染方式

On-screen rendering: 当前屏幕渲染,在当前用于显示屏幕缓冲区进行渲染操作;(默认方式)

Off-screen rendering: 离屏渲染,在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染。

离屏渲染比较消耗性能原因:

需要创建缓冲区;

整个过程需要多次切换上下文环境,先是从当前屏幕切换到离屏,渲染结束后将离屏渲染区的渲染结果绘制到当前屏幕,又需要切换上下文环境

离屏渲染触发:

光栅化,layer.shouldRasterize = YES

遮罩,layer.mask

圆角,同时设置layer.masksToBounds = YES、layer.cornerRadius大于0

考虑通过CoreGraphics绘制裁剪圆角,或者叫美工提供圆角图片

阴影,layer.shadowXXX ,如果设置了layer.shadowPath就不会产生离屏渲染。

4、卡顿检测

“卡顿”主要是因为在主线程执行了比较耗时的操作

可以添加Observer到主线程RunLoop中,通过监听RunLoop状态切换的耗时,以达到监控卡顿的目的

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容