JS Heap 1GB 초과 해결, GitHub Diff 라인 렌더링 최적화 전략

Context

대규모 Pull Request 조회 시 DOM 노드 수 400,000개 초과 발생. JavaScript Heap 메모리가 1GB를 상회하며 인터랙션 지연 및 페이지 불능 상태 초래. 과도한 React 컴포넌트 계층과 이벤트 핸들러 중첩으로 인한 INP 성능 저하.

Technical Solution

• 라인당 10~15개였던 DOM 요소와 8~13개의 React 컴포넌트를 최소화하는 구조적 단순화
• 개별 컴포넌트마다 중복 할당된 20개 이상의 이벤트 핸들러를 제거하고 효율적인 이벤트 관리 체계 도입
• 대규모 PR 대응을 위해 렌더링 범위를 제한하는 Virtualization 전략 적용 및 점진적 로딩 방식 구현
• CSS :has() 등 무거운 선택자를 제거하고 GPU Transform 기반의 드래그 및 리사이즈 처리로 Forced Layout 방지
• 서버 사이드에서 가시 영역의 Diff 라인만 하이드레이션하는 최적화로 Time-to-Interactive 단축
• O(1) 데이터 접근 패턴 도입 및 복잡한 상태를 조건부 렌더링 자식 컴포넌트로 분리하여 메인 스레드 부하 경감

Impact

• JavaScript Heap 메모리 사용량 1GB 초과 문제 해결
• DOM 노드 수 400,000개 이상 발생 지점 최적화

Key Takeaway

재사용성 중심의 작은 컴포넌트 설계가 대규모 데이터 렌더링 환경에서는 오히려 오버헤드가 될 수 있음. 데이터 규모에 따라 최적화 전략을 다각화하고 렌더링 단위를 과감히 단순화하는 설계적 유연성이 필요함.