CSS 전환과 JS 애니메이션 패키지의 성능

CSS 전환과 JS 애니메이션 패키지의 성능

---

CSS Transitions를 사용하는 것과 다양한 JavaScript 애니메이션 라이브러리를 사용할 때의 성능 차이가 있는지 궁금합니다. ( script.aculo.us, scripty2, jsAnim, MooTools, $fx, 등).

Safari 와 Chrome 에서 다양한 테스트를 시도했지만 실제로 차이가 보이지 않습니다. CSS Transitions는 하드웨어 가속이 필요하다고 생각했습니다.

---

업데이트 :

나는 Effect.Fade5 개의 다른 DIV (각각 약간의 선이있는 캔버스를 포함)에서 Scriptaculous를 사용해 보았습니다 . CSS 전환을 사용하여 똑같은 작업을 수행하면 성능에 전혀 차이가 없습니다. 둘 다 하나의 DIV / Canvas로 매우 매끄럽지 만 한 번에 2 개 이상을 수행하면 둘 다 매우 느립니다.

나는이 시도했습니다 사파리 4, 5 (OSX) , 구글 크롬 (5) 와 파이어 폭스 3.7pre을 . 전반적으로 동일한 결과.

UpHelix의 응답에 대한 응답으로 단순히로 제한되지는 않습니다 . 스타일 hover을 변경하여 전환을 트리거 할 수 있습니다 transitionable. 예를 들어 자바 스크립트에서 요소의 불투명도를 설정합니다 (이후 해당 요소에 대해 transitionPropery및 transitionDuration을 지정했습니다 ).

---

예, 차이가 있습니다. CSS가 훨씬 빠릅니다. 동시에 많은 것을 실행하거나 더 많이 실행하기 전까지는보기가 어려울 수 있습니다. 하지만 CSS 애니메이션은 제한되어 있습니다. 대부분의 경우 그들은 실제로 :hover이벤트 에서만 작동합니다 . 자바 스크립트를 사용하면 어떤 경우에 애니메이션을 수행 할 수 있습니다 : click, mouseover, mousemove, mouseout, keyup, keydown, 등

제 생각에는 jQuery는 2010 년 JavaScript 애니메이션에 가장 적합합니다. jQuery 데모를 참조하십시오.

---

Uphelix의 (올바른) 대답에 추가하려면 JavaScript는 해석 언어이며 브라우저의 JS 엔진은 런타임 동안 모든 명령을 구문 분석하고 실행해야합니다 (Chrome에서 사용되는 V8과 같은 JS 컴파일러가 있다는 것을 알고 있지만 원칙은 동일합니다.)

반면에 브라우저는 C / C ++ 등에서 기본적으로 CSS 전환을 구현할 수 있습니다. 이 코드는 기계어로 컴파일됩니다.

CSS 전환이 하드웨어 가속인지 여부는 브라우저가 사용하는 기술, 브라우저가 실행되는 플랫폼 등에 따라 다릅니다.

---

모바일 브라우저 (iPhone, Android 등)에서 차이를 알 수 있습니다.

---

CSS 애니메이션은 브라우저에서 처리된다는 장점이 있습니다. 빠른 계산 및 최적화가 가능합니다. 제 생각에는 웹 애니메이션 성능은 "전체적인"관점에서 살펴 봐야합니다. 결국 FPS 측면에서 애니메이션은 브라우저 새로 고침보다 빠를 수 없습니다.

실제 성능 수준은 전체 UI 성능에 의해 결정됩니다. JS와 CSS 애니메이션은 비슷하게 보일 수 있습니다. 그러나 CSS 애니메이션은 UI 스레드를 차단하지 않기 때문에 승리합니다.

Stoyan Stefanov는 CSS 애니메이션이 UI 스레드에서 나오는 방법을 작성하고 시연했습니다. http://www.phpied.com/css-animations-off-the-ui-thread/

참고 URL : https://stackoverflow.com/questions/2999749/performance-of-css-transitions-vs-js-animation-packages