"transform이 빠르다"는 결론만 외워서 말하는지, 렌더링 파이프라인의 어느 단계에서 비용이 발생하는지까지 보고 상황을 가르는지를 본다. 후속으로 합성·페인트·레이아웃 중 어디까지 되돌리는지 물어 깊이를 시험한다.
transform은 합성(composite) 단계에서 처리되기 때문에 레이아웃과 페인트를 건드리지 않고 위치를 바꾼다. top/left 같은 position 기반 이동은 박스의 기준 좌표를 바꾸기 때문에 레이아웃을 다시 계산하고 페인트까지 다시 돈다. 매 프레임 위치가 바뀌는 애니메이션은 transform으로 가고, 문서 흐름이나 기준 좌표 자체를 바꿔야 하는 경우에만 position을 쓴다.
끊기던 호버·드래그 애니메이션을 top/left에서 transform으로 바꿔 프레임을 회복한 경험이 있다면 렌더링 단계 비용으로 풀어 말할 수 있다
DevTools Performance 패널이나 FPS 카운터로 끊김을 측정해 본 적이 있다면 _측정 후 결정_ 흐름과 연결할 수 있다
기준 좌표가 필요해 의도적으로 position을 고른 사례가 있다면 transform이 적합하지 않은 케이스와 함께 설명할 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.