HTML5 transform:translate 와 top/left 성능 비교

참고 : “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 테스트 결과가 있는 이유는 성능의 문제로 박스의 갯수를 줄인 후 테스트한 결과 입니다.