[CSS] Animation 최적화

⚡ CSS 애니메이션

---

CSS로 애니메이션을 만들어줄 때 데스크톱이나 노트북으로 부드럽게 작동하는 것을 확인했어도
막상 핸드폰으로 볼 때 엄청나게 버벅이는 경우가 있습니다.

 

이러한 현상은 스마트폰의 성능이 아무리 좋아졌다고 해도 비교적 떨어지기 때문입니다.

 

즉, 애니메이션 효과는 생각보다 컴퓨팅 파워를 많이 소모하고 최적화가 되어 있지 않으면
성능에 문제가 생긴다는 말과 같습니다.

 

그럼 웹에서 애니메이션이 동작하는 과정과 최적화하는 방법에 대해 알아보겠습니다.

---

📌 브라우저 렌더링 과정

브라우저에서 UI를 렌더링 하는 과정을 요약하면 다음과 같습니다.

1. Recalculate Style
   스타일을 계산하는 과정입니다.
   작성된 CSS를 파싱해 CSS Object Model을 생성합니다.
   Dom Tree와 CSS Object Model을 결합해 Render Tree를 생성합니다.
2. Layout (Reflow)
   요소에 대한 위치와 크기 같은 레이아웃을 계산하는 과정입니다.
   브라우저가 상대적인 위치와 크기들을 모두 계산해야되기 때문에 작업량이 많습니다.
   처리량이 많은 작업이다 보니 이 과정이 늘어나고 반복될 수록 성능에 악영향을 미칩니다.
   (Reflow를 유발하는 속성)

width	height	padding	margin
display	border-width	border	top, right, bottom, left
position	font-size	text-align	font-weight
font-family	line-height	overflow	white-space

3. Paint (Repaint)
   스타일과 위치 계산 작업들이 끝난 후 결과를 픽셀로 변환하여 화면에 표시하는 과정입니다.
   (Repaint를 유발하는 속성)

color	border-style	border-radius	background
text-decoration	outline	visibility	outline-color
outline-style	outline-width	box-shadow

4. Composite Layers
   생성된 레이어 계층들을 모두 합치는 과정입니다.
   이 과정을 마치며 비로소 우리가 보는 웹 화면이 됩니다.

여기서 상위 과정이 트리거되면 모든 하위 과정을 거치고,
변화의 프레임마다 계산 과정이 반복되기 때문에
최대한 계산 과정이 많은 Reflow와 Repaint를 피하는게 최적화의 키포인트 입니다.

---

📌 애니메이션 최적화

애니메이션을 최적화하는 방법은 여러가지가 있지만 대표적인 두 가지만 소개하겠습니다.

🔎 position

position의 absolute, fixed속성은 다른 요소와 연계되지 않고
독립적인 레이아웃을 유지하기 때문에 애니메이션 발생 시 다른 요소에 영향을 끼치는 파급력이 적은 편입니다.

 

그렇게 때문에 애니메이션을 적용할 요소에는 되도록이면 위와 같은 속성을 적용시키는게 유리합니다.

🔎 GPU를 사용하는 속성

다른 속성들은 CPU를 이용하는 Reflow와 Repaint 과정을 유발하지만
유일하게 transform과 opacity는 GPU를 이용해 Composite Layers 과정만 유발합니다.

 

그래픽 요소들을 GPU를 이용해 계산한다는 것은 굉장한 이점일 뿐 아니라
기존 레이어들을 바뀐 위치에 다시 배치하는 과정만 반복하기 때문에 성능의 부담이 없어집니다.

 

요약하자면 애니메이션 최적화를 진행할 때 Repaint와 Reflow를 피하는 속성인
transform과 opacity를 최대한 이용하되, 불가피하게 다른 속성을 사용한다면
absoulte, fixed position을 사용해 다른 요소들이 재계산 되는 경우를 줄이는 방법을 사용합니다.