핵심 요약
미리디가 DOM Reflow 문제를 해결하기 위해 React를 우회하고 4-Phase 배칭으로 레이아웃 Thrashing을 제거, 100개 요소의 Layout를 1회로 줄이고 프레임레이트를 60fps로 회복했습니다.
구현 방법
- 위치/크기/회전 값의 매 프레임 변경을 React 상태 업데이트가 아닌 DOM 직접 갱신으로 처리: 뷰 매니저가 renderCallback에서 DOM을 직접 수정하고, 끝나면 idleCallback으로 React 상태와 동기화합니다.
- 4-Phase 배칭 모델 도입: PRE, READ, WRITE, POST의 순서로 실행하고, 각 뷰는 read/write를 분리해 배칭 매니저에 Task로 등록합니다.
- Read 우선 실행으로 레이아웃을 한 번만 발생시키고, 이후 Write 단계에서 DOM 업데이트를 수행합니다.
- CSS Custom Property를 사용해 DOM에 직접 transform를 적용하고, React 상태 변경은 idleCallback에서 동기화합니다.
- 100개 요소 드래그 시나리오에서 Layout 횟수 약 100회 → 1회로 감소, 프레임레이트 15–25fps에서 60fps로 개선.
주요 결과
- Layout 횟수 약 100회에서 1회로 대폭 감소
- 프레임레이트 15–25fps → 60fps로 개선
- React를 우회하더라도 Layout Thrashing 제거가 핵심 문제였음을 확인
