美文网首页
性能优化1-UI卡顿处理

性能优化1-UI卡顿处理

作者: 方圆几度 | 来源:发表于2022-02-26 14:53 被阅读0次

    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状态切换的耗时,以达到监控卡顿的目的

    相关文章

      网友评论

          本文标题:性能优化1-UI卡顿处理

          本文链接:https://www.haomeiwen.com/subject/lrdqrrtx.html