iOS性能优化（中级）

2018-08-06 本文已影响259人王大妈啊

欲知前事如何，且看上回分解： iOS性能优化（初级）

小试牛刀

通过对性能初级优化秘籍一段时间的练习，少侠应该对性能优化有了一定的了解，在日常开发编码中有了些性能优化的意识，当产品小师妹提出一个新的交互的时候，想必也定难不倒少侠了。

就列表来说，icon、大标题、小标题、内容，一般APP的很多时候就是这几个元素，排版不同，细致效果不同。这些对于少侠来说都已经不是问题了，无声无息中APP已经如丝般顺滑。看着产品小师妹那敬仰的眼神，牛心潮澎湃，花前月下，海誓山盟马上就要脱口而出。

折戟沉沙

但，江湖风云变幻，折戟沉沙你早有准备。

只是没想到那一天来的这么快。

那一天产品小师妹提出了一个新的需求，除了之前的icon、大标题、小标题之外，现在要加上标签，标签有多个用于各种活动运营，标签的位置要根据标题内容的位置来定，标签要做成圆角加边框，同时列表每一行的高度要根据各项内容来最终确定，内容多就高，内容少就矮，还有icon要圆形加边框顺便带点阴影，巴拉巴拉巴拉巴拉巴拉巴拉。
产品小师妹一口气说了很多，说的你眼冒金星，气息紊乱，差点走火入魔，口吐鲜血，但看着小师妹那一如既往的欣喜加期待的眼神，只好暗暗运力，稳住阵脚，一口答应小师妹的需求。
伊人远去，看着小师妹远去的身影，你疯狂编码，但总有那么一个点无法突破，流畅性始终无法达到要求，不禁陷入了沉思。

卧薪尝胆

初级性能优化秘籍，只能应对初级的性能优化问题。但当前的需求，效果多，子视图多，排版更新频繁，高度每行不一样。初级秘籍已经不能很好的凑效，这可如何是好。

少侠莫慌，老夫看你已经熟练了初级性能优化秘籍，基础已经打牢，现在就将性能优化中级秘籍传授与你罢。

工欲善其事必先利其器，想要战胜对手，你要有趁手的兵器。

在APP里直接的观察看FPS数据：

KMCGeigerCounter
也可以根据 CADisplayLink 自己写一个简易好用的，CADisplayLink 是一个定时器，而且这个定时器的调用频率跟屏幕刷新频率相同。

顶级法宝，当属 Instrument：

若想熟练使用此项法宝，需注意两个地方

用release模式，贴近最真是的使用环境，才能获得最准确的数据。
用真机测试，模拟器再厉害也还是在模拟，祭出不同型号的真机，才能针对优化。

打开方式： Xcode -> Product -> Profile -> Core Animation 配合TimeProfile 一起使用
查看FPS的同时，还能查看到哪些操作比较耗时，有此傍身，再厉害的敌人也会露出破绽。

查看FPS

百步穿杨

性能优化的步骤：
修改 -> Instrument查看 -> 修改 -> Instrument查看 —> 修改.....
重复以上动作直到性能达到要求

CPU的耗时操作可以在Instrument里查看到，并定位修改优化，但GPU的优化要怎么进行呢？

XCode9之后可以Xcode -> Debug > View Debugging > Rendering 下看到优化的各个选项，模拟器时无法勾选，只有真机的情况下才能勾选。

查看优化选项

Color Blended Layers — 出现图层混合的地方会标注为红色，没有图层混合的地方会显示为绿色，方向是红色越少越好，绿色越多越好。

图层混合

Color Hits Green and Misses Red — 当使用光栅化渲染(shouldRasterize)的时候，如果图层是绿色，表示这些缓存被复用，如果图层是红色表示缓存没有被复用会重复创建，这时候会造成性能问题。

光栅化

