[iOS Animation]-CALayer 性能优化实例

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一个可用的案例

现在我们已经对Instruments中动画性能工具非常熟悉了，那么可以用它在现实中解决一些实际问题。

我们创建一个简单的显示模拟联系人姓名和头像列表的应用。注意即使把头像图片存在应用本地，为了使应用看起来更真实，我们分别实时加载图片，而不是用–imageNamed:预加载。同样添加一些图层阴影来使得列表显示得更真实。清单12.1展示了最初版本的实现。

清单12.1 使用假数据的一个简单联系人列表

复制代码

#import "ViewController.h"#import <QuartzCore/QuartzCore.h>@interface ViewController () <UITableViewDataSource>@property (nonatomic, strong) NSArray *items;
@property (nonatomic, weak) IBOutlet UITableView *tableView;@end@implementation ViewController- (NSString *)randomName
{NSArray *first = @[@"Alice", @"Bob", @"Bill", @"Charles", @"Dan", @"Dave", @"Ethan", @"Frank"];NSArray *last = @[@"Appleseed", @"Bandicoot", @"Caravan", @"Dabble", @"Ernest", @"Fortune"];NSUInteger index1 = (rand()/(double)INT_MAX) * [first count];NSUInteger index2 = (rand()/(double)INT_MAX) * [last count];    return [NSString stringWithFormat:@"%@ %@", first[index1], last[index2]];
}- (NSString *)randomAvatar
{NSArray *images = @[@"Snowman", @"Igloo", @"Cone", @"Spaceship", @"Anchor", @"Key"];NSUInteger index = (rand()/(double)INT_MAX) * [images count];    return images[index];
}- (void)viewDidLoad
{[super viewDidLoad];    //set up dataNSMutableArray *array = [NSMutableArray array];    for (int i = 0; i < 1000; i++) {//add name[array addObject:@{@"name": [self randomName], @"image": [self randomAvatar]}];}self.items = array;    //register cell class[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"Cell"];
}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{    return [self.items count];
}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{    //dequeue cellUITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];    //load imageNSDictionary *item = self.items[indexPath.row];NSString *filePath = [[NSBundle mainBundle] pathForResource:item[@"image"] ofType:@"png"];    //set image and textcell.imageView.image = [UIImage imageWithContentsOfFile:filePath];cell.textLabel.text = item[@"name"];    //set image shadowcell.imageView.layer.shadowOffset = CGSizeMake(0, 5);cell.imageView.layer.shadowOpacity = 0.75;cell.clipsToBounds = YES;    //set text shadowcell.textLabel.backgroundColor = [UIColor clearColor];cell.textLabel.layer.shadowOffset = CGSizeMake(0, 2);cell.textLabel.layer.shadowOpacity = 0.5;    return cell;
}@end

复制代码

 

当快速滑动的时候就会非常卡（见图12.7的FPS计数器）。

图12.7

图12.7 滑动帧率降到15FPS

仅凭直觉，我们猜测性能瓶颈应该在图片加载。我们实时从闪存加载图片，而且没有缓存，所以很可能是这个原因。我们可以用一些很赞的代码修复，然后使用GCD异步加载图片，然后缓存。。。等一下，在开始编码之前，测试一下假设是否成立。首先用我们的三个Instruments工具分析一下程序来定位问题。我们推测问题可能和图片加载相关，所以用Time Profiler工具来试试（图12.8）。

图12.8

图12.8 用The timing profile分析联系人列表

 -tableView:cellForRowAtIndexPath: 中的CPU时间总利用率只有~28%（也就是加载头像图片的地方），非常低。于是建议是CPU/IO并不是真正的限制因素。然后看看是不是GPU的问题：在OpenGL ES Driver工具中检测GPU利用率（图12.9）。

图12.9

图12.9 OpenGL ES Driver工具显示的GPU利用率

渲染服务利用率的值达到51%和63%。看起来GPU需要做很多工作来渲染联系人列表。

为什么GPU利用率这么高呢？我们来用Core Animation调试工具选项来检查屏幕。首先打开Color Blended Layers（图12.10）。

图12.10

图12.10 使用Color Blended Layers选项调试程序

屏幕中所有红色的部分都意味着字符标签视图的高级别混合，这很正常，因为我们把背景设置成了透明色来显示阴影效果。这就解释了为什么渲染利用率这么高了。

那么离屏绘制呢？打开Core Animation工具的Color Offscreen - Rendered Yellow选项（图12.11）。

图12.11

图12.11 Color Offscreen–Rendered Yellow选项

所有的表格单元内容都在离屏绘制。这一定是因为我们给图片和标签视图添加的阴影效果。在代码中禁用阴影，然后看下性能是否有提高（图12.12）。

图12.12

图12.12 禁用阴影之后运行程序接近60FPS

问题解决了。干掉阴影之后，滑动很流畅。但是我们的联系人列表看起来没有之前好了。那如何保持阴影效果而且不会影响性能呢？

