참고 : “Myth busting the HTML5 performance of transform:translate vs. top/left”
 
개요
HTML5에서 애니메이션 효과를 내는 여러가지 방법들이 있습니다. 그 중에서 가장 성능이 좋은 방법이 무엇인지 조사하던 중에 발견한 포스팅 내용을 요약하였습니다.
 
테스트 범위

  • transform:translate vs. position:absolute and top/left
  • CSS Transitions vs. custom JavaScript requestAnimationFrame()
  • Graphics acceleration on vs. off (forced via rotateY hack)
  • 불투명한 elements vs. 일부 투명한 elements

 
간단한 테스트 방법

  1. n개의 박스를 만든다. (2000개 or 500개)
  2. 박스는 position A에서 B로 움직인다.

 
 
결론
아래 표에서 CSS3 Transitions(or Animation) & translate이 가장 성능이 좋다는 것을 확인 할 수 있습니다.(빨간색 글씨)
하지만 이 방법은 애니메이션이 동시에 일어날때 간혈적으로 발생하는 버그 및 여러 버그들이 존재 합니다.
때문에 다음으로 성능이 좋은 position:absolute top/left & javascript 의 requestAnimationFrame() 방법이 차선책이 됩니다.
또한 불투명한 element들을 사용할 경우에는 그래픽 가속을 사용하지 않는 것이 성능상 좋으나(test1, test2) 투명한 element들일 경우에는 그래픽 가속을 사용하는 방법(test9, test10)이 더 나은 결과를 보입니다.
따라서 개발시 element 투명상태에 따라 그래픽 가속 사용 여부를 고려해야 합니다.
해당 블로그를 작성한 회사(Tumult)에서도 position:absolute top/left & javascript 의 requestAnimationFrame() & 그래픽 가속(상황에 따라) 방법 사용한다고 합니다.
저자는 animation으로는 테스트하지 않았다는 것을 언급하면서 Transitions과 같은 성능을 낼 것이라고  말하였습니다.
 
성능테스트
또한 위표에서 IE보다 FF가 성능이 나쁜것을 확인하실수 있습니다. (2013년 2월 포스팅 입니다.)
우측에 모바일 브라우져와 FF 테스트 결과가 있는 이유는 성능의 문제로 박스의 갯수를 줄인 후 테스트한 결과 입니다.


김 현미

I love books and the coffee and JavaScript!

0개의 댓글

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다