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

一个可用的案例

如今咱们已经对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 data
    NSMutableArray *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 cell
    UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];    //load image
    NSDictionary *item = self.items[indexPath.row];
    NSString *filePath = [[NSBundle mainBundle] pathForResource:item[@"image"] ofType:@"png"];    //set image and text
    cell.imageView.image = [UIImage imageWithContentsOfFile:filePath];
    cell.textLabel.text = item[@"name"];    //set image shadow
    cell.imageView.layer.shadowOffset = CGSizeMake(0, 5);
    cell.imageView.layer.shadowOpacity = 0.75;
    cell.clipsToBounds = YES;    //set text shadow
    cell.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 滑动帧率降到15FPS

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

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

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

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

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

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

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

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

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

图12.11 Color Offscreen–Rendered Yellow选项

全部的表格单元内容都在离屏绘制。这必定是由于咱们给图片和标签视图添加的阴影效果。在代码中禁用阴影，而后看下性能是否有提升（图12.12）。

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

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

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

清单12.2 使用shouldRasterize提升性能

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{    //dequeue cell
    UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"Cell"
                                                                 forIndexPath:indexPath];
    ...    //set text shadow
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.textLabel.layer.shadowOffset = CGSizeMake(0, 2);
    cell.textLabel.layer.shadowOpacity = 0.5;    //rasterize
    cell.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 Color Hits Green and Misses Red验证了缓存有效

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

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

总结

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