好吧，每一行的字符和头像在每一帧刷新的时候并不需要变，所以看起来UITableViewCell的图层非常适合做缓存。我们可以使用shouldRasterize来缓存图层内容。这将会让图层离屏之后渲染一次然后把结果保存起来，直到下次利用的时候去更新（见清单12.2）。

清单12.2 使用shouldRasterize提高性能

复制代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{    //dequeue cellUITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"Cell"forIndexPath:indexPath];...    //set text shadowcell.textLabel.backgroundColor = [UIColor clearColor];cell.textLabel.layer.shadowOffset = CGSizeMake(0, 2);cell.textLabel.layer.shadowOpacity = 0.5;    //rasterizecell.layer.shouldRasterize = YES;cell.layer.rasterizationScale = [UIScreen mainScreen].scale;    return cell;
}

复制代码

 

我们仍然离屏绘制图层内容，但是由于显式地禁用了栅格化，Core Animation就对绘图缓存了结果，于是对提高了性能。我们可以验证缓存是否有效，在Core Animation工具中点击Color Hits Green and Misses Red选项（图12.13）。

图12.13

图12.13 Color Hits Green and Misses Red验证了缓存有效

结果和预期一致 - 大部分都是绿色，只有当滑动到屏幕上的时候会闪烁成红色。因此，现在帧率更加平滑了。

所以我们最初的设想是错的。图片的加载并不是真正的瓶颈所在，而且试图把它置于一个复杂的多线程加载和缓存的实现都将是徒劳。所以在动手修复之前验证问题所在是个很好的习惯！

总结

在这章中，我们学习了Core Animation是如何渲染，以及我们可能出现的瓶颈所在。你同样学习了如何使用Instruments来检测和修复性能问题。


转载于:https://my.oschina.net/u/2438875/blog/508123

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/399636.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【More Effective C++】Item 6

【More Effective C++】Item 6

Item 6&#xff1a;区别Increment和Decrement操作符的前置&#xff08;prefix&#xff09;和后置&#xff08;postfix&#xff09;形式　　前置和后置的区别主要在于函数参数不一样&#xff0c;后置形式中多了一个int型的参数&#xff0c;在后置形式被调用时&#xff0c;编译器…
阅读更多...
WordPress 多语言支持（本地化）

WordPress 多语言支持（本地化）

https://www.cnblogs.com/ryanzheng/p/8309261.html WordPress 多语言支持&#xff08;本地化&#xff09; 本博客将介绍WordPress的多语言制作 首先需要在wp-content目录下创建一个languages文件夹&#xff0c;用于存放语言包文件。 然后在模板目录下的functions.php&…
阅读更多...
timestamp与timedelta，管理信息系统概念与基础

timestamp与timedelta，管理信息系统概念与基础

将字符串‘2017年10月9日星期一9时10分0秒 UTC8:00’转换为timestamp。100天前是几号?今年还有多少天&#xff1f;管理有不同层次所需信息各有什么特点?管理信息系统从层次上可分为哪几类&#xff1f;数据处理经历了哪些阶段&#xff1f;各有什么特点&#xff1f;什么是web&a…
阅读更多...
ZooKeeper1 利用虚拟机搭建自己的ZooKeeper集群

ZooKeeper1 利用虚拟机搭建自己的ZooKeeper集群

前言: 前段时间自己参考网上的文章&#xff0c;梳理了一下基于分布式环境部署的业务系统在解决数据一致性问题上的方案&#xff0c;其中有一个方案是使用ZooKeeper&#xff0c;加之在大数据处理中&#xff0c;ZooKeeper确实起到协调服务的作用&#xff0c;所以利用周末休息时间…
阅读更多...
公共的Controler,是给非授权的用户访问

公共的Controler,是给非授权的用户访问

issue: 我使用的环境是Vs2012 , 创建了MVC4的工程&#xff0c;然后在工程里面Webconfig, 添加了访问限制 <authentication mode"Forms"> <forms loginUrl"~/Account/Login" timeout"2880" /> </authentication> <…
阅读更多...
替换更改登陆页面logo与链接

替换更改登陆页面logo与链接

//替换更改登陆页面logo与链接 function custom_loginlogo() {echo<style type"text/css"> h1 a {background-image: url(.get_bloginfo(template_directory)./logo.png) !important; } </style>;}add_action(login_head, custom_loginlogo); 注: 在主题…
阅读更多...
es6关于let和const的总结

es6关于let和const的总结

set用于声明变量 1.var 的一个升级版 2.不存在变量提升 console.log(a);//Uncaught ReferenceError: a is not definedlet a1;console.log(a);//1 console.log(a);//undefinedvar a1;console.log(a);//1 3.会形成暂时性死区&#xff08;处于同一个块级作用域里的同名变量在let声…
阅读更多...
解决SublimeCodeIntel回车换行误打代码

解决SublimeCodeIntel回车换行误打代码

