본문 바로가기
WWDC

WWDC 18 - High Performance Auto Layout

by vapor3965 2021. 6. 23.

목차


    • 세션보면서 정리한 내용입니다. 해석이 잘못된 경우가 있을수있으니 발견하시면 댓글로 남겨주시면 감사하겠습니다🙏🏻

     

    https://developer.apple.com/videos/play/wwdc2018/220/

     

    High Performance Auto Layout - WWDC 2018 - Videos - Apple Developer

    Get a glimpse inside to find out what happens when you add a constraint! Dive into the internals of Auto Layout to develop intuition for...

    developer.apple.com

     

     

     



    관련내용

    • constraint를 추가할떄 어떤일이 발생하는지 살펴보자
    • 코드가 어떤영향을미칠지에 대한 감각을 얻기위해 auto layout의 내부를 살펴보자

    👍요약

    • 오토레이아웃은 Engine 을통하여 방정식을계산하고, 계산된값을통해 레이아웃을업데이트한다.
      • 👍Engine은 layout cache이며, dependency tracker이다.
    • 이러한과정이 Render loop안에속하며, Render Loop은 1초안에 150번이나발생한다.
    • 불필요한 deative, active하지말라, 그렇게되면 엔진에서계속계산하고, 없애고, 계산하고반복한다.
    • 👍그러므로, 유동적인 오토레이아웃을 원한다면, 정적인것과 동적인것을 최대한구분하여, 정적인것은 한번만 계산하고, 최소한의변경이 필요한것만 업데이트하도록한다.
    • removeFromSuperView보다 hide가훨씬 싼비용이다.
    • intrinsic content size는 내부요인을 계산하여 intrinsic content size를 계산하므로, intrinsic content size가 필요하지않는경우에는 overriden 하여 성능을 향상할수있다.
    • 👍system layout fitting size 는 autolayout 계산결과가 끝난후의 frame을 반환하는데, 이는 engine만들고, constriant계산하고, Engine삭제하는 사이클로형성되는데, 자주호출하면 이러한것이 자주발생하므로 주의해야한다.

     

     


    아래코드는 updateContraints를 override하고,
    constraints들을 deactivate 하고, 다지우고,
    새로운 constraint를 추가하고, activate했다.
    그리고 부모클래스의 updateConstraints()를 호출했다.

    Render Loop

    • 1초마다 120번 run하는 과정이며,
    • 크게 3단계로이루어져있으며 병렬적이다.
    • 그리고 불필요한일을 피하기위해 존재한다.

    updateConstraints()

    • Render Loop 의 하나이다.

    아래의 constraint를 udpate하는과정은 아래의 layout과의 동작과 거의 일치한다.


    위의 코드르 아래와같이바꾼다.
    계속 constraint를 만들고없애고하지말고, 한번만 생성되도록한다.

    • 그니까 자주변경되는경우에서 솔루션이아님.

     

     


    Activate 하면 무슨일이일어날까?

     

    constraint를 추가하고자하는 viewsms Window 안에있다.
    그리고 Window는 AutoLayout을 담당하는 Engine을 가지고있다.

    view에 constraint를 추가하면, 이러한 “식,방정식 - Equation”은 Engine에 전달되어진다.

    그리고, Variable은 방정식에 필요한 변수들이다.
    Solve X - X가 Variable

    이러한경우에 4개의 variable이 있다고할수있다.

     

     

     

    과정

    아래와같이 만든다고해보자.


    그러면 우리는 Variable들이포함된 방정식을만들어낸다 ( Equation )


    그리고 이러한 방정식은 Engine에 전달되어진다.
    Engine은 variable를 해석하며 해결한다.


    이렇게 값들을 교체한다


    Engine은 이게다다, 복잡하지않고, 상상하는그대로 식들을 해석하고교체하고 할뿐이다. 그리고 이러한경우에는 굉장히 비용이들지않는다.

    이러한 식의연산이 끝났다면, View에게 알린다.

    view는 setNeedsLayout을 호출한다.

    • 왜냐, 계싼된constraint를 통해 움직여야하니까,

    View는 layoutSuview 를 받게된다.
    layoutSubviews() 는 Engine으로부터 data를 복사하여 Subview로 전달한다.

    • Engine에게 variable 에 어떤값이있는지 물어본다

     

     

    끝!

     

    만약 deactive, active 게속 반복한다면 아래와같이 계속 engine에갔다가 나왔다가 갔다가 반복한다.

    • 위의예제는 많지않으니 큰비용이없지만, 많은경우에는 비용이커지고, 불필요하다

     

     

     

     

    autolayout들이 서로 관련이없는경우 ( 상호작용하지않는경우)에는
    선형적인시간이소요된다. 가장좋은 방법이다


    Engine은 layout cache이면서, dependency tracker이다

     

     

    Performance 요약

    • 불필요한 consraint를 deallocate, allocate하지마라,
    • constraint들이 관련이 덜할수록 선형적인시간이된다. 단순 방정식에 계산할뿐이다.
    • Engine은 layout cache 이고, dependency tracker이다

     

     

     


    문제점을 발견해보자.

    • 여기서 constraint churning ( 얼마나 자주발생하는지 ) ,
    • Add constraint, Remove Constraint, change constraint 등등을 볼수잇다.
    • 클릭하면, 어떤 view들이 영향을미쳤는지알수있다.

    hide 하거나 show하는 것은 계층구조에서 삭제하는것보다 굉장히굉장히 싼 비용이다

     

    모든 constraint를 다없애고, active하지않는다.
    아래와같이 동물 이미지가 있거나없거나할때는, 이미지constraint를 따로 (노랑색) 만들어두고,
    이미지가없을때는 하나의constraint를 따로만들어둔다.
    그래서 이러한 constraint들만 deactive, active 하도록한다.
    그럼굉장히 부드러워진다!
    즉 최대한관련있는것과없는것으로나누어, 비용을최대한 줄이도록 한다.

    Constraint churn 피하기

    • 모든 constraint를 삭제하는것을 피한다.
    • 정적인, 고정적인 constraint는 한번만 생성한다.
    • 변화가필요한cosntraint만 변경한다.
    • view를 remove하지말고 hide하도록하라. ( 물론 없어져도 다른view에게영향을주지않는경우에 )

    Intrinsic Content Size

    • 모든뷰들이 갖고있는것은 아니다.
    • UIimage, UILabel같은경우는 가지고있다.
    • UIView는 이것을 사용하여 constraint를만들어낸다.
      • UILabel은 내부의 텍스트들을 고려하여 intrinsic content size를만들어낸다

    👍때로는 Intrinsic Content size를 overriden 하는게 좋을수있다.

    • 이렇게되면 intrinsic content size를 이미정했기때문에, 따로 text measurement 하지않는 장점이잇다.
    • 즉, intrinsic contentsize가 필요하지않는경우에 이렇게 사용하면좋은방법이잇다~

     

    👍System Layout fitting size

    • 사람들이 intrinsic content size와 fitting size를 비슷하게여기는데 이는 잘못됐다 둘은 다르다.
    • intrinsic contentsize는 engine에 들어갈 사이즈들을 계산하는방법 ?
    • fitting size는 engine에서 나온 사이즈정보(frame) 를 얻는방법이다
    • 오토레이아웃을 이용하는 서브뷰를 관리하는 뷰로부터 frame정보가필요한 곳에서 혼합된 레이아웃에서, 사용되는 방법이다.
      • 자주사용되는방법은아니ㅣㅈ만, 사용되긴한다!
    • 그리고 이것은 생각하는것보다 약간 비싼비용이든다.

     

    왜비싸냐면, engine이 만들어지고 , constriant들을 계산하고, 레이아웃이만들어지고, 그로인한 결과의 frame을 도출해내고, engine은 삭제된다.
    즉 계속 engine이만ㄷ르어지고, 삭제되기때문이다.

    • 그러므로, 적게사용한느건괜찮지만, 많이사용할경우 주의해야한다.

    engine 만들어지고, constraint 추가하고



    필요한 frame정보를반환하고,


    engine은 삭제된다.

     

     


    Unsatisfiable constraint

    • 해결책이없고,연습이많이필요하고, 디버그를잘해라.
    • Mysteries of Auto Layout , Part 2 - wwdc 2015 를 살펴봐라 - 디버그잘알려줌

    댓글