Virtual DOM 기반 Diffing 알고리즘을 통한 최소 DOM 조작 및 렌더링 최적화

Context

브라우저의 Actual DOM 조작 시 발생하는 스타일 재계산, 레이아웃 재배치, 리페인트 과정의 높은 연산 비용 분석. 대규모 데이터와 빈번한 상태 변화가 발생하는 복잡한 UI 환경에서 전체 DOM 재구축으로 인한 성능 저하 및 사용자 경험 악화 문제 식별.

Technical Solution

• Actual DOM의 경량화된 JavaScript 객체 복제본인 Virtual DOM을 메모리 상에 유지하는 구조 설계
• 상태 변경 시 전체 Actual DOM을 수정하는 대신 새로운 Virtual DOM 트리를 생성하여 메모리 내에서 비교 수행
• Old Tree와 New Tree 간의 차이점을 계산하는 Diffing 알고리즘을 통한 최소 변경 사항(Patches) 도출
• Diffing 단계에서 산출된 최소 변경분만을 Actual DOM에 선택적으로 반영하는 Re-Render 프로세스 구축
• 불필요한 DOM Manipulation을 배제하여 브라우저의 Reflow 및 Repaint 횟수를 최적화하는 전략 채택