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

문제 상황

• 캔버스 에디터에서 요소 드래그 시 수십~수백 개 DOM 노드가 연쇄 갱신되며 프레임 드롭 발생
• React 상태 기반 렌더링에서는 reconciliation 비용과 Layout Thrashing이 함께 병목으로 작용

원인 분석

• 그룹, 연결선, 가이드라인까지 포함한 연쇄 업데이트로 매 프레임 작업량 급증
• DOM read와 write가 섞인 실행 순서로 강제 reflow가 반복 발생

해결 방법

• React 렌더링 사이클을 우회하는 별도 렌더링 파이프라인 구성
• 4-Phase 배칭으로 read를 먼저 모으고 write를 나중에 실행해 Layout 1회로 통제
• 조작 종료 시점에만 React state와 실제 DOM 상태 동기화

성능/운영 포인트

• 100개 요소 드래그 시 Layout 횟수 대폭 감소
• 프레임 레이트가 60fps 수준으로 개선
• 매 프레임 다수 DOM 업데이트가 필요한 에디터류에 적용 가능