[ WWDC2018 ] - 高性能 AutoLayout Hi

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》