1. 레이아웃 스레싱

• 레이아웃이 완성되기 이전, 요소의 크기나 위치 등 계산된 값을 속성으로 읽으려고 시도하면 강제 동기 레이아웃이 발생한다.

• 레이아웃 스레싱

  • 한 프레임 내에서 강제 동기 레이아웃이 연속적으로 발생하는 것을 레이아웃 스레싱 이라고 한다.
  • 이는 브라우저가 레이아웃을 불필요하게 여러 번 계산하게 만들어 성능을 크게 저하시킬 수 있습니다.

• 강제 동기 레이아웃 1

• 강제 동기 레이아웃 2

1-1. 얼마나 시간이 차이가 날까?

• 해당 코드는, 100개의 div box의 가로+세로 길이를 1px씩 100번 증가시키는 코드이다. (100px 100px → 200px 200px div로)

  • 코드

• 결과를 비교해보자! 860ms ↔ 20ms

  

• 강제동기 레이아웃이 발생하는 현상에서, 다음과 경고메세지가 같이 나타남.

1-2. 레이아웃 스레싱 방지

1. DOM 읽기와 쓰기 작업을 분리하자.

   // 최적화된 코드
   const width = box.offsetWidth;
   const height = box.offsetHeight;
   
   box.style.width = width + 10 + 'px';
   box.style.height = height + 10 + 'px';
   
   

2. requestAnimationFrame 활용

   • 레이아웃 변경을 다음 프레임으로 미룬다.

   requestAnimationFrame(() => {
     // 레이아웃 변경 작업
   });
   

   • 브라우저가 레이아웃을 계산하는 것보다 더 자주 또는 덜 자주 호출 ❌ → 정확한 주기로 호출
   • 브라우저가 레이아웃을 계산하기 바로 전에 호출 → 정확한 타이밍에 호출
   • 브라우저의 프레임 속도(보통 60fps)에 맞추어 애니메이션을 실행

1-3. 잠깐, 그러면 모든 렌더링을, requestAnimationFrame 에 맞춰야해?

• 그러면 되는 줄 알았다.
• 그래서 react-dom의 render 함수도 requestAnimationFrame 에 등록해서, frame이 바뀌는 16ms마다 render 해주면 되겠지 라고 생각했다.
• 그러나, react 는 이와 같이 동작하지 않는다. 왜요??? 왜????