Fiber 기반 Linked-List 구조와 Double-Buffering을 통한 UI 렌더링 최적화

Context

기존 Virtual DOM 구조의 동기적 렌더링 방식은 대규모 트리 업데이트 시 메인 스레드를 점유하여 사용자 인터랙션 지연을 초래함. 브라우저 렌더링 파이프라인을 방해하지 않으면서 우선순위에 따른 효율적인 업데이트 수행이 필요함.

Technical Solution

• FiberNode 도입을 통한 렌더링 단위의 최소화 및 작업 중단/재개 가능 구조 설계
• Array 기반 트리를 child, sibling, return 포인터 중심의 Linked-List 구조로 변경하여 순회 효율 증대
• Current Tree와 Work-in-Progress(WIP) Tree를 교체하는 Double-Buffering 기법으로 렌더링 일관성 확보
• Lanes와 Scheduler를 결합하여 사용자 입력 등 긴급한 업데이트에 높은 우선순위를 부여하는 스케줄링 적용
• render phase의 비동기 처리와 commit phase의 동기 처리를 분리하여 브라우저 Paint 전 DOM 반영 최적화
• three-pass commit 설계를 통한 lifecycle 메서드(useEffect, useLayoutEffect)의 실행 시점 보장