iOSUI卡顿原因与优化

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pk_sir/article/details/83151027

发现问题-分析原因-解决问题
随着科技技术的日益成熟,现在移动终端的硬件配置越来越高,系统使用体验越来越好!所以现在开发人员对一些优化显得不是很上心,但是既然你看到这里了,说明你已经和他们不一样了,你眼界更高了,技术肯定会越来越好,优秀!

问题:页面复杂的时候,页面滑动有点卡卡的,特别是在5,5s等以前的机型上更为明显

显示的原理:

CPU计算好各个视图的位置,大小,对图片进行解码等,绘制成顶点数据,纹理数据交给GPU
GPU对收到的纹理进行混合,顶点变换,渲染到帧缓冲区
每16.7ms,一个时钟信号到达,帧缓冲区取出一帧,显示到屏幕

每秒60帧(60fps):也就是说两帧相隔 16.7ms。在这16.7ms中,CPU或者GPU被大量占用,并且没办法完成一帧的绘制,导致时钟信号到来的时候,取得还是上一帧的内容,也就有可能导致界面卡顿


磨刀不误砍柴工先来看看常用工具:
Time Profiler(获取代码运行时间,一般用来看CPU占用)
Core Animation (获取图形绘制情况,FPS,离屏渲染等)

首先xcode的调试页面的变化

Xcode 9.3之前 是在 instrument里面的 Core Animation 里面,
Xcode 9.3之后 直接放在了工具导航栏上面了

在这里插入图片描述

  1. Color Blended Layers- 检测图层混合

卡顿原因:大量的图层混合会消耗GPU的时间,因为对于一个像素点,GPU不能简单的使用最上层的视图的颜色,而是需要进行计算叠加。
调试指标:图层混合层会显示为红色,调优的方向是减少红色显示区域
调优方法:能不使用alpha就不要用,如果使用了alpha,那么注意背景颜色,合理使用backgroundColor和alpha可以避免混合图层的发生

具体控件会有区别,比如UILabel在不设置背景颜色的并且设置alpha属性,就会出现混合图层。

  1. Color Offscreen-Rendered Yellow- 检测图片离屏渲染

On-Screen Rendering 意为当前屏幕渲染,指的是GPU的渲染操作是在当前用于显示的屏幕缓冲区中进行。

Off-Screen Rendering 意为离屏渲染,指的是GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作。
卡顿原因:离屏渲染会单独在内存中创建一个屏幕外缓冲区并进行渲染,然后在过渡到当前屏幕缓冲区,这样的上下文切换是很耗性能的,把一个像素的定点,纹理等数据从一个区域转移到另一个区域,像素过多就会发生性能问题。
调试指标:屏幕渲染的部分会被高亮成黄色,调优的方向是减少黄色显示区域
调优方法: 合理使用shouldRasterize(光栅化)masks(遮罩)shadows(阴影)

shouldRasterize = YES;
在其他属性触发离屏渲染的同时,会将光栅化后的内容缓存起来,如果对应的layer及其sublayers没有发生改变,在下一帧的时候可以直接复用。shouldRasterize = YES,这将隐式的创建一个位图,各种阴影遮罩等效

特别是当cell中有多个圆角处理时,shouldRasterize结合下面代码UI优化体验很好


 1. (UIImage*)image:(UIImage *)img addCornerWithRadius:(CGFloat)radius andSize:(CGSize)size{
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(radius, radius)];
    CGContextAddPath(ctx,path.CGPath);
    CGContextClip(ctx);
    [img drawInRect:rect];
    CGContextDrawPath(ctx, kCGPathFillStroke);
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

注意:Color Hits Green and Misses Red用来检测光栅化,如果命中缓存则显示为绿色,否则显示为红色,显然绿色越多越好,红色越少越好

  1. Color Misaligned Images- 检测图片压缩和对齐
    卡顿原因:显示视图的时候需要对没对齐的边缘进行额外混合计算,影响性能。出现像素不对齐的情况,会导致在GPU渲染时,对没对齐的边缘,需要进行插值计算,这个插值计算的过程会有性能损耗
    调试指标:是当图片的源像素与目标像素不对齐是会放一个洋红色的层在图片上。当图片的像素大小与控件的大小不一致而导致需要缩放时,图片会呈现黄色。
    调优方法:需要我们缩放图片到与UIImageView对应的尺寸,且缩放后的图片的scale和[UIScreen mainScreen].scale相等,再显示出来。

减少包的大小

  1. 舍弃架构armv7
    armv7用于支持4s和4,4s是2011年11月正式上线,虽然还有小部分人在使用,但是追求包体大小的完全可以舍弃了。
    Build Setting —>Vaild Architectrres 里面把armv7去掉

在这里插入图片描述

  1. 去除无用的三方库、代码、readme
    不用的页面和代码片段
  2. 图片处理
    图片是安装包里占用空间最大的东西,项目中占用了很大的体积。
    比较好用且实用的方法是先把图片压缩一遍,比如用 TinyPNG压缩

猜你喜欢

转载自blog.csdn.net/pk_sir/article/details/83151027