애니메이션 최적화

애니메이션을 최적화 하기 위해선 브라우저의 렌더링 과정에 대해 알고있어야 한다.

브라우저 렌더링 과정

필요한 html, js, css 파일등을 서버로부터 다운로드 받는다
DOM 트리 + CSSOM 트리 생성
렌더트리생성
- 렌더트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다.
- DOM 트리와 CSSOM 트리가 생성되면 이 둘을 합쳐 렌더트리를 만든다
레이아웃
- 레이아웃 단계는 뷰포트 내에서 각 요소의 크기와 위치를 계산한다
페인팅
- 렌더트리의 각 노드를 화면의 실제 픽셀로 변환한다

사용자가 웹 페이지에 처음 접속하면 렌더링 과정을 거치게 되고 화면에 요소가 그려진다. 그 이후 사용자가 여러 액션들을 하며 발생하는 이벤트로 인해 어떤 새로운 HTML 요소가 생성, 삭제, 변경될 수 있다.

이런 변경이 생겨 영향을 받게되는 모든 노드는 렌더트리 생성과 레이아웃 과정을 다시 수행하는데 이 과정을 리플로우(Reflow)라고 한다.

리플로우는 단지 변경사항을 반영하기 위해 렌더링 트리를 생성하고 레이아웃 과정을 다시 하는 것이고 변경된 내용이 화면에 그려지기 위해서는 리페인트(Repaint)단계를 거쳐야 한다.

위의 내용을 바탕으로 유추해봤을 때 리플로우가 일어나야 리페인트가 일어나는 구나라고 추측할 수 있지만 무조건 그러는 것은 아니다.

레이아웃에 영향이 미치지 않는 속성이 변경됐을 땐 리플로우 없이 바로 리페인트만 일어난다.

하지만 리플로우가 발생한다면 리페인트도 반드시 발생한다

비용이 많이드는 레이아웃과, 리페인트 단계를 건너 뛰는 것이다

width나 height같은 요소의 크기가 변경되었을 경우 리플로우가 발생하기 때문에 브라우저 렌더링 과정을 또 모두 진행한다
color나 background-color 이 변경되었을 경우 브라우저 렌더링 과정이 진행되지만 그 중 레이아웃 단계는 생략되고 렌더트리생성 이후 바로 리페인트 단계로 넘어간다. 그 이유는 크기가 변경된 것이 아니기 때문에 레이아웃 단계를 진행할 필요가 없고 단지 색상이 변경되었기 때문이다.

그렇다면 레이아웃 단계와 리페인트 단계 모두 생략할 수는 없을까? 그 방법은 GPU의 도움을 받으면 가능하다.transform이나 opacity 같은 GPU가 관여할 수 있는 속성을 변경하는 것이다