💡 animation이란?

CSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 변화시킬 수 있다. animation을 사용하면 사용자에게 움직임과 변화를 시각적으로 전달할 수 있다는 장점이 있지만, 너무 많이 사용하거나 복잡한 애니메이션을 적용하면 웹 페이지의 성능을 떨어뜨릴 수 있다는 단점이 있다.

😲 성능이 저하되는 이유

왜 애니메이션을 사용하면 웹 페이지의 성능이 떨어지는 걸까? 그 이유는 리플로우(reflow)와 리페인트(repaint)가 발생하기 때문이다.

리플로우(Reflow)
레이아웃이 변경되어 다시 계산되고, 렌더 트리의 일부 또는 전체를 다시 구성하는 과정이다. 리플로우는 요소의 위치, 크기, 레이아웃 등의 변경에 따라 발생한다. 렌더 트리를 재생성하기 때문에 비용이 많이 드는 작업이며, 성능 저하의 원인이 될 수 있다.

리페인트(Repaint)
렌더링 트리의 일부 또는 전체에 대한 색상 변경을 의미한다. 리페인트는 요소의 스타일이 변경되었을 때 발생하며, 레이아웃은 변경되지 않는다. 리플로우에 비해서 경제적인 작업이지만, 과도하게 발생 시 성능에 영향을 미칠 수 있다.

리플로우(reflow)와 리페인트(repaint) 과정은 모두 CPU 자원을 많이 사용하게 되는데 이 때문에 성능이 저하되게 된다. 그렇기 때문에 최적화를 위해서는 이 둘의 사용을 최소화 시켜야 한다.

animation 최적화 기법

✨ transform에서 3D 사용

3D 변환을 사용하면 회전, 이동 및 크기 조정과 같은 애니메이션 효과를 하드웨어 가속을 통해 처리할 수 있다. 이를 통해 더 효율적이며 부드러운 애니메이션을 얻을 수 있고, 3D 공간에서 요소를 이동하면 요소의 레이어가 더 깊이 있게 처리되어 더 자연스럽고 부드러운 애니메이션을 만들 수 있다. 또한, 대규모 데이터 집합을 동시에 처리하는 데 탁월한 GPU(그래픽 처리 장치)를 활용하여 애니메이션의 성능이 향상된다.

✨ position 사용

위에서 살펴봤듯, 리플로우(reflow)와 리페인트(repaint)를 줄이는 것이 중요한데, 애니메이션을 줄 요소에 css의 position 속성을 사용하면 리플로우(reflow) 과정을 줄일 수 있다. position 속성을 absolute나 fixed로 잡아주는 것이 좋은데, 이때, 다른 요소에 영향을 끼치지 않아서 전체 웹 페이지가 리플로우(reflow)되는 것이 아니라 해당 요소에만 발생하게 되어 결론적으로는 리플로우(reflow)를 줄일 수 있게 된다.

✨ will-change 사용

무분별한 하드웨어 가속은 오히려 브라우저를 느리게 한다. 때문에 will-change를 사용하여 브라우저에게 미래에 값에 변화가 있을 것을 미리 알려줘서 최적화할 수 있도록 도와줄 수 있다. will-change: transform과 같이 변화가 일어날 요소를 속성으로 넣어주면 된다.
사용하면 요소가 변형(transform)될 것임을 알릴 수 있고 브라우저는 요소의 변형에 대한 최적화를 수행할 수 있으며, GPU 가속을 활용하여 애니메이션이 더 부드럽게 동작하도록 할 수 있다.

.element {
  will-change: transform;
}

.container {
  will-change: scroll-position;
}

.text {
  will-change: opacity;
}

이런식으로 변경이 예상되는 값을 미리 알려주면 브라우저는 예상된 변경에 대한 최적화를 수행할 수 있으며, 이를 통해 성능을 향상시킬 수 있다.

참고 사이트

https://velog.io/@young_pallete/Reflow-Repaint을-알아보자
https://velog.io/@kjewt/HTMLCSS-animation-최적화-기법
https://velog.io/@boseong-choi/css-animation-최적화-기법