holdanddeepdive/javascript-deep-dive

40장 이벤트

Opened this issue · 0 comments

p.777 예제 40-25
translate3d가 top,left를 조정하는 것보다 빠르다

스크린샷 2022-05-22 오전 10 51 45
첫번째 그림 : translate
두번째 그림 : position 조정

top, left 포지셔닝 같은 경우는 다른 엘리먼트에 영향을 끼치기 때문에 당연히 랜더링과 페인팅이 발생하게 된다.
https://mygumi.tistory.com/238

덧붙여,
https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance
translate3d()를 쓰는게 하드웨어 가속이 발생하게 되어있어서 성능이 좋다고 합니다.