检测app性能并实现优化-图形性能篇

很多尚未成熟的App都会存在很多问题,如卡顿、耗电、内存管理等等,包括我们项目App。今天有空闲时间,就决定对部分性能进行优化,当然工具主要就是用Xcode自带的Core Animation了。话不多说,开干。

Core Animation启动运行

  • 打开Xcode对当前项目Profile,点击Product再点击Profile

  • 这时就会打开 Profiling Template 选项对话框:

coreanimation.png
  • 选择Core Animation即可

  • 点击红色运行按钮启动App,随后操作App就能看到FPS和CPU等性能信息了

但是你看到这些信息了,发现了问题,该如何优化呢,下面就用Core Animation来一个个优化

在右下角面板的 Display Settings 区域,我们可以看到多个 Debug Options

coreDebug.png

接下来一个一个看。

Color Blended Layers

这个选项选项基于渲染程度对屏幕中的混合区域进行绿到红的高亮显示,越红表示性能越差,会对帧率等指标造成较大的影响。红色通常是由于多个半透明图层叠加引,而且无用的图层叠加越多,颜色越红。所以对这个做性能优化就是尽量保证图层叠加少,并尽量减少对透明度的使用。下面就是优化后的App界面与微信朋友圈的对比,可以看出这个性能比微信还更胜一筹。

IMG_3710.PNG

IMG_3709.PNG

Color Hits Green and Misses Red
当 UIView.layer.shouldRasterize = YES 时,耗时的图片绘制会被缓存,并当做一个简单的扁平图片来呈现。这时候,如果页面的其他区块(比如 UITableViewCell 的复用)使用缓存直接命中,就显示绿色,反之,如果不命中,这时就显示红色。红色越多,性能越差。因为栅格化生成缓存的过程是有开销的,如果缓存能被大量命中和有效使用,则总体上会降低开销,反之则意味着要频繁生成新的缓存,这会让性能问题雪上加霜。
所以这里的这个缓存就需要慎重使用,而我们App包括微信QQ支付宝等我看也基本没有使用这个方式。而我们App的statusBar会经常闪红色,这是因为我使用了一个CPU和FPS的实时查看工具,需要经常刷新显示,所以就没啥解决的。

IMG_3713.PNG

Color Copied Images

对于 GPU 不支持的色彩格式的图片只能由 CPU 来处理,把这样的图片标为蓝色。蓝色越多,性能越差。因为,我们不希望在滚动视图的时候,由 CPU 来处理图片,这样可能会对主线程造成阻塞。看了App好几个页面,发现根本不会出现这里所说的蓝色,但我查看支付宝QQ就发现了几个蓝色的地方,不知道是他们有特殊的考虑还是没发现这问题,但问题也特少,影响不大。图就不上了

Color Non-Standard Surface Formats

这个性能发现基本上没有资料能查到,打开这个性能检测后,发现App上很多浅灰色色块,并且有个规律,它们都是没有设置背景色的区域,后来自己设置了背景色就没有色块了,但我不知道是前者还是后者性能好,希望知道的人解答一下。但我发现QQ支付宝这些大型的App也没有对这些做处理,而且发现苹果原生界面也有很多这种灰色色块,所以我也没有对当前App的这些问题做处理,上一组图看看效果。

IMG_3715.PNG

IMG_3714.PNG

Color Immediately

通常 Core Animation Instruments 以每毫秒 10 次的频率更新图层调试颜色。对某些效果来说,这显然太慢了。这个选项就可以用来设置每帧都更新(可能会影响到渲染性能,而且会导致帧率测量不准,所以不要一直都设置它)。这是一个辅助调试工具,本身是没有啥效果的,需要联合其他调试类别。

Color Misaligned Images

这个选项检查了图片是否被缩放,以及像素是否对齐。被放缩的图片会被标记为黄色,像素不对齐则会标注为紫色。黄色、紫色越多,性能越差。主要是将控件按照图片大小来设定大小,如点赞、评论、分割线和聊天按钮,还有就是头像图片在下载的时候就从cdn下载自己需要的大小,这样图片的黄色缩放问题就没了;再就是控件的宽高最好是整数,因为苹果的屏幕最小单位是1像素,如果有小数了,设备显示就会多次再计算,再选择一个整数像素来显示。而单张大图由于需求原因,暂时没有做处理。下面就是前后对比图:

IMG_3722.PNG

IMG_3723.PNG

Color Offscreen-Rendered Yellow

这个选项会把那些离屏渲染的图层显示为黄色。黄色越多,性能越差。这些显示为黄色的图层很可能需要用 shadowPath 或者 shouldRasterize 来优化。这里只需要少使用图层的clipsToBounds和layer层的masksToBounds方法即可。

color compositing fast-path blue

官方说明:“Places a blue overlay over content that is detached from the compositor.”标记由硬件绘制的路径为蓝色,蓝色越多越好,可以对直接使用OpenGL绘制的图层进行高亮。对OpenGL没什么研究,所以这里没办法给出方法,大家只需要记住蓝色越多越好就ok。

Flash Updated Regions

这个选项会把重绘的内容显示为黄色。不该出现的黄色越多,性能越差。通常我们希望只是更新的部分被标记完黄色。当你滑动app视图的时候屏幕就是黄色的,建议大家少用这个调试,因为——>闪得眼睛疼!

我们也可以使用OpenGL ES Analysis来监测图形的相关性能。谢谢支持!

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

推荐阅读更多精彩内容