[ Animation ] CSS Animation vs Javascript Animation

[ Animation ] CSS Animation vs Javascript Animation

CSS 에니메이션과 자바스크립트 에니메이션에 대한 성능차이에 대한 고민은 프론트엔드 개발로는 절대로 중요한 사안입니다.

웹 프론트 엔드는 HTML, CSS 및 JavaScript의 세가지로 구축됩니다.

HTML, CSS 및 JavaScript는 HTML5 및 CSS3 이후로 특히 겹칩니다. 

과거에는 복잡한 애니메이션을 위해서 Javascript에 의존적이었지만, 그리고 여전히 GSAP와 같은 라이브러리가 있지만 요즘에는 Transition을 사용하여 애니메이션을 적용 할 수도 있습니다.

이를 통해 브라우저에서 javascript를 사용하는 몇가지 규칙을 공식화 할 수 있습니다.

Javascript를 통한 에니메이션, 포커스 된 상태 대신 브라우저의 CSS엔진을 활용해야 하는 몇가지 이유가 있습니다.

이것은 간단하지만 너무 단순하지 않은 코드 작성원칙에 기인합니다.

CSS와 HTML의 선언적 본성은 간결하고 강력하며 유지 보수가 쉬운 코드 작성에 도움됩니다.

자바스크립트는 너무 많은 일을 할 수 있고 여러가지 방법으로 취약점이 드러나기 때문에 적게 쓸 수록 문제가 발생할 확률이 적습니다.

몇 가지 이유에 대해서 자세히 열거해보려고 합니다.

1. Resilience(탄력성)

CSS와 HTML은 자기회복능력이 매우 좋습니다.

하나의 CSS 규칙이 깨진다고 해도 전체 웹 응용 프로그램을 손상시키지 않습니다.

태그가 하나 모자른다고해도 레이아웃이 틀어지는 일이 있다고 하여도, 극단적인 상황을 제외하면 그것은 사이트의 로딩을 막지는 않습니다.

반면에, 사이트 로딩 이전에 자바스크립트 하나의 에러구문, 또는 널값이나 undefined 체크를 하면 전체 앱에 영향을 줍니다. 강제로 당신의 유저는 리프레쉬를 해야하거나 전체적인 프로세스를 상실할 수 있습니다.

2. Optimisation(최적화)

CSS는 선언적이기 때문에 최적화에 대한 많은 관점이 있습니다.

브라우저는 하드웨어 가속을 통해서 CSS를 이용할 수 있습니다.

또한 화면 밖 요소의 스타일을 계산하거나 애니메이션을 실행하지 않는 것과 같은 것을 최적화 할 수 있습니다.

반면에, 자바 스크립트는 이러한 종류의 API에 즉시 액세스 할 수 없습니다.

3. Easy and costly to get wrong(잘못되기 쉽고 비용이 많이 듭니다.)

자바 스크립트는 CSS보다 탄력성이 떨어짐을 감안할 때 상대적으로 잘 작성된 자바 스크립트라도 UI나 브라우저 오류를 일으킬 수 있습니다.

하지만 CSS를 사용하면 하위 브라우저는 Transition 속성을 자동적으로 무시하므로 정상적으로 사용할 수 있습니다. JavaScript에서는 사용자가 오래된 하드웨어 나 저사양의 하드웨어를 실행하고 있음을 감지해야합니다.

CSS를 사용하면 적절한 품질 저하를 선택할 수 있습니다. 어느 것이 더 좋을지 압니다.

4. Cost of Javascript(자바스크립트 비용)

Javascript가 필요한 것보다 더 많은 사이트에서 CSS가 필요합니다. 

이런 이유 때문에 수많은 개발자들이 여전히 자신의 스타일을 head에 정의하고 script를 바디 끝나기 이전에 선언합니다.

CSS는 선언적이고 해석하기 쉽고 각 선택이 병렬로 해석될 수 있기 때문에 스타일의 메모리 내 표현을 병렬화 할 수 있습니다.

JavaScript는 일반적인 목적의 프로그래밍 언어이기 때문에 CSS가로드되어야하는 것처럼 그렇지만 파싱되고 동적번역이 되어야하고(JIT-Compiled) 실행되어야합니다. 

즉, CSS 및 JavaScript의 양과 동일한 양을 의미하는 JavaScript는 하드웨어 시간면에서 사용자에게 더 많은 비용이 듭니다.

5. Cost of maintenance and added dependencies(유지관리비용 및 추가된 종속성)

CSS 애니메이션과 유사 클래스를 사용하여 DOM 상태를 감지하는 것은 CSS와 HTML이 웹 표준에 의해 뒷받침되기 때문에 로딩 측면에서나 종속성을 발생시키지 않고도 비용이 들지 않습니다. 새로운 개발자라면 누구나 CSS 애니메이션에 익숙해 져있을 가능성이 높습니다. 

출처 : https://hackernoon.com/in-simple-terms-css-vs-javascript-abc9d709399d