CSS로 엘리먼트의 위치를 잡을 때 translate 또는 top: 0px; left: 0px; 과 같은 absolute positioning을 사용한다. 쿠키런을 개발하면서 쿠키의 위치를 매 프레임 translate 값을 변경하며 이동시켰기 때문에, 아무 생각 없이 장애물의 위치를 쿠키와 마찬가지로 translate를 이용해 잡았었다(JS 코드에서).
이후 장애물 파괴 애니메이션을 추가하며 인라인 스타일 우선순위로 인해 transform: rotate 속성을 적용시키지 못해 고생하다가, 장애물을 생성할 때 왜 굳이 translate를 사용했는지.. 근본적인 의문이 생긴 것이다.
목적
우선 translate와 absolute positioning은 목적부터 다르다. translate는 위치 이동이 필요한 모션에 적용하기 위한 것이고, absolute positioning은 엘리먼트를 특정 위치에 위치시키기 위한 말 그대로의 포지셔닝이다. 따라서 나의 경우 계속해서 움직이는 쿠키에는 translate를, 정해진 위치에 있는 장애물에는 absolute positioning을 적용하는 것이 맞는 것이다.
성능
그런데 굳이 둘을 구분해서 쓸 필요가 있을까? 어차피 최종적으로 구현되는 그림이 똑같다면 아무거나 써도 되지 않을까? 둘을 구분하는 이유는 성능 차이가 있기 때문이다. 결론부터 말하자면 absolute positioning이 CPU에 더 큰 부담을 준다. transform은 다른 엘리먼트에 영향을 주지 않지만 absolute positioning은 다른 엘리먼트에 영향을 끼치기 때문에 렌더링과 페인팅이 추가로 발생하게 되기 때문이다. 또한 transform의 translate나 rotate 등의 속성은 GPU에서 처리되기 때문에 CPU에 가해지는 부담을 덜 수 있다.
아래 링크를 통해 둘의 차이를 눈으로 확인할 수 있다.
translate: https://codepen.io/paulirish/full/kMwQLR
Animating with Translate
...
codepen.io
absolute positioning: https://codepen.io/paulirish/full/nyNvZw
Animating with Top/Left
...
codepen.io
참고 자료
https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Why moving elements with translate() is better than pos:abs top/left - Paul Irish
In modern days we have two primary options for moving an element across the screen: using CSS 2D transforms and translate() using position:absolute and top/left Chris Coyier was asked why you should use translate. Go read his response which covers well why
www.paulirish.com
'JS & CSS & HTML' 카테고리의 다른 글
| JS sort (문자열 배열 정렬 & 숫자 배열 정렬) (0) | 2022.06.26 |
|---|---|
| JS Image preloading (0) | 2022.05.31 |
| CSS line-height (0) | 2022.05.03 |
| Font Awesome : HTML에 아이콘 삽입 (0) | 2022.04.20 |
| JS LocalStorage (0) | 2022.04.19 |