animation 최적화 기법

1. CSS animation 최적화 하는 이유?

애니메이션을 구현하다보면 jank현상(스크롤 떨림, 지연, 끊김 등)이 나타난다.

이를 해결하기 위해 애니메이션 최적화가 필요하다.

애니메이션 최적화는 웹 사이트의 성능을 향상시킬 수 있고, 시스템을 절약하여 좋은 사용자 경험을 제공할 수 있다.

 

2.CSS animation 최적화 하는 방법

•  position 사용

포지션 속성을 사용하면 리플로우 과정을 줄일 수 있다. 포지션을 absolute나 fixed로 잡아서 다른 요소에 영향을 끼치지 않고 해당 요소에만 발생하게 되어 리플로우를 줄일 수 있는 방법이다.

• transform에서 3d 사용하기

transform은 부모 요소의 영향을 받지 않으면서 독자적으로 요소의 위치 및 확대, 축소, 회전이 가능한 css 요소이다. 그렇기 때문에 transform을 사용하면 브라우저에서 GPU(그래픽 처리 장치)를 사용하며 이것은 CPU에 부담을 덜어줄 수 있기 때문에 성능을 저하하지 않게 된다. 또 transform 3d의 경우에는 x,y,z 축으로 3차원상에서 이동할 수 있기 때문에 자연스러운 움직임을 구현해낼 수 있다.

•  will-change 사용하기

will-change는 css의 속성이다. 이름에서 예측할 수 있듯이 미래에 값에 변화가 있을 것을 미리 알려줘서 최적화할 수 있도록 도와준다. 변화가 일어날 요소의 속성으로 넣어주면 된다. 값으로는 변화가 일어날 속성을 넣어줄 수 있다.