애니메이션 최적화

이전 프로젝트에서 3D 애니메이션 렌더링 최적화 때문에 애먹은 적이 있었다..
그런데 테코톡에서 애니메이션 최적화와 관련된 부분이 올라와서 정리해볼까 한다.
참고 링크

브라우저의 렌더링 과정

파싱 단계

• HTML 파일을 파싱하여 DOM 트리를 생성한다.
• CSS 파일ㅇ르 파싱하여 CSSOM 트리를 생성한다.
• DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.

Layout 단계

• 각 요소의 크기와 위치를 계산한다.
• 각 요소를 벡터 박스로 표현하여 배치한다.
  - 리플로우 : 요소의 크기나 위치를 계산 또는 변경할 경우
  리플로우가 발생하면 브라우저는 파싱 단계부터 브라우저가 렌더링되는 모든 단계를 다시 수행하야하기 때문에 상당히 큰 작업이다.

Paint 단계

• 레이아웃 벡터 박스들을 레스트화 한다.
• 화면을 어떻게 그릴지에 대한 페인트 레코드를 생성한다.
• 리페인트 : 레이아웃 변경이 없고 시각적인 변경만 있는 경우
  이때 레이아웃을 제외한 브라우저의 모든 단계를 수행한다.

Layerize 단계

• 화면을 구성하는 몇 개의 Composited Layer List를 생성한다.
• 페인트레이어 중 컴포지팅 트리거를 만족한다면 그래픽레이어로 분리한다.
  - 리플로우와 리페인트가 발생하지 않는다.
  - GPU 가속을 활용하여 처리한다.
  GPU 가속을 사용하기에 그래픽레이어는 병렬로 빠르게 처리될 수 있다.

정리하면 Paint 단계의 결과물을 활용하여 Composited Layer List라는 데이터를 생성하는 단계임
간단히 말하면 페이지를 몇 개의 레이어로 쪼개는 단계
이때 브라우저는 렌더링 과정을 최적화하기 위하여 그래픽레이어라는 것을 사용함

Composite 단계

• 독립적으로 렌더링된 각 레이어를 합성하여 최종적으로 웹 페이지를 출력하는 작업을 수행
• 각 레이어는 서로 독립적으로 렌더링되기 때문에 필요한 레이어만 렌더링하여서 빠르게 렌더링을 수행할 수 있음

애니메이션 최적화의 열쇠

• 리플로우와 리페인트는 브라우저의 렌더링 과정을 다시 거쳐야하기 때문에 오래걸림
• 각 레이어는 서로 독립적으로 렌더링 되며, 특히 그래픽 렌더링의 경우 GPU 가속을 통해 빠르게 병렬적으로 처리할 수 있기 때문에 레이어를 분리했을 때 리소스와 성능 최적화의 트레이드 오프를 적절히 컨트롤해야 함

따라서 Layout 과 Paint 작업을 유발하는 속성 대신 Composite 속성을 잘 활용해야 함

화면을 보면 리페인트가 계속해서 발생하고 있음을 알 수 있음

Paint Layer 생성 규칙

• Stacking Context를 생성하는 속성의 값이 기본 값이 아닌 경우
  

  

동시에 실행되는 애니메이션이 많아지면?

페인트 레이어를 분리하는 것도 분명히 cpu 입장에서는 리소스를 소모하는 작업임
따라서 이러한 작업도 많아지면 작업량이 많아 딜레이가 발생할 수 있음