[iOS - swift] 1. UI 성능 분석 - Render Loop 이해하기 (Commit, Layout, Display, Prepare, Commit)

1. UI 성능 분석 - Render Loop 이해하기 (Commit, Layout, Display, Prepare, Commit) <

2. UI 성능 분석 - Instrument의 Animation Hitches 사용하여 UI 성능 개선하기

3. UI 성능 분석 - Commit Hitch를 줄이는 UI 성능 최적화 프로그래밍

Hitch

• hitch: 프레임이 제 때 나타나지 않는 시간대를 의미
  • UI 렌더링 성능이 저하될때의 신호

• hitch의 원인
  • UIAnimation은 연속적인 frame을 내보내지만, render loop가 제 시간에 frame을 완성하지 못한 경우 다음 frame을 보여주지 못하고 이전 프레임을 보여주다가 끊기는 것처럼 다음 frame을 보여줄 때 발생

Render Loop

• iOS는 뷰를 보여주기 위해 Render Loop를 사용하며, Render Loop란 뷰가 그려지는 세부 단계를 의미
• 주의) run loop와는 다른 개념이므로 주의할것
  • run loop: 스레드마다 하나씩 가지고 있으며, 메인 스레드는 Main Run Loop 디폴트로 하나 있고 내부적으로 while true와 같이 계속 이벤트가 발생하는지 체크하여 input source를 받아서 처리하는 역할
  • 구체적인 run loop 개념은 이전 포스팅 글 참고

3단계의 render loop

• refresh rate 마다 렌더링 관련 작업을 크게 3단계로 처리
  • App: 이벤트 처리 단계
  • Render server: UI가 렌더링되는 단계
  • On the display: 완성된 새로운 프레임이 화면에 노출
• refresh rate (= fps)란? 아이폰의 프레임이 교체되는 주기를 의미
  • 만약 60Hz이면, 1초에 60프레임을 보여주기 때문에 16.67ms마다 refresh

5단계의 render loop

(아래 용어들은 Xcode에서 디버깅할때 알아야하므로 중요)

5단계는 모두 병렬적으로 실행

 

App 단계

1) Event: 터치 이벤트 처리

• bounds가 변경되면 CoreAnimation이 setNeedsLayout을 호출 → commit 단계로 이동

2) Commit: UI를 변경하고 이 UI를 랜더 서버에게 랜더링 요청

• 레이어의 레이아웃을 배치하고 draw를 하는 단계
• 레이아웃 업데이트 요청들을 모으고, layer tree 생성
• drawRect를 오버라이딩한 뷰나 setNeedsDisplay가 호출된 뷰들이 그려짐

Render 단계

3) Render prepare: 랜더 서버는 새로운 UI를 GPU에 그릴 준비

• sub layer보다 super layer가 먼저 그려지도록 정렬

4) Render execute: GPU가 변경된 UI를 그리는 작업

 

Display 단계

5) Display: 그려진 새로운 UI를 프레임에 반영

 

2가지의 hitch

1) Commit hitch

• 주어진 시간내에 commit하지 못하는 경우
• commit하지 못한 경우 이전 프레임을 그대로 보여줌
• “hitch time”: 위와같이 지연되는 시간을 의미하며 ms로 측정

2) Render hitch

• 주어진 시간내에 랜더 서버에서 랜더링하지 못하는 경우

 

* 참고

https://velog.io/@yeahg_dev/UIAnimation-Hitch%EC%99%80-Render-Loop%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

https://developer.apple.com/videos/play/tech-talks/10856/