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

Posted by in Research

참고 : “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   간단한 테스트 방법 n개의 박스를 만든다. (2000개 or 500개) 박스는 position A에서 B로 움직인다.     결론 아래 표에서 CSS3 Transitions(or Animation) & translate이 가장 성능이 좋다는 것을…read more