DOM Reflow 100번을 1번으로 줄였더니 60fps가 돌아왔다

이 게시물은 캔버스 에디터에서 드래그 시 버벅임의 원인을 React 렌더링 비용과 DOM Layout Thrashing으로 나눠 해결하는 방법을 소개합니다. 먼저 mousemove 동안 React 상태 업데이트를 우회하고, renderCallback에서 DOM을 직접 갱신하되 idleCallback 시점에만 React state를 동기화하도록 구성합니다. 그 다음에도 남아 있던 문제는 getBoundingClientRect, offset/scroll/clientWidth·Height, getComputedStyle 같은 DOM read와 style.transform 같은 DOM write가 섞여 발생하는 reflow 반복이었음을 확인합니다. 해결을 위해 모든 DOM Read를 한 데 모으고 모든 DOM Write를 나중에 수행하는 4-Phase 배칭 구조(PRE-READ-WRITE-POST)를 도입합니다. View들은 즉시 DOM 조작 대신 read/write task를 배칭 매니저에 등록하고, WRITE 단계에서는 이후 READ가 없게 보장해 강제 레이아웃 계산을 100회 수준에서 1회로 줄입니다. 그 결과 60fps가 회복되는 개선을 얻었으며, 핵심은 React를 버리는 것이 아니라 브라우저 Layout 계산에 맞춰 실행 순서를 재설계하는 것임을 강조합니다.