CSS animation 최적화 기법

CSS  animation

애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 역할을 한다. 이를 통해 웹 페이지를 생동감 있게 만들 수 있지만 너무 많이 사용하면 웹 페이지의 성능을 떨어뜨릴 수 있다.

---

애니메이션을 사용했을 때 웹 페이지의 성능이 떨어지는 이유는 CPU의 저원을 많이 사용하는 reflow 와 repaint 가 발생하기 때문이다.

 

reflow : 브라우저가 웹 페이지를 렌더링할 때, html 요소의 위치나 크기가 변경되면 해당 요소와 요소를 포함하는 상/하위 요소의 레이아웃을 다시 계산하고 렌더링 하는 과정

 

repaint : 요소가 변경되어 reflow 과정이 끝난 후 재생성된 웹 페이지의 CSS 속성 등을 다시 렌더링 하는 과정

 

이렇게 reflow 와 repaint 를 줄이는 animation 최적화 방법에는 아래와 같은 것들이 있다.

 

 

1. position 속성을 사용한다.

애니메이션을 부여할 요소에 css 의 position 속성을 사용하여 reflow 과정을 줄일 수 있다. position: absolute 나 position: fixed 를 사용하면 이는 다른 요소에 영향을 미치지 않아 해당 요소에만 reflow 가 발생하도록 한다.

 

2. transform 에서 3d 사용하기

transform 은 부모 요소의 영향을 받지 않으면서 요소의 위치, 확대, 축소, 회전이 가능한 요소이므로 transform 을 사용하면 브라우저에서 GPU 를 사용하여 CPU 의 부담을 줄일 수 있다. 그와 더불어 transform 3d 는 x, y, z 축인 3차원상에서 이동할 수 있어 자연스러움 움직임을 구현할 수 있다.

 

3. will-change 사용하기

will-change 는 CSS 속성 중 하나인데, 나중에 값에 변화가 있다는 것을 미리 알려주어 최적화 할 수 있게 도와준다. CSS 는 변화가 생기는 요소의 속성으로 선택자를 작성하고, 값으로는 변화가 생길 속성을 넣는다.

.change-element {
	will-change: font-size, color
}

하지만 요소마다 변화하는 모든 값을 will-change 에 넣으면 최적화 할 것이 많아져 브라우저가 최적화에 많은 시간을 쏟게 되어 성능이 저하될 수 있다.