Color Copied Images — 如果GPU不支持当前图片格式，那么图片会交给CPU进行预先处理，这张图片会显示为蓝色。
Color Misaligned Images — 检测图片是否被拉伸，当图片色实际大小跟ImageView的大小不相同时，就会发生，显示为黄色，这种操作会比较消耗CPU资源。
Color Offscreen-rendered Yellow — GPU的渲染有两种，On-screen Rendering当前屏幕渲染，是指GPU的渲染在当前屏幕的缓冲区内进行。off-screen Rendering是指在GPU的渲染发生在当前屏幕之外新开辟的缓冲区。开辟新的缓冲区，切换缓冲区等会对性能有较大的影响。

触发离屏渲染有以下几种行为：

cornerRadius以及masksToBounds同时使用时会触发离屏渲染，单独使用时不会触发。
设置shadow，而且shodowPath = nil时会触发。
mask 设置蒙版会触发。
layer.shouldRasterize的不适当使用会触发离屏渲染。
layer.allowsGroupOpacity iOS7以后默认开启；当layer.opacity != 1.0且有subLayer或者背景图时会触发。
layer.allowsEdgeAntialiasing 在iOS8以后的系统里可能已经做了优化，并不会触发离屏渲染，不会对性能造成影响。
重写了drawRect。

少侠熟读了以上招式，便能快速找出对手的破绽。

无坚不摧

找出了敌人的破绽，少侠还要制定详细的应对策略，瞅准时机，方能一招制敌。

老夫这就给你展示制敌之道：

Color Blended Layers：
- UIView的backgroundColor不要设置为clearColor，最好设置的和superView的backgroundColor颜色一样。
- 图片避免使用带alpha通道的图片，无论是本地图片还是后台返回图片。什么，设计妹子不同意，少侠这就要靠你的魅力啦。
Color Hits Green and Misses Red： 在初级性能优化中，适当使用shouldRasterize中有详细讲解。
Color Copied Images： 开发过程中注意图片格式
Color Misaligned Images： 尽量把图片大小设置的和UIImageView相同大小。
Color Offscreen-rendered Yellow： 这是性能优化的要点，针对引起离屏渲染的各种情况需要逐一应对

重点来了，离屏渲染的优化招式，少侠看仔细了

设置圆角cornerRadius：

UIView： 如果view.layer.contents 为空，直接通过设置view.layer.cornerRadius 以及 view.backgroundColor或者view.layer.border即可设置圆角，不需要设置masksToBounds为YES，此时不会产生离屏渲染。

//设置圆角边框
view.layer.cornerRadius = 3.0
view.layer.borderColor =  UIColor.red.cgColor
view.layer.borderWidth = 1.0
// 设置带背景
view.layer.cornerRadius = 3.0
view.backgroundColor = UIColor.green
//或者相同效果的
view.layer.backgroundColor = UIColor.green.cgColor

UILabel： 设置和UIView差不多，有一个区别就是设置label.backgroundColor和layer.cornerRadius不会起效果，需要设置label.layer.backgroundColor和layer.cornerRadius才会起效果。

//设置圆角边框
view.layer.cornerRadius = 3.0
view.layer.borderColor =  UIColor.red.cgColor
view.layer.borderWidth = 1.0

UITextField： 自带圆角效果，设置不同style即可达到效果。

UITextView： 和UIView的设置方法相同。

UIImageView： UIImageView的情况比较特殊，上面的几种方法不能实现圆角，必须要layer.cornerRadius和layer.masksToBounds = YES，才能实现圆角。但这个操作必定会产生离屏渲染，为了避免离屏渲染，常用的优化方法有：

重绘图片，生成一张带圆角的图片，然后设置到UIImageView上。

