Demistify and Eliminate Hitches in the Render Phase

what are render phase?
- 앱은 UI를 변화시킨 다음에 렌더링 서버로 이를 넘김
- 랜더링 과정에서는 모든 foreground 프로세스에 대한 render comiit을 처리
- 렌더링 과정이 길어져서 다음 VSYNC까지 프레임이 준비되지 않으면, hitch가 일어남
- 렌더링 자체는 다른 프로세스에서 일어나지만, 과정의 시작과 끝은 앱에서 일어나므로 이를 측정할 수 있음
- 렌더링 과정
  - Render prepare
    - 커밋에서 애니매이션을 여러 프레임으로 분리한다
    - 레이어와 이펙트를 쪼개서 간단한 연산들로 만든다.
  - Render Execute
    - 위에서 쪼개진 작업들을 파이프라인으로 실행한다.
    - 처리된 결과물을 최종 프레임 이미지로 합친다.
자세한 렌더링 과정
- render Prepare 과정에서 모든 레이어들을 깊이 우선 탐색으로 탐색해서 선형화시킨다.
- render execute 단계에서 최종 텍스쳐에 위에서 준비된 되로 처리한다.
  - shadow는 본체가 그려지기 전에 아래에 그려져야 한다. 그래서 최종 텍스쳐 말고 다른 텍스쳐를 만들어서 거기에 shadow가 적용된 레이어들을 그린 다음에 검게 만들고 블러처리한다. 이후에 최종 텍스쳐로 결과물을 복사한다. -> offscreen rendering
  - offscreen rendering은 비용이 많이 들기 때문에 최소화 해야 성능이 나온다.
- offscreen rendering이 필요한 것들
  - shadowing
    - 위에서 설명했다.
  - masking
    - offscreen에서 전체를 그린뒤, 마스킹 된 부분만 최종 텍스쳐로 가져온다.
  - rounded rectangle
    - masking과 동일하다
  - visual effects
    - vibrancy, blur의 2종류
    - 이펙트를 offscreen에 적용한 뒤에, 이 값을 최종 텍스쳐에 복사함
hitch 측정
- animation Hitches Instrument 사용
  - render count 부분을 확인해서 너무 많지 않은지 확인하라
- view Debugger에서도 유용한 프로퍼티들을 볼 수 있다.
  - 레이어를 트리에 띄우도록 할 수 있다.
  - 이 레이어의 offScreen count도 볼 수 있다.
- Xcode 12에 optimization Opportunities 옵션이 생겼다.
추천방법
- 기본 API를 써라
  - shadowPath
  - cornerRadius, cornerCurve
- 마스킹을 최적화하라
  - 커스텀 마스킹 보다는 maskToBound를 쓰자
  - 마스킹이 필요 없으면 maskToBound를 false로 하라