<aside>

</aside>

➡️ 최적화가 왜 중요할까

레이아웃 스레싱이란? requestAnimateFrame이란?

➡️ 왜 translate X를 권장하는가

• css로 위치를 바꿀때는, top, left등으로 바꾸거나 translate X, translate Y로 바꿀 수 있다.
• 그런데 translate X, translate Y를 권장하며, 애니메이션 라이브러리인 framer motion에서도 위치 애니메이션은 translate X, translate Y 로 동작된다.
• https://motion.dev/docs/animate#transforms
• 왜 top, left를 사용하지 않는걸까? 어차피 똑같은 위치를 나타내는데 말이다!

브라우저 렌더링 과정

• Layout → Paint → Composite

  • top/left: Layout → Paint → Composite 모두 다시 계산
  • translate: Composite만 다시 계산 (GPU 가속)

  // 매 프레임마다 재계산 필요 (Layout + Paint + Composite)
  element.style.left = `${x}px`;
  element.style.top = `${y}px`;
  
  // Composite만 재계산 (GPU 가속)
  element.style.transform = `translate(${x}px, ${y}px)`;
  
  

• 직접 확인해보자. translate는 cpu를 약 14%, top/left는 약 20%를 사용한다.

  • 페이지의 위치를 translate로 했을때는, Composite 만 발생한다.

  

  화면 기록 2024-11-24 오전 1.53.38.mov

  • top/left 로 했을때는 Layout 부터 발생한다.

    

    화면 기록 2024-11-24 오전 2.04.24.mov

➡️ 페이지 리사이징 구현

다음과 같은 코드이며, 8방향 리사이징을 구현해야한다.

특히 위쪽 방향으로 리사이징할 때 position은 감소하고 size는 증가해야한다. 어떻게 구현해야 좋을까?

style={{
  width: `${size.width}px`,
  height: `${size.height}px`,
  transform: `translate(${position.x}px, ${position.y}px)`,
  zIndex,
}}

1번째 시도

• transform-origin 속성을 사용해 기준점을 변경하려 했다.
• 이를 통해 최대화할 때도 중앙을 기준으로 확장되도록 하고자 했다.
• 하지만 transform-origin은 scale, translate 등 transform 관련 속성에만 적용되고 width, height에는 영향을 주지 않았다.