func redrawImage(originImage: UIImage, rectSize: CGSize, cornerRadius: CGFloat) -> UIImage? {
   UIGraphicsBeginImageContextWithOptions(rectSize, false, UIScreen.main.scale)
   if let context = UIGraphicsGetCurrentContext() {
         let rect = CGRect(origin: CGPoint.zero, size: rectSize)
         let path = UIBezierPath(roundedRect: rect, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
         context.addPath(path.cgPath)
         context.clip()
         originImage.draw(in: rect)
         context.drawPath(using: .fillStroke)
         let roundedImage = UIGraphicsGetImageFromCurrentImageContext()
         UIGraphicsEndImageContext()
         return roundedImage
        }
    return nil
 }
 
DispatchQueue.global(qos: .default).async {
         //在子线程调用redrawImage生成图片
         DispatchQueue.main.async {
             //在主线程设置图片
         }
     }

在UIImageView上遮盖一张部分透明的，部分遮挡的图片，盖在原来的UIImageView上，曲线实现图片圆角功能。

//生成中间透明 周围遮挡的图片
func getRundedCornerImage(radius: CGFloat, rectSize: CGSize, fillColor: UIColor) -> UIImage? {
  UIGraphicsBeginImageContextWithOptions(rectSize, false, UIScreen.main.scale)
  if let currentContext = UIGraphicsGetCurrentContext() {
    let rect = CGRect(origin: .zero, size: rectSize)
    let outerPath = UIBezierPath(rect: rect)
    let innerPath = UIBezierPath(roundedRect: rect,
                               byRoundingCorners: .allCorners,
                               cornerRadii: CGSize(width: radius, height: radius))
    currentContext.setBlendMode(.normal)
    fillColor.setFill()
    outerPath.fill()
  
    currentContext.setBlendMode(.normal)
    innerPath.fill()
    let roundedCornerImage = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
    return roundedCornerImage
    }
  return nil
}
  
//将生成的图片 加到需要圆角的图片的上方

设置阴影shadow：

设置shadowPath，可以解决离屏渲染问题。

 self.shadowView.layer.shadowColor = UIColor.gray.cgColor
 self.shadowView.layer.shadowOpacity = 0.2
 self.shadowView.layer.shadowRadius = 3.0
 self.shadowView.layer.shadowOffset = CGSize(width: 1, height: 1)
 self.shadowView.layer.shadowPath = UIBezierPath(rect: view.bounds).cgPath

当然和圆角的解决办法一样，可以使用一张带阴影的图来曲线解决问题。

func getRundedCornerShadowImage(originImage: UIImage, rectSize: CGSize, roundedRadius: CGFloat, shadowColor: UIColor, shadowOffset: CGSize, insetX: CGFloat, insetY: CGFloat) -> UIImage? {
 UIGraphicsBeginImageContextWithOptions(rectSize, false, UIScreen.main.scale)
 if let currentContext = UIGraphicsGetCurrentContext() {
     let rect = CGRect(origin: .zero, size: rectSize)
     let shadowPath = UIBezierPath(roundedRect: rect.insetBy(dx: insetX, dy: insetY),
                             byRoundingCorners: .allCorners,
                             cornerRadii: CGSize(width: roundedRadius, height: roundedRadius))
     currentContext.setShadow(offset: shadowOffset, blur: roundedRadius, color: shadowColor.cgColor)
     currentContext.addPath(shadowPath.cgPath)
     shadowPath.fill()

     let imagePath = UIBezierPath(roundedRect: rect.insetBy(dx: insetX, dy: insetY),
                                   byRoundingCorners: .allCorners,
                                   cornerRadii: CGSize(width: roundedRadius, height: roundedRadius))
     currentContext.addPath(imagePath.cgPath)
     currentContext.clip()
     originImage.draw(in: rect.insetBy(dx: insetX, dy: insetY))
     currentContext.strokePath()
     
     let image = UIGraphicsGetImageFromCurrentImageContext()
     UIGraphicsEndImageContext()
     return image
 }
 return nil
}

设置蒙版mask：

设置mask必定会触发离屏渲染。
mask的过程大致来看是和视图混合相反的过程，例如有一张图片，中间有一个圆形空间是透明的，边缘部分是白色，如果视图直接叠加在一张头像上，会呈现出圆形头型的效果，但如果使用mask则会显示出中间白边缘透明的效果。
所以性能敏感的界面中，可以不使用mask，而使用视图混合这种对性能影响更小的方式进行操作。

layer.allowsGroupOpacity、layer.allowsEdgeAntialiasing：

这两个操作对性能并不会造成比较大的影响。
drawRect：

drawRect会造成较大的内存消耗，并会造成离屏渲染，应尽量避免重写。

炉火纯青

以上招式，少侠可看好了，日后定当好好练习，获得伊人芳心指日可待。

快去找小师妹去罢。