728x90
반응형
웹 브라우저 성능 관련해서 찾아보면 항상 언급되는 부분이 'Paint를 최소화해야 한다는 점'이다.
Paint를 최소화 하기위해서는 최초 한번 그리는 부분 외 다시 그려야하는 경우를 줄여야 한다는 것을 의미한다.
무심코, css의 top, left를 활용하다보면 Painting을 다시하는 경우가 생겨 성능에 이슈를 만들 수 있는데, 요즘은 브라우져 성능들이 매우 좋아 체감으로 느끼기는 쉽지않다. 그럼에도 불구하고 성능 이슈는 티끌모아 태산일 수 있기에 최대한 top, left는 지양해야한다.
대신하여 쓸 수 있는것이 translate 이고, 정확한 코드는 아래와 같다.
/* bad */
.item {
top : 10px;
left : 10px;
}
/* good */
.item {
transform : translate(10px, 10px);
}
단순히, 이동이라 생각하면 이 정도만 알아도 되지만 엄연히 두 개는 방식의 차이가 있다.
간단하게 설명하자면,
transform 속성의 경우에는 좌표 공간 자체를 변형하여 다른 요소에 영향을 미치지 않고 위치를 변경할 수 있다.
position(top, left)의 경우에는 엘리먼트를 특정 위치에 자리를 차지하여 위치를 변경할 수 있다.
※ 참고 URL
- https://mygumi.tistory.com/238
- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
반응형
