[ WWDC2018 ] - 高性能 AutoLayout High Performance Auto Layout

UICollectionView性能对比,item自动适配大小,iOS 11看上去有掉帧卡顿的现象,iOS 12表现完美,没有掉帧。
WX20180612-104339.png

下面是iOS 11和iOS 12的性能对比,灰色条是iOS 11的耗时,蓝色条是iOS 12的耗时。在iOS 12上会很大程度改善你的应用程序。

WX20180619-160559.png

实现和感观

render loop

render loop 是一个每秒钟跑120次的一个进程,是为了确保所有的内容都能为每一个frame做好准备。lender loop 一共包括三个步骤来更新约束,布局和渲染。

  • 首先,每一个需要接收到更新约束的view会从子view向上传递,直到window
  • 然后,每一个接收到的view开始layoutsubviews,和更新约束是从相反的方向开始,layout从window开始到每一个子view进行layout。
  • 最后,每一个需要渲染的view,和layout相同,从父view向子view开始渲染。

WX20180619-160634.png

render loop目的是为了避免重复的工作。
举一个例子:一个UILable 需要一个约束来描述它的大小,但是有很多属性会影响他的大小,设置它的font,text size等等都会受到影响。当一个属性改变的时候,可能text其他属性也会被重新赋值 ,很有可能调用一堆属性的setter方法,这样效率会很低。 只需要调用updateConstraints 并指定好要更新的属性,render loop会帮助你计算好它的frame并完成渲染,从而避免多次设置的重复工作。 WX20180619-160709.png

在设置约束的一些不好的写法,每次开始的时候调用deactivate,设置结束之后调用activate。相当于layoutsubviews,每次调用layoutsubviews你销毁你subviews,重新创建在重新添加。这样性能不会很好。

// Don’t do this! Removes and re-adds constraints potentially at 120 frames per second
    override func updateConstraints() {
        NSLayoutConstraint.deactivate(myConstraints)
        myConstraints.removeAll()
        let views = ["text1":text1, "text2":text2]
        myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]",
                                                        options: [.alignAllFirstBaseline],
                                                        myConstraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|",
                                                                                                        metrics: nil, views: views)
            options: [],
            metrics: nil, views: views)
        NSLayoutConstraint.activate(myConstraints)
        super.updateConstraints()
    }

每次都是移除并重新添加,相当于这样的代码

    // Don’t do this! Removes and re-adds constraints potentially at 120 frames per second
    override func layoutSubviews() {
        text1.removeFromSuperview()
        text1 = nil
        text1 = UILabel(frame: CGRect(x: 20, y: 20, width: 300, height: 30))
        self.addSubview(text1)

        text2.removeFromSuperview()
        text2 = nil
        text2 = UILabel(frame: CGRect(x: 340, y: 20, width: 300, height: 30))
        self.addSubview(text2)
        super.layoutSubviews()
    }

官方建议写法为,约束只需要添加一次,每次调用super.updateConstraints完成约束的更新。

    // This is ok! Doesn’t do anything unless self.myConstraints has been nil’d out
    override func updateConstraints() {
        if self.myConstraints == nil {
            var constraints = [NSLayoutConstraint]()
            let views = ["text1":text1, "text2":text2]
            constraints += NSLayoutConstraint.constraints(withVisualFormat: "H:|-[text1]-[text2]",
                                                          options: [.alignAllFirstBaseline],
                                                          metrics: nil,
                                                          views: views)
            constraints += NSLayoutConstraint.constraints(withVisualFormat: "V:|-[text1]-|",
                                                          options: [],
                                                          metrics: nil,
                                                          views: views)
        }
        NSLayoutConstraint.activate(constraints)
        self.myConstraints = constraints
        super.updateConstraints()
    }

render loop有很强的特定性,它的好处可以避免一些重复性的工作。但是它也很危险,因为它调用的频率会很高,是非常敏感的一段代码。

苹果建议使用interface builder进行布局。 WX20180619-160810.png

激活一个约束

在设置约束的时候发生了什么事情呢?从下面的图中可以看到整体的一个结构。 有一个view 在window上,window上面有个叫做engine的内部对象,engine是autolayout计算的核心,当添加一个约束的时候,会创建一个Equation对象,然后会把equation对象添加到engine上,equation依据variables对象。 WX20180619-160848.png

variables相当于每一个约束的值,比如说一个UIlabel有四个约束minX minY width height那么minX minY width height 就是variables。
WX20180619-160919.png

以下面这个图为例,这里只关注水平方向的布局,首先要创建equation,然后每一个equation会添加给engine。 WX20180619-161418.png

engine会去计算这些variables,engine会把每一个view的variables用数学公式计算出一个定量。
WX20180619-161501.png

计算出定量之后,engine会发送通知,通知view调用他父view的setNeedsLayout()方法,就会完成render loop的第一步更新约束,然后继续render loop的 layout更新,最后view会直接拷贝engine计算好的定量进行赋值渲染。 WX20180619-161533.png

engine是一个layout的缓存,和依赖的追踪器。非常有方向性的,它知道哪些约束会影响哪些view,当你改变一些约束时,它能够准确的更新。

不需要的约束不要加

你也可以穿过层级,为两个没有相同父view的view设置约束,但是这样性能会很差。 大多数情况下,view的约束应该加在他的父view或者兄弟view上。 WX20180619-161603.png

最小限度的错误

当view向engine获取约束的值的时候,engine会确保错误率最小 WX20180619-161637.png

构建高性能layout

创建一个layout

构建一个社交软件的cell,通过autolayout进行布局。 WX20180619-161704.png

查找代码中的问题

下面是beta版的一个调试工具,最上面第一项表示你CPU的使用情况,峰值的地方可能需要关注一下你的layout是否有性能问题,下面一行追踪你的约束,高的地方说明是有问题的。
第二项是你对约束添加、删除、修改等操作的记录。
第三项是当前控件的大小。

WX20180619-161733.png

点击约束峰值的地方可以看详情。

创建高性能的布局

通过instrument调试工具,可以看出一些布局上的耗时问题。一下是需要注意的几点:

  • 避免删除所有的约束的情况
  • 对于静态约束,只需要添加一次
  • 只改变需要改变的约束
  • 尽量用hide() 方法隐藏view,而不是remove然后在add

有些控件比较特殊,比如 UIImageView,它的大小是根据他的image计算确定他的content size。UILabel是根据他的text确定的。这些都会返回它们的固有尺寸,UIView 会直接通过他们的固有尺寸来当做约束条件。

重写 intrinsicContentSize

text的计算是成本很高的,所以UIlabel的size通过text去控制计算开销成本会很高。这个时候我们可以 通过重写 UILabel 的 intrinsicContentSize 来直接控制它的固有尺寸。如果已知一个UILabel的展示size,直接重写其属性,其他情况使用UIView.noIntrinsicMetric。

override var intrinsicContentSize: CGSize {  
    return CGSize(width: UIView.noIntrinsicMetric, height: UIView.noIntrinsicMetric)
}

参考:WWDC2018《High Performance Auto Layout》

本文总阅读量