CSS 애니메이션 vs JS 애니메이션
애니메이션 효과를 주고 싶을 때, CSS의 transition / animation 속성이나 JS의 setInterval() / requestAnimationFrame() 을 사용할 수 있다. 하지만 각각 특징이 다르고 장단점이 있기 때문에 어떤 차이가 있는지 알아두는 것이 좋다. 또한, 특정 애니메이션은 성능 문제를 일으킬 수 있기 때문에 주의해서 사용해야한다.
CSS 애니메이션
- 컴포넌트를 이동시켜보자
- CSS: translate()
- JS: setInterval 내부에서 style.top, style.left를 변화시켜줌
2번은 브라우저 렌더링 과정에서 reflow를 발생시키기 때문에 뚝뚝 끊기는 느낌을 받게 된다. 따라서 레이아웃을 변경하는 경우에는 CSS 애니메이션을 사용하는 것을 브라우저 최적화를 위해 권장한다.
(*reflow: 이벤트에 의해 DOM 요소의 크기나 위치를 변경하면 해당 노드의 하위 노드와 상위 노드들을 포함하여 Layout 단계를 다시 수행하는 것)
장점
- 반응형으로 애니메이션을 구현하기에 유용하다.
- 외부 라이브러리를 필요로 하지 않는다.
- CSS 자체가 선언형이기 때문에 어떤 요소가 애니메이션을 가져야 한다는 직관적인 표현이 가능하다.
- 메인 쓰레드가 아닌 별도의 Compositor Thread에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS 애니메이션보다 효율적이다.
JS 애니메이션
CSS로 처리하기에는 복잡하고 무거운 작업들을 세밀하게 다루기 위해 사용한다. 바닐라 자바스크립트로 구현할 경우 위에서 살펴본 바와 같이 계속해서 요소의 위치를 재계산하기 때문에 비효율적이고 사용자 눈에 가장 부드러운 60fps가 유지되지 않는다. 이때문에 RAF(RequestAnimationFrame) API가 등장했고 구현방식은 동일하지만 60fps를 보장할 수 있게 되었다.
장점
- 스타일이 변하는 순간마다 제어할 수 있기 때문에 애니메이션의 세밀한 구성이 가능해진다.
- GPU를 통한 하드웨어 가속을 제어할 수 있다. 하드웨어 가속이 모바일에서 성능저하를 발생시킬 수 있기 때문에 이런 측면에선 좋다.
- 브라우저 호환성 측면에서
transition/animation속성보다 뛰어나다.
CSS, JS 애니메이션 성능
CSS: 컴포지터 스레드에서 작업 수행 (transition, opacity 등)
JS: 메인 스레드에서 수행 (스타일 지정, 레이아웃 변경, 페인트 등 cost 큰 작업)
두 스레드는 다른 스레드이다. 따라서 메인스레드에서 cost 높은 작업들을 처리해도 컴포지터 스레드에서 계속 수행할 수 있다.
메인 스레드에서 높은 cost로 인해 생기는 오버헤드는 css 및 js 실행과 연관된 작업에 영향을 미칠 수 있기 때문에 주의해야한다.
