Instruments 之 CoreAnimation

在 iOS APP 的性能优化中，屏幕渲染也是一个不得不提的话题，比如控件的背景会触发 alpha blending，对控件的 mask, shadow, group opacity, edge antialiasing 操作会触发 offscreen render。在性能优化过程中，我们不太可能去把每一个对应的功能模块代码都通读一遍，直接从代码层面发现问题。一个是项目周期不允许，第二个是代码太复杂或者说代码量太大。通常在界面的性能优化中，都会借助或者使用到 Instruments 的 CoreAnimation 模板，CoreAnimation 模板可以帮助我们快速的发现 alpha blending 和 offscreen render 问题。

案例

CoreAnimation 的使用讲解以 raywenderlich 的 Catstagram APP 作为分析案例。该案例是一个带有图片的列表。

案例图片

值的注意的是在我的开发环境下 CoreAnimation 需要运行在真机设备上，我的开发环境是 Xcode 8.3.2 , iPhone 6 (10.3.1)。

检测 alpha blending

alpha blending 的问题通常是控件的背景颜色 clear color 造成的。 创建一个控件的时候若是没有设置背景颜色，那么系统会默认给这个控件一个透明颜色，这个颜色叫做 clear color 。
打开 Catstagram 项目， Command + I 打开 Instruments 选择 CoreAnimation 模板

选择 CoreAnimation 模板

点击 Debug Options 勾选 Color Blended Layers

Color Blended Layers

点击开始按钮开始录制 APP 运行情况

录制APP

查看手机上的 APP 运行屏幕，若是控件有出现红色的背景则说明该控件存在 alpha blending 问题

手机屏幕

打开工程,查找CatPhotoTableViewCell.swift 文件，找到对应的控件创建代码

 override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
      // 省略代码        
        userNameLabel                   = UILabel()
        photoTimeIntervalSincePostLabel = UILabel()
        photoLikesLabel                 = UILabel()
        photoDescriptionLabel           = UILabel()
       // 省略代码        
    }

从控件的创建代码中确实没有看到设置控件背景颜色的代码，那么我们这里给这些控件设置成白色背景，在实际开发过程中，该控件的背景颜色可以参考设计人员的 UI 稿。

 override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
      // 省略代码        
        userNameLabel                   = UILabel()
        photoTimeIntervalSincePostLabel = UILabel()
        photoLikesLabel                 = UILabel()
        photoDescriptionLabel           = UILabel()

        userNameLabel.backgroundColor = .white
        photoTimeIntervalSincePostLabel.backgroundColor = .white
        photoLikesLabel.backgroundColor = .white
        photoDescriptionLabel.backgroundColor = .white
       // 省略代码        
    }

值得注意的是，若是控件的内容是中文内容，那么还需要设置clayer.masksToBounds = true

运行修改后代码，验证修改结果，从 APP 运行截图中可以明显的看到，原来红色背景控件的背景都变了，变成了绿色，说明我们的修改是正确了，而且生效了。

alpha blending验证结果

检测 offscreen render

打开 Catstagram 项目， Command + I 打开 Instruments 选择 CoreAnimation 模板，点击 Debug Options 勾选 Color Offscreen-Rendered Yellow

检测 offscreen render

点击开始按钮开始录制 APP 运行情况

APP 运行情况

查看手机上的 APP 运行屏幕，若是控件有出现黄色的背景则说明该控件存在 offscreen render 问题。

offscreen render 问题

从手机屏幕截图中我们可以看到，存在阴影的控件和圆角图片都有 offscreen render 问题。那么知道问题所在接下来就是修改代码了。打开工程,查找CatPhotoTableViewCell.swift 文件，找到对应的控件控件阴影添加部分代码。

    func addShadows() {
        isOpaque = false
        alpha = 0.1

        for view in [photoDescriptionLabel, userNameLabel] {
            view.layer.shadowColor = UIColor.lightGray.cgColor
            view.layer.shadowOffset = CGSize(width: 0.0, height: 5.0)
            view.layer.shadowOpacity = 1.0
            view.layer.shadowRadius = 5.0
        }
    }

我们在开头的地方说过，对控件的 mask, shadow, group opacity, edge antialiasing 操作会触发 offscreen render。所以修改一下实现方式

    func addShadows() {
        for view in [photoDescriptionLabel, userNameLabel] {
            let shadow = NSShadow()
            shadow.shadowColor = UIColor.lightGray
            shadow.shadowOffset = CGSize(width: 0.0, height: 5.0)
            shadow.shadowBlurRadius = 5.0
            
            if let mutableAttributedString = view.attributedText as? NSMutableAttributedString {
                let range = NSRange(location: 0, length: mutableAttributedString.string.characters.count)
                
                mutableAttributedString.addAttribute(NSShadowAttributeName, value: shadow, range: range)
            }
          
        }
    }

运行修改后代码，验证修改结果，从 APP 运行截图中可以明显的看到，原来存在阴影的控件不再显示黄色背景了，说明我们的代码修改是正确的。圆角图片的 offscreen render 问题修改可以查看参考链接里面的 Demo 项目里面的做法，这里就不再累赘了。

验证修改结果

总结

在 APP 的 UI 开发中一不小心就会造成这种 alpha blending 和 offscreen render 的问题。出现问题不可怕，作为工程师，工作的主要任务就是解决各种问题，然后思考，再总结。

APP 的 UI 优化一般步骤
1、Instruments 的 CoreAnimation 模板定位问题
2、解决问题
3、Instruments 的 CoreAnimation 模板验证修改结果
4、若是验证不通过，重复 1 - 3 步骤。若是验证通过则结束。

参考

本文是 raywenderlich 的课程笔记，内容参考 Practical Instruments 课程
1、demo https://files.betamax.raywenderlich.com/attachments/videos/788/16f8494e-fb8c-440c-a3d1-102e61053e37.zip
2、https://videos.raywenderlich.com/courses/74-practical-instruments/lessons/6
3、离屏渲染 http://www.jianshu.com/p/ca51c9d3575b