[WEB] CSS animation vs JS animation

CSS animation VS JS animation

1. 어떤 animation을 선택할까?

- ui 요소 상태 전환 등, 간단한 원샷의 애니메이션을 적용하고 싶을 때는 CSS Animation

- ui 요소가 작거나, 그 요소만의 자체적인 상태를 갖고 있을 때는 CSS Animation

- 바운스 , 중지 , 일시정지, 되감기 등의 고급 효과를 원할 때는 Javascript Animation

- 애니메이션에 대해 세밀한 작업을 해야하는 경우에는 Javascript Animation

* 전체 장면에 대한 애니메이션을 하고 싶다면 requestAnimationFrame을 사용합니다. *

     -> javascript 의 고급의 접근방식이지만, 캔버스 위에 그리거나, 게임을 만들 때 유용합니다.

2. Animation을 제작할 때 고려해야할 사항

- 만들고자 하는 애니메이션이 성능 문제를 일으키지 않게 해야 합니다.

- 페이지 안에서 레이아웃을 변경하거나, 색을 변경하는 페인트 와 같은 애니메이션들은 Cost 가 많이 소모됩니다.

- 되도록이면 transition이나, opacity 같은 것을 사용하세요.  (브라우저가 최적화 할 수 있습니다!)

- will-change를 사용하여 브라우저에게 변경 사항을 미리 알려주세요.

-> 하지만 will-change를 너무 많이 쓰게 되면 성능이 반대로 더 떨어질 수 있습니다!

3. CSS, Javascript 성능에 대해서

- CSS에 기본적으로 제공되는 애니메이션 들은 "컴포지터 스레드" 라고 하는 스레드에서 작업을 수행합니다.

- "메인 스레드" 라고 하는 스레드가 또 따로 있는데 이것은 요소의 스타일 지정, 레이아웃 변경, 페인트 와 같은 자바스크립트가 수행되는 스레드 입니다.

- 위의 두가지는 서로 다른 스레드 입니다.  그래서 메인스레드에서 cost 가 많은 작업을 처리해도, 컴포지터 스레드에서의 애니메이션을 계속 수행할 수 있다는 뜻이 되기도 합니다.

- transition, opacity 들은 대부분 컴포지터 스레드에서 처리됩니다.

- 메인 스레드에서 cost가 많이 나가는 레이아웃 변경, 페인트와 같은 변경들의 오버헤드는 CSS 및 Javascript 실행과 연관된 작업들에 별로 좋지 않은 영향을 미칠 수 있습니다. 또한 해결할 수 없는 문제를 일으킬 수도 있습니다.