SublimeCodeIntel会自动匹配并联想词汇, 这在换行的时候非常麻烦, 每次点Enter 都会误打出代码, 解决办法分两步:第一步是在Perferences/setting User 中加入 "auto_complete_commit_on_tab": true, 然后看Perferences/KeyBindings Default中 { "keys": [&…
阅读更多...
【转】测试过程管理案例6---如何做项目的测试经理？

【转】测试过程管理案例6---如何做项目的测试经理？

帖子地址&#xff1a; http://bbs.testage.net/viewthread.php?tid4588&pid184557&page1&extrapage%3D1#pid184557 案例描述&#xff1a; 简单叙述一下我遇到的问题吧&#xff1a; 公司其它部门有个项目&#xff0c;需要做很严格的测试&#xff0c;请求我们部门支…
阅读更多...
Mysql 根据一个表数据更新另外一个表

Mysql 根据一个表数据更新另外一个表

https://www.cnblogs.com/wu628/p/4948833.html Mysql 根据一个表数据更新另外一个表 update 更新表 set 字段 (select 参考数据 from 参考表 where 参考表.id 更新表.id); update table_2 m set m.column (select column from table_1 mp where mp.id m.id); 方法二&a…
阅读更多...
Html5响应式设计与实现广场

Html5响应式设计与实现广场

由于提出的想法响应式设计&#xff0c;越来越多的网站使用这样的思想。各类大型网站如雨后春笋般涌了出来。例如&#xff1a;小米商城。天猫等。 至于响应式设计的概念等大家能够去百度百度&#xff0c;我这里就不相信解说了。直接为大家带来源代码。用Html5实现响应式的九宫格…
阅读更多...
工作问题日志

工作问题日志

1. 获取用户请求的路径&#xff1a;HttpServletRequest request (HttpServletRequest) req;String servletPath request.getServletPath(); 2. 相对通用的读文件流的方法&#xff08;Windows 和 Linux上都可以用&#xff09;&#xff1a;拿到流&#xff0c;然后再去读流中的内…
阅读更多...
wordpress 每段首行空两格

wordpress 每段首行空两格

p {text-indent:2.1em;} 注&#xff1a; 在文章页&#xff0c;添加样式即可。
阅读更多...
Java简单计算器

Java简单计算器

Java简单计算器转载于:https://www.cnblogs.com/wangprince2017/p/7654542.html
阅读更多...
【j360-boot】Spring-boot系列三（崩溃模式，不是你崩就是电脑崩）

【j360-boot】Spring-boot系列三（崩溃模式，不是你崩就是电脑崩）

2019独角兽企业重金招聘Python工程师标准>>> j360-boot spring-boot入门工程之j360-boot&#xff1a;&#xff08;欢迎star、fork&#xff09; https://github.com/xuminwlt/j360-boot spring-boot官方地址 http://projects.spring.io/spring-boot/ 【j360-boot】Sp…
阅读更多...
layui-弹出层中如何关闭窗口

layui-弹出层中如何关闭窗口

https://blog.csdn.net/laiyuan999/article/details/80341756 var index layer.open(); layer.close(index); //此时你只需要把获得的index&#xff0c;轻轻地赋予layer.close即可
阅读更多...
C++Objective-c

C++Objective-c

1.两种语言的指针和引用 C中引用和指针是两个不同的概念 Objective底层是用C实现的,其对象访问机制是C中的指针访问对象,所以如果直接访问Objective-C中的变量是需要用对象名->变量名 如果在OC中定义了property a这里生成的知识get和set方法,外界并不能直接访问a,因为a默认是…
阅读更多...
裸眼3D全攻略3：拍摄3D—瞳距、镜距、视角偏转与空间感

裸眼3D全攻略3：拍摄3D—瞳距、镜距、视角偏转与空间感

http://sd89.blog.163.com/blog/static/356041322014112532958728/ 3D图片的拍摄&#xff0c;与平面有着全新的不同要求&#xff0c;那就是空间感的表现。 简单来说&#xff0c;空间感是由两条视线分别从左右不同的视角&#xff0c;各自获取物体左右两面的不同信息交汇而产生的…
阅读更多...
【教学类-42-02】20231224 X-Y 之间加法题判断题2.0（按2:8比例抽取正确题和错误题）

【教学类-42-02】20231224 X-Y 之间加法题判断题2.0（按2:8比例抽取正确题和错误题）

作品展示&#xff1a; 0-5&#xff1a; 21题&#xff0c;正确21题&#xff0c;错误21题42题 。小于44格子&#xff0c;都写上&#xff0c;哪怕输入2:8&#xff0c;实际也是5:5 0-10 66题&#xff0c;正确66题&#xff0c;错误66题132题 大于44格子&#xff0c;正确66题抽取44*…
阅读更多...
(原)用pixi.js 实现 方块阵点击后原地自转效果

(原)用pixi.js 实现 方块阵点击后原地自转效果

源码 各位&#xff0c;请教一个问题&#xff0c;我这个还有BUG&#xff0c;我是想实现&#xff0c;点击一下可以 停止转动&#xff0c;然后再点一下重新转动。而不是一直加速&#xff0c;有没有什么好办法&#xff1f; PS:问题已经解决&#xff0c;谢谢评论的大神Antineutrino …
阅读更多...
最新文章

Copyright @ 2022~2023