css로 애니메이션을 구현해보면서 렌더링 속도가 저하되는 문제가 발생했다.
이 문제를 해결하기 위해 gemini에게 해답을 물어보니 애니메이션 최적화가 필요하다고 답하며
리플로우 현상과 GPU 연산을 이해해야 한다고 말했다.
리플로우(reflow)
리플로우란 화면 레이아웃을 재조정하는 과정을 말한다.
애니메이션이나 레이아웃 조정이 필요할 때, 브라우저는 화면 요소의 크기와 위치를 다시 계산하여 렌더링하는 리플로우를 거친다.
이 과정에서 재조정이 필요한 요소 말고도 DOM 트리의 상위 요소들을 함께 다시 계산해버린다.
리플로우는 CPU 연산을 사용하기 때문에 복잡한 js 연산이 필요한 페이지일 경우 애니메이션이나 레이아웃 조정이 버벅이는 현상이 발생한다.
대표적으로 width, height, left, top, padding 속성을 바꿀 때 이 현상이 일어난다.
나는 기존 코드에서 padding 속성을 바꾸는 애니메이션을 구현했고, 그 결과 화면이 버벅이며 렌더링 속도가 느려졌다.
이에 대한 해답으로 gemini는 padding를 바꾸는 대신 scale을 조정하는 방법을 알려줬다.
GPU 연산
출처: Mong dev blog
scale 속성 변경은 GPU를 사용하는 연산이기 때문에 기존 CPU 자원을 사용하지 않고 병렬적으로 처리가 가능해 렌더링 속도가 향상되는 이점이 있다고 한다.
(GPU를 사용해서 속도가 향상되는 건 노드 레이어 분리와 연관이 있는데 이 내용은 더 공부해서 시간이 되면 정리해보려고 한다.)
이렇게 padding 대신 scale을 변경함으로써 리플로우 현상을 없애고 GPU 연산을 통해 애니메이션 최적화를 할 수 있었다.
물론 사진 자료에서 볼 수 있듯이 GPU 연산도 남용하면 성능 저하를 일으킬 수 있으니 필요에 따라 사용하는 것이 좋겠다.
CPU 연산과 GPU 연산을 생각하며 애니메이션을 최적화한다면 멋진 애니메이션을 효율적으로 구현할 수 있을 것이다.
